System
The AUX.ECO design system is a brutalist, terminal-influenced visual language built for technical interfaces. Structure is expressed through borders, typography weight, and spacing contrast — never shadows, gradients, or rounded softness.
Typeface
Two typefaces from the IBM Plex family:
- IBM Plex Sans — Headlines and titles. Proportional sans-serif for readability at larger sizes.
- IBM Plex Mono — Body text, UI labels, navigation, code, and data. Monospaced throughout for the terminal aesthetic.
Scale
| Scale | Size | Use |
|---|---|---|
xs |
10px | Timestamps, metadata, labels |
sm |
12px | UI text, captions, tags |
md |
14px | Body, input values, prose |
lg |
16px | Subheadings, emphasized labels |
xl |
20px | Section headings |
2xl |
24px | Page titles, hero labels |
Weights
- Plex Sans: Thin (100) for display titles, Regular (400), Medium (500), Bold (700)
- Plex Mono: Regular (400), Medium (500), Bold (700)
Uppercase labels use wide tracking (0.08em). Data readouts use wider tracking (0.15em) with tabular numerals.
Color
Warm neutrals with yellow accent. Light and dark modes supported via prefers-color-scheme.
Light
| Role | Value | |
|---|---|---|
| Background | #F5F2EE |
Warm off-white base |
| Surface | #FDFBF8 |
Cards, elevated components |
| Text | #1A1714 |
Near-black warm |
| Text Muted | #6B6360 |
Secondary labels, metadata |
| Accent | #E6C619 |
Primary actions, links |
| Accent Hover | #C9AB0D |
Hover state |
| Accent Subtle | #FAF3D0 |
Tinted backgrounds, badges |
| Border | #C8BFB4 |
Default borders |
| Border Strong | #A09590 |
Emphasis borders, dividers |
Dark
| Role | Value | |
|---|---|---|
| Background | #131110 |
Deep warm black |
| Surface | #1F1C1A |
Cards, elevated |
| Text | #EDE9E3 |
Primary |
| Text Muted | #9E9693 |
Secondary |
| Accent | #F2D838 |
Primary actions, links |
| Accent Hover | #F7E56A |
Hover state |
| Accent Subtle | #2A2500 |
Tinted backgrounds |
| Border | #3A3330 |
Default borders |
| Border Strong | #5A5350 |
Emphasis borders |
Semantic
Success (#2D7A3A / #3DBA52), Warning (#B8860B / #E6AA1A), Error (#C0392B / #E8543F), Highlight (#F4A233) — each with subtle background tint and text variants for both modes.
Spacing
Base-8 scale. Dense by default.
| Token | Value | Use |
|---|---|---|
micro |
2px | Hairline insets, icon-label gaps |
xs |
4px | Tight inline gaps, badge padding |
sm |
8px | Default inner padding (compact) |
md |
16px | Base unit — default component padding |
lg |
32px | Card/panel gaps |
xl |
64px | Layout breathing room |
2xl |
96px | Page-level margins |
Borders & Elevation
- Default: 1px solid
- Strong: 2px solid
- Radius: 2px for inputs/buttons, 4px for cards/panels — nothing larger
- No box-shadow anywhere — depth is expressed through background stepping:
- Ground → Recessed → Raised → Overlay
Motion
- Default: 100ms
- Maximum: 150ms for expand/collapse
- Easing:
cubic-bezier(0.25, 0.1, 0.25, 1.0) - No decorative or looping animation
Layout
- 8px grid unit
- Max content width: 1200px
- Narrow column: 720px
- Gutters: 16px mobile, 32px desktop
Principles
- Reference design tokens — no hardcoded values
- Compact, data-dense layouts — whitespace is used for contrast, not comfort
- Borders and background-color changes for interactive states — not transform or opacity
- Labels: uppercase, wide tracking, small size
- No shadows, gradients, springs, or display fonts
- No rounded corners above 4px
- Prefer text labels over icons