Copy-Paste System Prompt

This block is the entire CEDUIX specification. Inject it into any LLM context and it will generate valid CEDUIX UI.

CEDUIX UI v1.3 — 96-token closed vocabulary. One CSS file. Zero JS. Charts included.

RULES:
1. Every element uses ui="..." attribute with space-separated tokens
2. Max 4 tokens per element. Pick 1 primitive + 0-3 modifiers
3. Closed vocabulary — ONLY these 96 words are valid
4. Link: <link rel="stylesheet" href="ceduix.css">
5. Charts: <script src="ced-charts.js"></script>

PRIMITIVES (45) — element role, pick one:

Layout:      page stack cluster grid center sidebar cover section contain
Surface:     card panel sheet overlay
Typography:  heading subheading eyebrow body caption code prose
Interactive: button input alert stat metric nav
Utility:     divider grow truncate shrink-0 nav-spacer scroll
Platform:    dialog popover tabs tab-list tab tab-panel
             accordion switch progress skeleton avatar breadcrumb table

MODIFIERS (51) — combine with any primitive:

Size:      xs sm md lg xl
Style:     elevated raised accent muted ghost outline glass solid
State:     active success warning danger info
Gap:       tight loose pad between end
Motion:    animate reveal d1 d2 d3 d4 d5 d6 d7 d8
Direction: from-left from-right from-down fade
Feature:   stagger clamp full dot pulse dim faint
Data:      num addr group pri aside toggle stripe

EXAMPLES:

<body ui="page">
<nav ui="nav animate">...</nav>
<section ui="section"><div ui="contain"><div ui="stack lg">...
<div ui="card elevated">
  <h3 ui="heading sm">Title</h3>
  <p ui="body">Content</p>
  <span ui="caption" style="color:var(--ok)">Active</span>
</div>
<button ui="button lg">Primary</button>
<button ui="button outline sm">Secondary</button>
<div ui="grid md">...</div>          <!-- auto-fit responsive grid -->
<div ui="cluster sm">...</div>        <!-- flex-wrap horizontal -->
<dialog ui="dialog">...</dialog>      <!-- native dialog, @starting-style -->
<details ui="accordion">...</details>  <!-- native, zero JS -->
<label ui="switch"><input type="checkbox"> Label</label>
<progress ui="progress success" value="80" max="100"></progress>
<div ui="card reveal from-left">       <!-- scroll-triggered animation -->
<div ui="grid stagger">               <!-- auto-staggered entry -->

TABS (CSS-only, use <nav> not <div> for tab-list):
<div ui="tabs">
  <nav ui="tab-list">
    <input type="radio" name="t" id="t1" checked>
    <label ui="tab" for="t1">Tab 1</label>
    <input type="radio" name="t" id="t2">
    <label ui="tab" for="t2">Tab 2</label>
  </nav>
  <div ui="tab-panel">Panel 1</div>
  <div ui="tab-panel">Panel 2</div>
</div>

DESIGN SYSTEM — CSS custom properties (use directly in style=""):

Spacing:  --s-1:.25rem --s-2:.5rem --s-3:.75rem --s-4:1rem --s-6:1.5rem --s-8:2rem --s-12:3rem --s-16:4rem --s-24:6rem
Bg:      --bg-0 (base) --bg-1 (+4%) --bg-2 (+8%) --bg-3 (+12%) --bg-4 (+17%)
Text:    --tx-0 (full) --tx-1 (75%) --tx-2 (50%) --tx-3 (32%)
Borders: --bdr-0 (4%) --bdr-1 (8%) --bdr-2 (14%) --bdr-3 (22%)
Accent:  --ac (base) --ac-hi (lighter) --ac-lo (darker) --ac-bg (tinted bg) --ac-gl (glow)
State:   --ok (green) --wr (amber) --er (red) --in (blue) + --ok-bg --wr-bg --er-bg --in-bg
Fonts:   --f-ui (Inter) --f-mono (Inter) --f-disp (Inter)
Radii:   --r-sm (.375rem) --r-md (.5rem) --r-lg (.75rem) --r-xl (1rem)
Shadows: --sh-sm --sh-md --sh-lg

PARAMETRIC HUE — set --hue on :root, entire palette recomputes (OKLCH):
70=gold  140=forest  200=ocean  270=violet  340=rose
Animatable: transition --hue smoothly between brand colors

CSS ENGINE — what powers ceduix.css:
@layer ceduix        — cascade isolation, won't conflict with other CSS
OKLCH color space    — perceptually uniform, 95%+ browser support
color-mix()          — all derived colors computed from 8 base colors
light-dark()         — automatic dark mode, 1 stylesheet
@property            — typed custom properties, animatable colors/hue
@starting-style      — entry animations without JS (dialog, popover, cards)
:has() selectors     — parent-aware styling (form validation, tab state)
container queries     — components respond to container, not viewport
text-wrap balance    — automatic on [ui~=heading],[ui~=subheading] (no orphans)
text-wrap pretty     — automatic on [ui~=body],[ui~=prose] (widow-free)
text-box trim-both   — optical centering on heading/eyebrow/button/caption (Chrome/Safari 2025+)

DENSITY: data-density="compact|spacious" on body
VALIDATION: :user-invalid + :has() auto-disables submit buttons
A11Y: prefers-reduced-motion|contrast|reduced-data honored automatically

CHARTS — ced.chart() (zero-dep SVG, CSS in ceduix.css):
<script src="ced-charts.js"></script>
ced.chart('#el', data, ['key1','key2'])       — 3-arg API
ced.chart('#el', data, {keys, type, unit})    — with options
Types: line, area, bar, scatter, pie, donut, heatmap
Features: dual Y-axis, synced crosshair, legend toggle, dark glass tooltip
Palette: --ch-1..--ch-12 (12 series colors in ceduix.css)

SITE STRUCTURE — ceduix.cedricflodin.se:
index.html       — 3D orbit landing (links to all pages)
showcase.html    — component demo (layout, surfaces, typography, interactive)
innovations.html — lab experiments + platform-native + parametric features
cheatsheet.html  — this page (LLM system prompt + visual reference)
charts.html      — Ced Charts demos (line, area, bar, scatter, pie)
lab/*.html       — bleeding-edge CSS experiments (anchor, scroll, transitions)

Visual Reference

Every Token, Live

Layout

Token	What it does	Example
`page`	Root body layout	`<body ui="page">`
`stack`	Vertical flex column	`ui="stack md"`
`cluster`	Horizontal flex-wrap	`ui="cluster sm"`
`grid`	Auto-fit responsive grid	`ui="grid lg"`
`center`	Centered content	`ui="section center"`
`sidebar`	Sidebar + main	`ui="sidebar md"`
`cover`	Full-height hero	`ui="cover center"`
`section`	Page section	`ui="section"`
`contain`	Max-width container	`ui="contain"`

Surface

card

card elevated

card accent

card muted

card glass

card outline

Interactive

Typography

heading xl

heading lg

heading

heading sm

subheading

eyebrow

body

caption code

Platform-Native

Switch On

Progress

Skeleton

State Modifiers

alert (info)

alert success

alert warning

alert danger

Design System

Tokens & Engine

Parametric Hue

Set --hue on any element — entire accent palette recomputes via OKLCH.

--hue: 70

Gold

--hue: 140

Forest

--hue: 200

Ocean

--hue: 270

Violet

--hue: 340

Rose

Spacing Scale

--s-1

.25rem

--s-2

.5rem

--s-4

1rem

--s-8

2rem

--s-16

4rem

Background Layers

--bg-0

--bg-1

--bg-2

--bg-3

--bg-4

Semantic Colors

--ok

--wr

--er

--in

Fonts

--f-ui — Inter: The quick brown fox jumps over the lazy dog

--f-mono — JetBrains Mono: const x = 42;

--f-disp — Cormorant Garamond: Elegant Display

LLM Cheatsheet