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)