samplez/rippr-flutter-src/docs/design/stitch-export/design-system-modern-professional-dark.md

name, colors, typography, rounded, spacing

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