Skip to main content

​
Register

WorldFlux has one shared visual register across brand and product surfaces: a dark technical control plane with quiet depth. The dashboard should feel dense and precise; login and public evidence pages can be more spacious, but they still use the same token set.
SurfaceVoice
Landing, login, public share, 404Centered display type, restrained glow, translucent hero panels, decisive CTA.
Dashboard, settings, run detailCompact tables, glassy panels, subtle borders, status colors only inside product data.

​
Colors

TokenHex / ValueRole
--midnight-abyss#05060fPage canvas and deepest surfaces.
--ghost-white#ffffffPrimary text and icon fill.
--comet#d8ecf8Body text and prominent readable copy.
--arctic-mist#d1e4faSecondary text and outline button text.
--celestial-light#b6d9fcFocus rings, highlights, and selected affordances.
--whisper-blue#9da7baMuted body text and placeholders.
--interstellar-gray#81899bCaptions and faint metadata.
--neon-violet#663af3Critical CTAs and selected product identity.
--graphite-railrgba(186, 215, 247, 0.12)Hairline borders and subtle dividers.

​
Status Palette

Reserved for product data. Never use these as section backgrounds.
TokenHexMeaning
--ok#22c55eRun succeeded.
--info#70b8ffRun in progress.
--warn#ffca16Quota or warning state.
--danger#ff5577Run failed or destructive state.
--click#c084fcSecondary product-data accent.
--brand#663af3Product identity / selected metadata.

​
Type

FamilyWhereRuntime substitute
Untitled SansBody, nav, buttons, forms, tablesInter
aeonikProDisplay headings and hero copySpace Grotesk
dotDigitalTechnical captions and numeric labelsIBM Plex Mono
Display headings use normal tracking. Body and compact UI text may use subtle negative tracking.

​
Scale

TokenSizeWhere
--fs-2xs12pxCaptions and micro labels.
--fs-sm14pxButtons and compact UI rows.
--fs-base16pxBody.
--fs-md18pxLead body and subheads.
--fs-xl24pxSection labels and card headings.
--fs-2xl28pxLarge section heading.
--fs-3xl44pxDisplay.
--fs-hero48pxLargest display.

​
Geometry

ElementRadius
Buttons / icon controls999px
Inputs2px-4px
Badges6px
Cards / containers12px-16px

​
Surfaces

Cards are translucent and use inset blue-gray lighting rather than generic shadows. 
.sb-card {
  border: 1px solid var(--graphite-rail);
  border-radius: 16px;
  background: rgba(186, 214, 247, 0.03);
  box-shadow: var(--shadow-subtle);
}
.sb-card-lift is reserved for login, onboarding, and hero panels that need stronger depth.

​
Tailwind v4 Tokens

The web app defines WorldFlux dashboard tokens in web/app/globals.css using Tailwind v4’s @theme directive. Color, font, text, leading, tracking, spacing, radius, and shadow namespaces are exposed as first-class Tailwind utilities and runtime CSS variables. Important namespaces:
  • --color-*: bg-midnight-abyss, text-comet, border-graphite-rail.
  • --font-*: font-untitled-sans, font-aeonikpro, font-dotdigital.
  • --text-*: text-body, text-heading, text-display-xl, with line-height metadata.
  • --leading-* and --tracking-*: explicit typography utilities.
  • --spacing: keeps Tailwind numeric spacing at a 4px base, so p-4 remains 16px.
  • --spacing-element-gap, --spacing-card-padding, --spacing-section-gap: semantic spacing utilities.
  • --radius-*: pill, card, badge, and input radii.
  • --shadow-*: WorldFlux glow and inset-surface elevations.

​
Buttons

VariantWhenLook
sb-button-primaryCritical action.Neon Violet fill, white text, pill shape.
sb-button-pillPrimary non-critical action.Translucent fill, white text, subtle border.
sb-button-outlineSecondary structure.Transparent, Arctic Mist text, subtle border.
sb-button-ghostQuiet inline action.Transparent, text-forward.
sb-button-dangerDestructive action.Danger border/text.
Use #663af3 sparingly. It should draw the eye only when the action is genuinely important.

​
Layout

  • Base spacing unit: 4px.
  • Element gap: about 8px.
  • Card padding: about 24px.
  • Section gap: about 48px.
  • Page max-width: about 1200px for product surfaces.

​
Motion

Hover and press states are quick: 150ms-200ms with cubic-bezier(0.25, 1, 0.5, 1). prefers-reduced-motion: reduce short-circuits animation.

​
Anti-Patterns

  • Broad saturated gradients.
  • Generic drop-shadow stacks.
  • Extra accent colors outside product data.
  • Flat opaque cards where a translucent surface is expected.
  • Display headings with negative tracking.
  • Using violet for decoration instead of decisive action.
See web/design/app.worldflux.ai/DESIGN.md for the persisted WorldFlux dashboard reference and local token mapping.