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.
172 lines
6.5 KiB
Markdown
172 lines
6.5 KiB
Markdown
---
|
|
name: Modern Professional Dark
|
|
colors:
|
|
surface: '#131313'
|
|
surface-dim: '#131313'
|
|
surface-bright: '#393939'
|
|
surface-container-lowest: '#0e0e0e'
|
|
surface-container-low: '#1c1b1b'
|
|
surface-container: '#201f1f'
|
|
surface-container-high: '#2a2a2a'
|
|
surface-container-highest: '#353534'
|
|
on-surface: '#e5e2e1'
|
|
on-surface-variant: '#c1c6d5'
|
|
inverse-surface: '#e5e2e1'
|
|
inverse-on-surface: '#313030'
|
|
outline: '#8b919f'
|
|
outline-variant: '#414753'
|
|
surface-tint: '#aac7ff'
|
|
primary: '#aac7ff'
|
|
on-primary: '#002f64'
|
|
primary-container: '#4090fe'
|
|
on-primary-container: '#002958'
|
|
inverse-primary: '#005db8'
|
|
secondary: '#aec7f6'
|
|
on-secondary: '#143057'
|
|
secondary-container: '#2e476f'
|
|
on-secondary-container: '#9db6e4'
|
|
tertiary: '#ffb68c'
|
|
on-tertiary: '#532200'
|
|
tertiary-container: '#e3711f'
|
|
on-tertiary-container: '#481d00'
|
|
error: '#ffb4ab'
|
|
on-error: '#690005'
|
|
error-container: '#93000a'
|
|
on-error-container: '#ffdad6'
|
|
primary-fixed: '#d6e3ff'
|
|
primary-fixed-dim: '#aac7ff'
|
|
on-primary-fixed: '#001b3e'
|
|
on-primary-fixed-variant: '#00458d'
|
|
secondary-fixed: '#d6e3ff'
|
|
secondary-fixed-dim: '#aec7f6'
|
|
on-secondary-fixed: '#001b3d'
|
|
on-secondary-fixed-variant: '#2e476f'
|
|
tertiary-fixed: '#ffdbc9'
|
|
tertiary-fixed-dim: '#ffb68c'
|
|
on-tertiary-fixed: '#321200'
|
|
on-tertiary-fixed-variant: '#763400'
|
|
background: '#131313'
|
|
on-background: '#e5e2e1'
|
|
surface-variant: '#353534'
|
|
surface-main: '#0a0a0c'
|
|
surface-card: '#16161a'
|
|
accent-error: '#ffb4ab'
|
|
on-surface-bright: '#ffffff'
|
|
on-surface-muted: '#9ca3af'
|
|
typography:
|
|
headline-lg:
|
|
fontFamily: Inter
|
|
fontSize: 32px
|
|
fontWeight: '700'
|
|
lineHeight: 40px
|
|
letterSpacing: -0.02em
|
|
headline-lg-mobile:
|
|
fontFamily: Inter
|
|
fontSize: 28px
|
|
fontWeight: '700'
|
|
lineHeight: 36px
|
|
letterSpacing: -0.01em
|
|
headline-md:
|
|
fontFamily: Inter
|
|
fontSize: 24px
|
|
fontWeight: '600'
|
|
lineHeight: 32px
|
|
headline-sm:
|
|
fontFamily: Inter
|
|
fontSize: 20px
|
|
fontWeight: '600'
|
|
lineHeight: 28px
|
|
body-lg:
|
|
fontFamily: Inter
|
|
fontSize: 16px
|
|
fontWeight: '400'
|
|
lineHeight: 24px
|
|
body-md:
|
|
fontFamily: Inter
|
|
fontSize: 14px
|
|
fontWeight: '400'
|
|
lineHeight: 20px
|
|
label-md:
|
|
fontFamily: Inter
|
|
fontSize: 12px
|
|
fontWeight: '500'
|
|
lineHeight: 16px
|
|
letterSpacing: 0.5px
|
|
label-sm:
|
|
fontFamily: Inter
|
|
fontSize: 11px
|
|
fontWeight: '500'
|
|
lineHeight: 16px
|
|
letterSpacing: 0.5px
|
|
rounded:
|
|
sm: 0.25rem
|
|
DEFAULT: 0.5rem
|
|
md: 0.75rem
|
|
lg: 1rem
|
|
xl: 1.5rem
|
|
full: 9999px
|
|
spacing:
|
|
base: 4px
|
|
gutter: 24px
|
|
margin-mobile: 16px
|
|
margin-desktop: 32px
|
|
max-width: 1280px
|
|
---
|
|
|
|
## 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.
|