Preview image. Unlock full-res
Nocturnal Data Canvas — a dark, subdued interface punctuated by bursts of algorithmic color.
This design system conjures the atmosphere of a nocturnal command center where raw data meets sophisticated presentation. A muted, dark palette forms the foundational experience, making the vibrant, playful accent colors in the hero element feel like unexpected, dynamic data visualizations. Typography is deliberately restrained, using custom fonts to establish an identity of quiet competence, preventing the busy hero graphic from overwhelming the content.
Use Midnight Base (#0c0c0c) for global page backgrounds.
Apply Ghost Text (#f2f2f3) for primary text on dark backgrounds to ensure AAA contrast.
Maintain a default border-radius of 16px for general containers and 24px for most buttons.
Employ Replica-Regular with an explicit -0.014em letter spacing for all body and most heading text.
Prioritize 90px vertical spacing to separate main content sections.
Use Slate Accent (#383a42) for interactive elements like buttons, reserving Indigo Button (#384270) for active states or primary calls to action.
Avoid using highly saturated colors for large backgrounds; they are reserved for the hero graphic's abstract shapes.
Do not deviate from the specified letter-spacing: -0.014em for Replica-Regular text, as it's a core typographic signature.
Don't clutter layouts; maintain 4px as the smallest element gap for tight alignment.
Do not introduce system fonts for primary text roles, Replica-Regular is integral to the brand identity.
Avoid generic shadows; depth is primarily achieved through subtle background color shifts from Midnight Base to Charcoal Surface.
