Skip to content

DESIGN.md

Latest commit

 

History

History
143 lines (130 loc) · 6.26 KB

DESIGN.md

File metadata and controls

143 lines (130 loc) · 6.26 KB
Raw
name Technical Precision Light
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
#fbf8fe
#dbd9de
#fbf8fe
#ffffff
#f5f2f8
#efedf2
#eae7ec
#e4e1e7
#1b1b1f
#45464f
#303034
#f2f0f5
#767680
#c6c5d1
#505b92
#000110
#ffffff
#0a174c
#7681bb
#b9c3ff
#003ec6
#ffffff
#0052fe
#dfe3ff
#060100
#ffffff
#390e00
#b97358
#ba1a1a
#ffffff
#ffdad6
#93000a
#dde1ff
#b9c3ff
#09164b
#384379
#dde1ff
#b7c4ff
#001452
#0038b6
#ffdbce
#ffb59a
#380d00
#6f3721
#fbf8fe
#1b1b1f
#e4e1e7
typography
headline-lg headline-md headline-sm body-lg body-md label-md mono-data
fontFamily fontSize fontWeight lineHeight letterSpacing
Hanken Grotesk
32px
700
40px
-0.02em
fontFamily fontSize fontWeight lineHeight letterSpacing
Hanken Grotesk
24px
600
32px
-0.01em
fontFamily fontSize fontWeight lineHeight
Hanken Grotesk
20px
600
28px
fontFamily fontSize fontWeight lineHeight
Geist
16px
400
24px
fontFamily fontSize fontWeight lineHeight
Geist
14px
400
20px
fontFamily fontSize fontWeight lineHeight letterSpacing
Geist
12px
500
16px
0.05em
fontFamily fontSize fontWeight lineHeight
Geist
13px
500
18px
rounded
sm DEFAULT md lg xl full
0.125rem
0.25rem
0.375rem
0.5rem
0.75rem
9999px
spacing
unit gutter margin-mobile margin-desktop sidebar-width
4px
24px
16px
32px
260px

Brand & Style

The brand personality is authoritative, technical, and precise. It targets engineers, analysts, and decision-makers in high-stakes deep-tech environments. The shift to a light mode maintains the professional "Mission Control" feel while increasing legibility and reducing cognitive load during long work sessions.

The design style is Corporate Modern with a Technical Edge. It utilizes high-contrast structural anchors (Navy) against a clinical white workspace. The aesthetic is defined by sharp information density, systematic hierarchy, and a utilitarian approach to data visualization.

Colors

The palette is anchored by the Primary Navy (#0A174C), used exclusively for high-level structural components like the Sidebar and Global Navigation to provide a strong sense of containment.

The Primary Surface (#FFFFFF) serves as the canvas for all data modules. Secondary accents in Action Blue (#0052FF) highlight interactive states and primary call-to-actions. Neutrals are tiered from deep Slate for text to light Greys for borders and secondary containers, ensuring a crisp, high-contrast interface that remains easy on the eyes.

Typography

Typography is split into two functional roles. Hanken Grotesk is used for headlines to provide a sharp, contemporary professional feel. Geist is used for all body text, labels, and data points; its technical, slightly monospaced character ensures that alphanumeric strings (IDs, coordinates, timestamps) are perfectly legible.

For mobile viewports, headline-lg should scale down to 24px to ensure headers do not wrap excessively. Use label-md for metadata and category headers to maintain a disciplined information hierarchy.

Layout & Spacing

The design system employs a Fixed Grid model for large screens, centered on a 12-column layout. The Sidebar is a fixed width of 260px, utilizing the Primary Navy background to separate navigation from the workspace.

Spacing follows a strict 4px base unit. Internal card padding is set to 24px (6 units) to allow complex data sets "room to breathe" against the white background. On mobile, the layout collapses to a single column with 16px side margins, while the top navigation bar persists.

Elevation & Depth

In this light mode system, depth is achieved through Tonal Layering and Low-Contrast Outlines rather than heavy shadows.

  1. Level 0 (Base): #FFFFFF (Pure White)
  2. Level 1 (Cards/Containers): #FFFFFF with a 1px border of #E2E8F0.
  3. Level 2 (Dropdowns/Modals): #FFFFFF with a subtle, highly diffused shadow (0px 8px 24px rgba(0,0,0,0.08)) and a 1px border.

The Sidebar and Top Nav use the high-contrast Navy (#0A174C) to sit "above" the white workspace visually without needing shadows.

Shapes

A Soft (0.25rem) roundedness is applied to buttons, input fields, and small UI widgets to maintain a modern feel without appearing overly "bubbly." Larger containers and data cards use rounded-lg (0.5rem) to subtly soften the technical density of the dashboard. This balance between sharp geometry and slight corner radii reinforces the "professional tool" identity.

Components

  • Buttons: Primary buttons use #0052FF with white text. Secondary buttons use a white fill with a #E2E8F0 border and #0F172A text.
  • Sidebar Items: Background is transparent; Active state uses a subtle navy tint (#16245C) with a left-aligned 4px "Action Blue" indicator.
  • Input Fields: Use #FFFFFF background with #E2E8F0 borders. Focus state shifts border to #0052FF with a 2px outer glow.
  • Data Tables: Header rows use a light tint (#F8FAFC) with uppercase label-md typography. Rows use a 1px bottom border of #F1F5F9.
  • Chips/Status: Use low-saturation backgrounds (e.g., light green for "Active") with high-saturation text to ensure accessibility on the white background.
  • Cards: White surface, 1px #E2E8F0 border, no shadow for standard dashboard modules.