Skip to main content

Core Concepts

1. Markdown first​

Everything that works in standard Markdown works here — headings, paragraphs, links, bold, lists, images. No changes, no surprises.

2. Indentation = nesting​

The hierarchy of elements is expressed through indentation. A child element is indented one level under its parent. Siblings share the same indentation level.

card:              ← parent
  row:             ← child of card
    button: A      ← child of row
    button: B      ← child of row

This rule is consistent everywhere — no exceptions.

3. Default flow is vertical​

Without a row:, elements stack top to bottom. This is the default for all pages.

# Title
A paragraph.
button: Click me

→ title, then paragraph, then button, stacked vertically.

4. Modifiers prefix elements​

Add descriptive words before an element keyword to modify its appearance. The last word before : is always the keyword. Everything before it are modifiers.

blue button: Submit
large outline button: Cancel
red alert: Something went wrong.
green badge: Active
password input: Enter password...

5. Fractions define width​

Any element inside a row: accepts a fraction to define its width. Fractions should add up to 1.

row:
  card 1/3:
    # Sidebar
  card 2/3:
    # Main content

Supported fractions: 1/2, 1/3, 2/3, 1/4, 3/4, full.

6. Centering​

Add centered before any element to center it horizontally on the page.

centered button: Get Started
centered input: Search...
centered card:
  # Centered content

centered works on any element. It centers the element itself — not just its text.

7. Arrows mean navigation​

→ followed by a destination makes any element a link. Works on buttons, links, nav items, and more.

button: Go Home → /home
link: About → /about
button: Open → [modal: contact]

Destinations can be:

  • A URL path: → /about
  • An anchor: → #section
  • A named modal: → [modal: name]
  • A named section: → [section: name]

8. Emojis are icons​

No icon library needed. Use emojis anywhere you'd use an icon.

button: 🗑️ Delete
button: ⚙️ Settings
nav:
  logo: 🎬 My App