Skip to content

DESIGN.md

Latest commit

 

History

History
197 lines (165 loc) · 7.64 KB

DESIGN.md

File metadata and controls

197 lines (165 loc) · 7.64 KB
Raw
name Steel & Orchid
colors
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
#f8f9fe
#d9dade
#f8f9fe
#ffffff
#f2f3f8
#edeef2
#e7e8ec
#e1e2e7
#191c1f
#41474f
#2e3134
#eff0f5
#717880
#c1c7d0
#206393
#1c6090
#ffffff
#3c79ab
#fdfcff
#96ccff
#735664
#ffffff
#fed8e9
#795c6a
#7d5400
#ffffff
#9a6c17
#fffbff
#ba1a1a
#ffffff
#ffdad6
#93000a
#cee5ff
#96ccff
#001d32
#004a75
#fed8e9
#e1bdcd
#2a1520
#593f4c
#ffddb0
#f6bc62
#281800
#614000
#f8f9fe
#191c1f
#e1e2e7
typography
display-lg display-md headline-lg headline-md body-lg body-md body-sm label-lg label-md
fontFamily fontSize fontWeight lineHeight letterSpacing
Manrope
48px
800
1.1
-0.02em
fontFamily fontSize fontWeight lineHeight letterSpacing
Manrope
36px
700
1.2
-0.015em
fontFamily fontSize fontWeight lineHeight
Manrope
28px
700
1.3
fontFamily fontSize fontWeight lineHeight
Manrope
22px
600
1.4
fontFamily fontSize fontWeight lineHeight
Manrope
18px
400
1.6
fontFamily fontSize fontWeight lineHeight
Manrope
16px
400
1.6
fontFamily fontSize fontWeight lineHeight
Manrope
14px
400
1.5
fontFamily fontSize fontWeight lineHeight letterSpacing
Manrope
14px
600
1.2
0.05em
fontFamily fontSize fontWeight lineHeight
Manrope
12px
600
1.2
rounded
sm DEFAULT md lg xl full
0.25rem
0.5rem
0.75rem
1rem
1.5rem
9999px
spacing
unit xs sm md lg xl gutter margin container-max
4px
0.5rem
1rem
1.5rem
2.5rem
4rem
1.5rem
2rem
1280px

Brand & Style

This design system embodies the "Expert Generalist" persona: a blend of analytical rigor and empathetic adaptability. The aesthetic is categorized as Corporate / Modern with a distinct Minimalist influence, prioritizing clarity and high-fidelity spacing over decorative elements.

The personality is professional yet approachable, utilizing the stability of Steel Blue to anchor the user experience while employing soft pink accents to introduce warmth and contemporary flair. The UI should evoke a sense of calm efficiency, feeling expansive and meticulously organized. Surfaces are treated with subtle tints to avoid the starkness of pure white, creating a more sophisticated, multi-dimensional environment.

Colors

The color strategy utilizes Steel Blue (oklch 60% 0.12 250) as the primary functional color for actions, navigation, and structural emphasis. To balance the coolness of the blue, Soft Pink (oklch 88% 0.06 340) serves as the secondary and accent color, used for high-interest highlights and soft visual breaks.

Backgrounds should rarely be pure white. Instead, use the surface tints to differentiate content areas:

  • Main App Background: surface-neutral
  • Sidebars/Navigation: surface-tint-blue
  • Special Callouts/Cards: surface-tint-pink

Success states are intentionally mapped to higher-chroma light pink tones to maintain the "Expert Generalist" aesthetic, diverging from traditional green to create a unique, branded feedback loop.

Typography

This design system uses Manrope exclusively to maintain a modern, balanced, and trustworthy appearance. As a variable font, Manrope allows for precise weight adjustments to ensure legibility across different background tints.

  • Headlines: Use tighter letter spacing and heavier weights (700-800) to create a strong visual anchor.
  • Body Text: Use body-md for standard reading experiences, ensuring ample line height (1.6) for better comprehension.
  • Labels: Utilize label-lg with uppercase styling and increased tracking for metadata, categories, and small headers within cards.

Layout & Spacing

The layout philosophy follows a fixed-grid model for desktop, centered within a max-width container of 1280px. This ensures that content remains readable and focused. For smaller viewports, the system transitions to a fluid model with a 12-column grid.

Spacing follows an 8pt rhythmic scale, but with a "high-fidelity" approach—meaning generous margins and padding are preferred to prevent density fatigue.

  • Use lg (2.5rem) spacing between major sections.
  • Use md (1.5rem) for internal card padding.
  • Horizontal alignment is critical; ensure text and icons are strictly aligned to the left edge of the grid columns to project precision.

Elevation & Depth

To maintain the clean, professional look, depth is communicated through Tonal Layers and Ambient Shadows rather than heavy borders.

  • Level 0 (Base): surface-neutral or surface-tint-blue.
  • Level 1 (Cards/Floating Elements): Use a white background with an extremely soft, tinted shadow: 0 4px 20px oklch(30% 0.04 250 / 0.06). This creates a subtle lift without feeling "heavy."
  • Level 2 (Modals/Dropdowns): Increase shadow spread and slightly increase opacity: 0 12px 40px oklch(30% 0.04 250 / 0.1).
  • Interaction: On hover, cards should transition from Level 1 to a slightly more pronounced shadow and a 2px upward translation to provide tactile feedback.

Shapes

The "Expert Generalist" identity is reinforced through Rounded shapes (0.5rem base radius). This specific level of roundedness strikes the balance between the clinical precision of sharp corners and the overly casual nature of pill shapes.

  • Small Components (Checkboxes, Tags): Use rounded-sm (0.25rem).
  • Standard Components (Buttons, Inputs, Cards): Use rounded-md (0.5rem).
  • Large Components (Modals, Feature Sections): Use rounded-lg (1rem).
  • Icons: Icons should utilize a consistent stroke weight (1.5px to 2px) with slightly rounded terminals to match the typography and container shapes.

Components

Buttons

  • Primary: Solid Steel Blue (primary-base) with white text. High-fidelity padding: 12px 24px.
  • Secondary: Soft Pink (accent-base) with Steel Blue text. Used for supporting actions.
  • Ghost: Transparent background with Steel Blue text and a 1px border of oklch(60% 0.12 250 / 0.2).

Input Fields

  • Background: White.
  • Border: 1px solid oklch(55% 0.03 250 / 0.2).
  • Focus State: 2px solid Steel Blue with a subtle Soft Pink outer glow.

Chips & Tags

  • Use the surface-tint-pink for the background and primary-dark for the text. This highlights the "generalist" versatility of the system.

Cards

  • Standard cards use Level 1 elevation. For "Success" or "Status" cards, use a 4px left-side border in Soft Pink to denote state without overwhelming the design.

Navigation

  • Sidebar navigation should use surface-tint-blue. Active states are indicated by a Steel Blue vertical bar on the left and a Soft Pink background tint on the item itself.