Preview image. Unlock full-res
Minimal dark cockpit. Clean contrast of white text on deep gray surfaces, punctuated by a vivid orange accent.
This design system evokes a refined, understated dark mode, like a well-crafted instrument panel in a high-end vehicle. Its strength lies in a stark contrast between near-black surfaces and bright white typography, creating immediate clarity. A single, vibrant orange serves as the primary accent, drawing attention only to key interactive elements. The system feels direct and functional, prioritizing information hierarchy and calls to action over decorative flourishes.
Maintain a clear visual hierarchy by limiting prominent chromatic colors to the Action Orange (#ff4700) for primary CTAs.
Utilize Bright White (#ffffff) text for primary content and Subtle Gray (#cccccc) for secondary, ensuring high readability on dark backgrounds.
Apply Helvetica Neue universally, leveraging its differing weights (e.g., 700 for display, 400 for body) to establish content importance.
Employ sectionGap of 80px between main content blocks to maintain a spacious, uncluttered flow.
Use 4px border radius for all actionable buttons to provide subtle rounding without compromising precision.
Apply padding of 0px top, 24px right, 1px bottom, 24px left for all buttons, maintaining a consistent minimalist vertical spacing.
Use a 9999px border radius for tags and prominent notifications like 'Cron is now Notion Calendar' to create distinct pill shapes.
Do not introduce additional vivid chromatic colors beyond the established Action Orange (#ff4700) to maintain focus.
Avoid using box shadows that introduce strong light colors or blur, as the system relies on flat, high-contrast surfaces augmented by subtle amber tints.
Do not create extensive text blocks using Helvetica Neue at sizes larger than 22px; large text is reserved for display headlines.
Avoid generic button styles; every button should either be Primary Call-to-Action (Action Orange) or Secondary (Deep Graphite).
Do not vary elementGap from 16px unless explicitly for full-bleed section alignment or dense content blocks.
Do not use overly complex or illustrative imagery; prefer UI screenshots or abstract graphics to align with the functional aesthetic.
