Nico Design System
A framework-agnostic design system emphasizing elegant restraint, dark muted backgrounds, and data treated as visual art.
When to Use
- Data visualizations
- Editorial/magazine layouts
- Portfolio presentations
- Sites where content should feel luminous against darkness
- Anything benefiting from quiet sophistication
Core Philosophy
- Elegant restraint - Complexity emerges from simplicity, not decoration
- Luminous content - Dark backgrounds make content glow
- Desaturation - Muted colors feel refined; rainbows feel cheap
- Information as art - Data is intrinsically beautiful when presented with care
Color Palette
Use these semantic tokens. Translate to the framework's convention (CSS variables, Tailwind config, SCSS variables, etc.).
| Token | Purpose | Reference Value |
|---|---|---|
bg | Primary background | Deep forest green-black (#1a2e1a) |
bg-muted | Secondary surfaces | Lighter forest (#2a3d2a) |
bg-lighter | Tertiary/borders | (#3a4d3a) |
text | Primary text | Warm off-white (#f5f2eb) |
text-muted | Secondary text | Muted tan (#a8a090) |
accent-warm | Warm accent | Desaturated gold (#c4a35a) |
accent-cool | Cool accent | Desaturated teal (#5a8a9a) |
Palette principles:
- Maximum 2-3 colors beyond the neutrals
- Accents should be desaturated (30-45% saturation)
- Warm and cool accents create natural contrast without clashing
- Background darkness should be 85-95% (very dark but not pure black)
Typography
Primary font: Literata or similar refined serif with:
- Optical sizing if available
- Light to regular weights (300-400) for elegance
- Slightly expanded letter-spacing on small text
Secondary font: System sans-serif for UI elements, navigation labels
Type scale principles:
- Large display text: light weight, tight tracking
- Body text: regular weight, comfortable line height (1.6-1.8)
- Labels/navigation: small caps or uppercase with wide letter-spacing (0.1-0.2em)
Visual Motifs
Circular/radial organization:
- Concentric circles for layered information
- Arc diagrams for relationships
- Radial layouts for cyclical data (time, seasons)
- Central focal points with radiating elements
Grid patterns:
- Sparse layouts with generous negative space
- 4-5 column compound grids
- Asymmetric balance over rigid symmetry
Spatial Composition
- Generous padding - Let content breathe
- Vertical rhythm - Consistent spacing scale
- Full-bleed moments - Occasional edge-to-edge elements for drama
- Layered depth - Subtle shadows, overlapping elements
Interaction Patterns
- Hover glow - Subtle luminosity increase on interactive elements
- Opacity transitions - 0.85 → 1.0 on hover
- Progressive disclosure - Reveal details on interaction, not all at once
- Tooltips - Contextual information near cursor
- Transitions - Smooth, 150-200ms duration, ease-out timing
Implementation Notes
When applying this system:
- Start with background - Set the dark foundation first
- Establish type hierarchy - Load fonts, set base styles
- Add content - Let it glow against the darkness
- Layer accents sparingly - One accent color is often enough
- Test contrast - Ensure WCAG AA compliance (4.5:1 for text)
Anti-Patterns
Avoid:
- Bright saturated colors
- Pure black backgrounds (#000)
- Sans-serif as primary font
- Busy patterns or textures
- Multiple accent colors competing
- Harsh borders (prefer subtle shadows or opacity)