Art of SEN — Beginner-Friendly UI Language Guide (HTML + CSS alternative)

SEN is a simple interface language designed to replace traditional HTML + CSS with one structured system. It focuses on readability, fast UI building, and separating structure, style, and effects into clear parts.

Below is a cleaned, beginner-friendly version of your system with corrected syntax and clearer rules.

1. Document Setup (Required Base)

Every SEN file starts with:

		
			<doc!SEN>
		
	

This tells the system: “This is a SEN document.”

To load a source file or module:

		
			<?/src=main>
		
	

Replace main with any file or module name.

2. Core UI Elements

Labels (text display)

		
			<label:"Hello world">
		
	

Used for showing text on screen.

Inputs (typing box)

		
			<add=dc{placeholder="Type here"}>
		
	

This creates a text input box where users can type.

Buttons

		
			<button=clickable>
		
	

You can change behavior:

• clickable = works normally

• unclickable = disabled

Example:

		
			<button=clickable:"Start Game">
		
	

3. Styling System

SEN splits visuals into two layers:

A) Stylistic (LOOK ONLY)

Used for appearance, no behavior.

		
			<stylistic>
		
			

		
			button.color=blue
		
			

		
			button.shape=square
		
			

		
			</stylistic>
		
	

This controls how things look only.

B) Underlystics (BEHAVIOR + EFFECTS)

Used for animation, interaction, and effects.

		
			<underlystics>
		
			

		
			button.hover=lift(50px)
		
			

		
			button.fade=on
		
			

		
			</underlystics>
		
	

• stylistic = visual skin

• underlystics = motion + reaction

4. Hover & Button Effects

Hover movement:

		
			hover-on.button=50px
		
	

Meaning: when mouse hovers, button lifts 50 pixels.

Click behavior:

		
			.button[
		
			

		
			click=true -> open("https://youtube.com")
		
			

		
			]
		
	

This means:

• If clicked → go to YouTube

Optional tracking source:

		
			source=youtube.com
		
	

5. Variables (Like JavaScript)

SEN supports simple variables:

		
			<let age = 12>
		
	

Used for storing values like JS.

6. Fonts

		
			<fonts=sans-serif>
		
	

Rules:

• Use real system font names

• Replace spaces with -

Example:

		
			<fonts=roboto-mono>
		
	

7. Functions (Reusable Blocks)

Basic function structure:

		
			{
		
			

		
			<define-function:"hello">
		
			

		
			 <underlystics>
		
			

		
			 print="Hello World"
		
			

		
			 </underlystics>
		
			

		
			}
		
	

Call it anywhere:

		
			<hello>
		
	

Functions are used to avoid repeating code.

8. Layout & Alignment

Center content:

		
			align.center=true
		
	

Other examples:

		
			align.left=true
		
			

		
			align.right=true
		
	

9. Advanced Styled Objects

Example shape system:

		
			<stylistics=color.blue.shape.square[
		
			

		
			 width=120px
		
			

		
			 height=50px
		
			

		
			 texture=grass.png
		
			

		
			]>
		
	

Supported shapes:

• square

• rectangle

• cone

• triangle

Textures:

• grass.png

• stone.png

• concrete.png

• brick.png

10. Game Mode Toggle

		
			<game=true>
		
	

• true = high performance mode (smooth animation, 120fps target)

• false = standard mode (60fps stable)

11. Button Short Syntax

		
			.button2:"Click Me"
		
	

Simplified button with default styling.

12. Function Shortcut Calling

If defined:

		
			<fuction>
		
	

(This is your shorthand system for triggering logic blocks.)

13. Full Example

		
			<doc!SEN>
		
			

		
			<?/src=main>
		
			

		
			

		
			<fonts=roboto>
		
			

		
			

		
			<label:"Welcome">
		
			

		
			

		
			<add=dc{placeholder="Enter name"}>
		
			

		
			

		
			<button=clickable:"Start">
		
			

		
			

		
			<underlystics>
		
			

		
			button.hover=lift(30px)
		
			

		
			</underlystics>
		
			

		
			

		
			align.center=true
		
	

Laws of Contacting coderS (Canonical Rule Set)

This document is permanent and must be treated as immutable unless explicitly updated by the author.

1. Naming + Space Convention (GEN5 Standard)

Spaces are not allowed in identifiers or function names.

Rule:

• Replace every space with _

Example transformation:

		
			TO hereinafter define function
		
	

becomes:

		
			TO_hereinafter_define_function
		
	

This rule applies to:

• function names

• variables

• aliases

• module identifiers

No raw spaces are permitted in executable identifiers.

2. Function Call Syntax Standardization

All executable output commands must use parenthesis form.

Rule:

• Any type"text" style must be rewritten into function-call syntax

Example:

		
			type("Hello World").STOP
		
	

Not allowed:

		
			type"Hello World".STOP
		
	

Requirement:

• All callable commands must use ()

• All parameters must be inside parentheses

• .STOP remains the termination marker for GEN5 execution blocks

3. Single-Command Consistency Rule

When multiple valid syntax options exist, only one version must be used per file.

Rule:

• Do not mix alternative syntaxes for the same operation

• Choose one canonical form and apply it everywhere

Example violation:

• using both CALL function() and <function> in same system context

Correct approach:

• standardize on one form per project

• enforce consistency across GEN5, SEN, and ZZX usage

This rule exists to prevent syntax drift and parsing conflicts.

4. SEN Tag Closure Rule

All SEN elements using angle brackets must follow strict closure formatting.

Rule:

• Every opening tag must have a proper closing tag

Format:

		
			<element>content</element>
		
	

Example:

		
			<button>Click Me</button>
		
	

Key constraints:

• closing tag must mirror opening tag name

• / is required in closing structure

• spacing is optional but must not break parsing

• nested elements must close in reverse order of opening

This ensures SEN remains structurally predictable.

OUTRO

These rules define the stable foundation of coderS syntax behavior.
Once applied, all previous inconsistencies are overridden by this standard.