Documentation Index
Fetch the complete documentation index at: https://docs.worldflux.ai/llms.txt
Use this file to discover all available pages before exploring further.
Register
Two registers share one set of tokens.
| Register | Where | Voice |
|---|
| Brand | Landing, login, signup, public share, 404 | Domaine serif at display sizes. One announcement pill above the headline. The terminal panel is the hero illustration. |
| Product | Dashboard interior, settings, run detail | Inter throughout. No serif. Tables, hairline cards, no decoration. The status palette only ever shows up inside data rows. |
Colors
| Token | Hex | Role |
|---|
--void-black | #000000 | Page canvas, card backgrounds. The dominant surface. |
--graphite-rail | #292d30 | 1px component borders. The only divider treatment. |
--smoke | #464a4d | Strong border on hover. |
--frost | #f0f0f0 | The single high-contrast text color. |
--mist | #abafb4 | Secondary UI text. |
--fog | #a1a4a5 | Muted body text. |
--ash | #6c6c6c | Tertiary text, badge labels. |
--electric-blue | #3b9eff | The ring on the primary outlined CTA. The only chromatic action signal. |
--resend-violet | #9281f7 | Code identity, email syntax, brand mark gradient. Stays inside product UI. |
Status palette (six only)
Reserved for product data. Never section backgrounds, never decoration.
| Token | Hex | Meaning |
|---|
--ok (delivered green) | #3ad389 | Run succeeded. |
--info (opened blue) | #70b8ff | Run in progress. |
--warn (complained yellow) | #ffca16 | Quota above 80%. |
--danger (bounced red) | #ff9592 | Run failed. |
--click (clicked lavender) | #baa7ff | Click-tracking events. |
--brand (resend violet) | #9281f7 | Code identity. |
Type
| Family | Where | Weights |
|---|
| Inter | All UI chrome: nav, buttons, tables, forms. | 400, 500, 600 |
| DM Serif Display (Domaine substitute) | Hero headlines on brand surfaces only. | 400 |
| JetBrains Mono (CommitMono substitute) | Code, badge labels, run ids, filenames. | 400, 500 |
Scale
| Token | Size | Where |
|---|
--fs-2xs | 12px | Captions, code labels, mono eyebrows. |
--fs-sm | 14px | Body small, table rows. |
--fs-base | 16px | Body. |
--fs-md | 18px | Subheading. |
--fs-lg | 20px | Card heading. |
--fs-xl | 24px | Section heading. |
--fs-2xl | 40px | Page title. |
--fs-3xl | 56px | Brand-surface heading. |
--fs-hero | 77px | Domaine display. |
Geometry
| Element | Radius |
|---|
| Button (CTA / outline / ghost / danger) | 6px |
| Input | 6px |
| Card | 16px |
| Container (panel, alert) | 12px |
| Tag | 10px |
| Announcement pill | 9999px |
| Status dot | 9999px |
| Variant | When | Look |
|---|
sb-button-primary | The single most-important action on a screen. | Transparent fill, 1px Electric Blue border, white label. |
sb-button-outline | Tertiary structure. | Transparent fill, 1px graphite border. |
sb-button-ghost | Inline secondary action next to a primary. | No fill, no border, frost label. |
sb-button-danger | Destructive. | Transparent fill, 1px bounced-red border. |
sb-button-pill | Header chip (e.g. “Log out”). | Translucent surface, 1px graphite border. |
Cards
.sb-card {
border: 1px solid var(--graphite-rail);
border-radius: 16px;
background: var(--surface-2); /* near-black */
}
.sb-card-lift adds a barely-perceptible top-down gradient on top of .sb-card. Used for hero panels (auth form, onboarding wizard, billing plan).
Layout
- Page max-width: 1200px.
- Section gap: 80–120px.
- Card padding: 28–32px.
- Element gap: 16px.
Motion
Animations are functional. The defaults are 150ms hover, 200ms component transitions, ease curve cubic-bezier(0.25, 1, 0.5, 1). Ease-out, never symmetric. The hero text uses sb-fade-up (8px translate + opacity, 360ms).
prefers-reduced-motion: reduce short-circuits every animation to 0.01ms.
Anti-patterns
- A filled blue or violet button.
- A second saturated decorative color.
- A drop shadow on a card.
- A serif on a UI label.
- A status color used as section background.
- Positive letter-spacing on display text.
