150 lines
6.9 KiB
Markdown
150 lines
6.9 KiB
Markdown
---
|
|
name: Industrial Precision
|
|
colors:
|
|
surface: '#131313'
|
|
surface-dim: '#131313'
|
|
surface-bright: '#3a3939'
|
|
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: '#ddc1af'
|
|
inverse-surface: '#e5e2e1'
|
|
inverse-on-surface: '#313030'
|
|
outline: '#a48c7c'
|
|
outline-variant: '#564335'
|
|
surface-tint: '#ffb781'
|
|
primary: '#ffb781'
|
|
on-primary: '#4e2600'
|
|
primary-container: '#f58618'
|
|
on-primary-container: '#5b2d00'
|
|
inverse-primary: '#924c00'
|
|
secondary: '#c8c6c5'
|
|
on-secondary: '#303030'
|
|
secondary-container: '#474746'
|
|
on-secondary-container: '#b7b5b4'
|
|
tertiary: '#00e639'
|
|
on-tertiary: '#003907'
|
|
tertiary-container: '#00bd2d'
|
|
on-tertiary-container: '#00440a'
|
|
error: '#ffb4ab'
|
|
on-error: '#690005'
|
|
error-container: '#93000a'
|
|
on-error-container: '#ffdad6'
|
|
primary-fixed: '#ffdcc4'
|
|
primary-fixed-dim: '#ffb781'
|
|
on-primary-fixed: '#2f1400'
|
|
on-primary-fixed-variant: '#6f3800'
|
|
secondary-fixed: '#e5e2e1'
|
|
secondary-fixed-dim: '#c8c6c5'
|
|
on-secondary-fixed: '#1b1c1c'
|
|
on-secondary-fixed-variant: '#474746'
|
|
tertiary-fixed: '#72ff70'
|
|
tertiary-fixed-dim: '#00e639'
|
|
on-tertiary-fixed: '#002203'
|
|
on-tertiary-fixed-variant: '#00530e'
|
|
background: '#131313'
|
|
on-background: '#e5e2e1'
|
|
surface-variant: '#353534'
|
|
typography:
|
|
headline-lg:
|
|
fontFamily: Space Grotesk
|
|
fontSize: 48px
|
|
fontWeight: '700'
|
|
lineHeight: '1.1'
|
|
letterSpacing: -0.02em
|
|
headline-md:
|
|
fontFamily: Space Grotesk
|
|
fontSize: 32px
|
|
fontWeight: '600'
|
|
lineHeight: '1.2'
|
|
letterSpacing: -0.01em
|
|
headline-sm:
|
|
fontFamily: Space Grotesk
|
|
fontSize: 24px
|
|
fontWeight: '600'
|
|
lineHeight: '1.2'
|
|
body-lg:
|
|
fontFamily: Space Grotesk
|
|
fontSize: 18px
|
|
fontWeight: '400'
|
|
lineHeight: '1.5'
|
|
body-md:
|
|
fontFamily: Space Grotesk
|
|
fontSize: 16px
|
|
fontWeight: '400'
|
|
lineHeight: '1.5'
|
|
label-md:
|
|
fontFamily: Space Grotesk
|
|
fontSize: 14px
|
|
fontWeight: '500'
|
|
lineHeight: '1'
|
|
letterSpacing: 0.05em
|
|
mono-data:
|
|
fontFamily: Space Grotesk
|
|
fontSize: 14px
|
|
fontWeight: '700'
|
|
lineHeight: '1'
|
|
letterSpacing: 0.02em
|
|
spacing:
|
|
unit: 4px
|
|
gutter: 16px
|
|
margin: 32px
|
|
container-gap: 24px
|
|
stack-sm: 8px
|
|
stack-md: 16px
|
|
---
|
|
|
|
## Brand & Style
|
|
|
|
This design system is engineered for the high-stakes environment of a datacenter, where speed of comprehension and operational uptime are paramount. The brand personality is technical, authoritative, and unapologetically utilitarian. It draws heavily from **Minimalist Industrialism** and **Brutalism**, stripping away decorative flourishes in favor of structural clarity and high-contrast signaling.
|
|
|
|
The emotional response is one of controlled intensity—evoking the feeling of a high-end command center. It prioritizes "glanceability," ensuring that critical status changes are immediately perceptible against a void-like backdrop. The aesthetic mimics physical hardware interfaces: rack-mounted servers, heavy-duty machinery, and tactical displays.
|
|
|
|
## Colors
|
|
|
|
The palette is anchored by a deep charcoal and true black foundation to minimize eye strain in low-light environments and maximize contrast.
|
|
|
|
- **Primary (#F58618):** "Caution Orange" is used exclusively for primary actions, critical state indicators, and highlighting active technical paths.
|
|
- **Surface Palette:** Backgrounds utilize a tiered black system: `#0A0A0A` for the base, `#121212` for containers, and `#1A1A1A` for hover states.
|
|
- **Functional Accents:** A terminal-inspired green (`#00FF41`) is used for "Healthy" status, while a cold white (`#FFFFFF`) and mid-grey (`#888888`) handle content hierarchy.
|
|
- **Contrast:** Maintain a minimum 7:1 contrast ratio for all status-critical text against the dark backgrounds.
|
|
|
|
## Typography
|
|
|
|
The typography utilizes **Space Grotesk** across all levels to maintain a technical, geometric rigour. Its idiosyncratic letterforms provide a futuristic "code-like" feel while remaining highly legible at small sizes.
|
|
|
|
- **Headlines:** Use tight tracking and heavy weights to create a sense of structural density.
|
|
- **Labels:** Small caps or all-caps are preferred for metadata and technical specs to differentiate them from prose.
|
|
- **Numeric Data:** Ensure tabular figures are used for metrics, alignment of IP addresses, and throughput values to facilitate easy vertical scanning of logs and tables.
|
|
|
|
## Layout & Spacing
|
|
|
|
This design system employs a **fixed grid** model for primary dashboards to ensure telemetry data remains in a predictable location. A 12-column system is used for high-level layouts, but interior modules utilize a strict 4px baseline grid.
|
|
|
|
Spacing is compressed to increase information density, reflecting the "glass cockpit" philosophy where more data is preferable to excessive whitespace. Use heavy 24px-32px margins for the primary viewport to frame the content, but keep internal component padding tight (8px-12px) to maximize screen real estate for logs and graphs.
|
|
|
|
## Elevation & Depth
|
|
|
|
Depth is conveyed through **Bold Borders** and **Tonal Layers** rather than shadows. In a datacenter environment, shadows can muddy the interface; instead, we use high-contrast outlines to define hierarchy.
|
|
|
|
- **Level 0 (Base):** `#0A0A0A`
|
|
- **Level 1 (Cards/Panels):** `#121212` with a 1px solid border of `#222222`.
|
|
- **Level 2 (Modals/Popovers):** `#1A1A1A` with a 2px solid border of the Primary Orange or a high-visibility grey.
|
|
- **Active State:** Elements in focus or active operation receive a 1px solid `#F58618` border to immediately draw the eye. No blurs or gradients are permitted.
|
|
|
|
## Shapes
|
|
|
|
The shape language is strictly **Sharp (0px)**. 90-degree angles reinforce the industrial, hardware-centric aesthetic. This lack of rounding suggests precision and eliminates the "friendly" softness typical of consumer SaaS. Every button, input, and container must maintain a hard edge to align with the rigid grid of a server rack.
|
|
|
|
## Components
|
|
|
|
- **Buttons:** Rectangular with no radius. Primary buttons are solid `#F58618` with black text. Secondary buttons are transparent with a 1px white or grey border.
|
|
- **Input Fields:** Darker than the container background (`#000000`). Use a bottom-only border or a full 1px border that changes to the primary orange on focus.
|
|
- **Status Chips:** High-contrast blocks. "Success" is a solid green block with black text; "Alert" is a solid orange block. No rounded corners.
|
|
- **Data Tables:** Zebra-striping is prohibited. Use 1px horizontal dividers only. Header cells must be all-caps Space Grotesk with a subtle background tint.
|
|
- **Telemetry Charts:** Lines should be 2px thick with no smoothing (stair-step/linear interpolation only) to represent raw data accuracy.
|
|
- **Log Viewers:** Use the `mono-data` type style. Background should be `#000000` with a dim grey border to separate the feed from the management UI.
|