uhryniuk
95a88fa383
list_design_systems reveals 3 distinct design systems in this Stitch project. The one requested (asset e73325c5365a4a56b93823236777e95a, screen ID asset-stub-assets_e73325c5365a4a56b93823236777e95a) is 'Modern Professional Dark' -- charcoal/navy, Professional Blue primary, Inter throughout, 8px rounding, tonal-layer depth with glow accents. The earlier commit incorrectly saved get_project's top-level designTheme (the neon-green 'Rippr' HUD system) as design-system.md and called the export summary's description of a blue theme 'stale.' It wasn't -- confirmed by hex-matching every color in the downloaded screen HTML against the two candidate systems: all match Modern Professional Dark (#0a0a0c, #131313, #16161a, #4090fe...) exactly, none match the neon system. Renamed the neon file to design-system-rippr-neon.md (kept for reference, flagged as unused by these screens) and added the correct file.
6.5 KiB
6.5 KiB
name, colors, typography, rounded, spacing
| name | colors | typography | rounded | spacing | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Modern Professional Dark |
|
|
|
|
Brand & Style
This design system embodies a Corporate / Modern aesthetic reimagined for a premium dark-mode experience. The brand personality is authoritative, precise, and sophisticated. By shifting to a deep charcoal and navy foundation, the UI evokes a sense of focused calm and high-end engineering.
The visual style leverages subtle luminescence and high-contrast accents to guide the user's eye, moving away from traditional light surfaces to a more immersive, "command-center" feel. It is tailored for professional environments where clarity and reduced eye strain are paramount.
Colors
The palette is anchored by a Deep Dark Gray (#0a0a0c) background to provide a true premium feel without the harshness of pure black.
- Primary: The Professional Blue (#1978e5) is the soul of the interface, used for key actions and brand presence.
- Secondary: A muted Slate Blue (#465f88) handles auxiliary UI elements and decorative accents.
- Surface Strategy: We use a "stepped" dark palette. The base is the darkest, while interactive containers or cards use a slightly lighter gray (#16161a) to create perceived depth.
- Contrast: All functional text is kept at a high luminance (Off-white to Pure White) to ensure AAA accessibility standards against the dark backdrop.
Typography
This design system relies exclusively on Inter to maintain a systematic, utilitarian, and clean appearance.
- Weight & Scale: Headlines utilize tighter letter spacing and heavier weights to command attention against the dark background.
- Readability: Body text uses a generous line-height to prevent "halation"—where light text on dark backgrounds appears to bleed or blur.
- Labels: Small labels use all-caps or increased letter-spacing to maintain legibility at micro-scales.
Layout & Spacing
The design system employs a Fixed Grid philosophy for desktop to maintain structural integrity, transitioning to a fluid model for smaller screens.
- Grid: A 12-column grid is used for desktop (1280px max-width) with 24px gutters.
- Rhythm: An 8px spatial system governs all padding and margins, ensuring a predictable and professional vertical rhythm.
- Breakpoints:
- Mobile: < 600px (4 columns, 16px margins)
- Tablet: 600px - 1024px (8 columns, 24px margins)
- Desktop: > 1024px (12 columns, 32px margins)
Elevation & Depth
In dark mode, shadows are less effective. Instead, this design system uses Tonal Layers and Low-Contrast Outlines.
- Elevation Levels: Higher elevation is communicated by lighter surface colors. A "floating" modal will have a lighter hex than the background.
- Borders: Subtle 1px borders (#2d3037) are used to define boundaries where tonal shifts are too subtle.
- Glow: Highly elevated elements (like active primary buttons) may use a soft blue outer glow rather than a black shadow to emphasize their importance.
Shapes
The shape language is defined as Rounded (Level 2), striking a balance between the rigidity of corporate software and the approachability of modern SaaS.
- Small Components: Buttons and inputs use a 0.5rem (8px) radius.
- Large Containers: Cards and modals use a 1rem (16px) radius to soften the layout and create clear content groupings.
Components
- Buttons: Primary buttons are solid Professional Blue with white text. Secondary buttons use a ghost style with a subtle white border and no fill.
- Input Fields: Backgrounds should be slightly darker or lighter than the container surface, with a 1px border that glows Professional Blue on focus.
- Cards: Cards use a #16161a background with a very subtle 1px border (#ffffff10) to separate them from the main background.
- Chips: Used for metadata, chips feature a desaturated secondary blue-grey background with high-contrast labels.
- Lists: Items are separated by hair-line dividers (#ffffff08) to maintain a clean vertical scan-path.