Primary lockup
This is the clearest expression of the brand. Use it for hero moments, overview sections, marketing headers, and any place where the typography needs to read immediately.
Flux Atlas • Design system
Worldbuilding in motion.
A design system for a world-building app that tracks places, factions, events, and change over time. It should feel structured, atmospheric, and easy to read without drifting into generic fantasy or loud sci‑fi.
Primary action
Secondary action
Primary dark lockup framed on a quiet light plate.
Orb-led support mark for darker product moments and utility contexts.
Visual theme & atmosphere
Logo system and brand expression
The mark should feel engineered but alive. The orbital symbol and letterforms suggest movement, mapping, and tracked change across worlds, timelines, and systems.
Use the full lockup when recognition matters. Use the orb-led mark in tighter spaces or darker, more atmospheric contexts.
Orb variants
Keep supporting marks consistent across dark and light surfaces. Use the orange orb only when the interface needs a deliberate point of emphasis.
Primary supporting mark for darker product surfaces, navigation, and ambient UI.
Use the same core mark on light panels and framed contexts where contrast stays controlled.
Accent variant for featured moments, active states, or directional emphasis.
Light-surface lockup
Use the darker lockup on restrained light surfaces, framed callouts, or documents where the logo should feel stable and grounded.
Supporting marks
Orb mark on dark
Orb mark on light
Use supporting marks for avatars, sidebars, splash states, and tighter layouts where the full wordmark would feel crowded.
Color palette & roles
Palette and contrast
Deep teals establish the environment, orange signals change or action, and stone offers visual rest. Use orange deliberately so it guides attention rather than overwhelming the interface.
Check colors in actual lockups and interface surfaces, not as isolated swatches. These examples show how contrast and emphasis should behave in context.
Reference palette
Use the lockups to judge whether the palette feels integrated with the identity before applying it to UI components.
Deep Teal
#1a3637Primary brand anchor for interfaces, hero zones, and high-confidence surfaces.
Slate Teal
#719196Secondary brand color for panels, tags, hover states, and softer information layers.
Signal Orange
#ff9248Reserve for emphasis. It should guide the eye, not dominate the whole composition.
Soft Stone
#adaaa1Quiet neutral used for light contexts, outlines, and moments that need visual rest.
Typography rules
Hierarchy for long-form worldbuilding
Cal Sans handles decisive moments such as headings and section labels. Lexend supports sustained reading across lore entries, interface text, and documentation.
Keep headings short and bold. Use Lexend for paragraphs, buttons, cards, and longer explanatory text.
Header system
Cal Sans headlines stay broad, stable, and readable.
Display64–88 / 0.96 / Cal Sans
Section44–56 / 0.98 / Cal Sans
Body system
Lexend is for sustained reading across lore entries, cards, UI labels, and longer product explanations. It should stay easy to scan without feeling clinical.
Body17–18 / 1.7 / Lexend
Caption14–15 / 1.5 / Lexend
Component stylings
Atmospheric UI with readable priority
Use dark, lightly frosted surfaces with restrained borders and clear emphasis. Components should feel stable enough for dense information while still suggesting living systems and change.
Favor hierarchy over decoration. Keep buttons purposeful, surfaces quiet, and tags supportive of scanning.
Buttons
Primary buttons carry orange. Secondary actions stay quiet with low-contrast fills and thin outlines.
Surfaces
Surfaces should feel slightly frosted, not glossy. Borders and blur do the work that heavier shadows normally would.
Tags and labels
Use rounded chips for status, categories, and world attributes. They should support scanning without stealing attention.
Volatile
Stable
Procedural
Active change
Passive system