Design System | NimbleBrain

Colors

Color Tokens

Every color in the system is a CSS custom property on :root.

--bg #FAFAF8

--bg-alt #F5F5F0

--bg-warm #F0EDE6

--bg-dark #0A0A0F

--text #1A1A1A

--text-muted #595959

--text-dim #737373

--text-inverse #E8E8ED

--blue #0055FF

--indigo #3B28CC

--cyan #00D4FF

--success #16803C

--error rgba(239,68,68,0.6)

Typography

Type Families & Scale

--font-display · Literata

The quick brown fox jumps over the lazy dog

--font-body · IBM Plex Sans

The quick brown fox jumps over the lazy dog

--font-label · DM Mono

The quick brown fox jumps over the lazy dog

--font-code · JetBrains Mono

const agent = new DeepAgent({ model: 'claude-4' });

Type Scale

--text-label-sm 10px Design system sample text

--text-label 11px Design system sample text

--text-xs 13px Design system sample text

--text-sm 14px Design system sample text

--text-base 15px Design system sample text

--text-body 16px Design system sample text

--text-lg 18px Design system sample text

--text-xl 20px Design system sample text

--text-2xl 24px Design system sample text

--text-3xl clamp(28px, 3.5vw, 36px) Design system sample text

Spacing

Spacing Scale

Consistent spacing tokens from 2px to 120px.

--space-2xs 2px

--space-xs 4px

--space-sm 8px

--space-md 16px

--space-lg 24px

--space-xl 32px

--space-2xl 48px

--space-3xl 64px

--space-4xl 80px

--space-5xl 120px

Labels

Label Variants

.label Default Label

.label-blue Blue Label

.label-error Error Label

.label-dark Dark Label

.label-indigo Indigo Label

on dark Inverse Label

on dark Cyan Label

on dark Blue on Dark

Buttons

Button Variants

Primary Outline Gradient Ghost →

On Dark Background

Primary Outline Gradient Ghost →

Cards

Card Compositions

Composable card classes. Combine base with modifiers for any variant.

.card

Base Card

The default card with a light border and standard padding. No background override.

.card-xl .card-hover

Interactive Card

Larger padding with hover state. Border turns blue and shadow appears on hover.

.card-warm

Warm Card

Uses the warm off-white background for editorial emphasis.

.card-accent-blue

Blue Accent

Left border accent in brand blue. Good for callouts and highlights.

Dark Variants

.card-dark .card-hover

Dark Card

Dark background card with subtle hover state.

.card-accent-indigo .card-dark

Indigo Accent Dark

Dark card with indigo left border accent.

.card-dashed .card-dark

Dashed Dark

Dashed border variant for placeholder or optional content.

Lists

List Styles

.list-dash

Embedded senior engineers
Production in weeks, not quarters
No slide decks, just shipping

.list-dot

Agent orchestration layer
MCP server management
Git-backed state and config

.list-circle

Kubernetes-native runtime
LLM gateway with routing
Integration manager

Grids

Grid Utilities

.grid-2

Grid cell one

Grid cell two

.grid-3

Cell one

Cell two

Cell three

Components

Astro Components

Production components rendered with sample data.

TLDRBlock

ContentNote

Use ContentNote for editorial asides or supplementary context that should not interrupt the main narrative flow.

Sample FAQ

What is a design token?

A design token is a named value (color, size, font) stored as a CSS custom property. Tokens create a single source of truth so every component stays consistent without hardcoded values.

Why no border-radius?

The NimbleBrain brand is editorial and restrained. Sharp corners signal precision and confidence. Radius is available (--radius-sm, --radius-md) for UI elements that need it, but the default is 0.

Component

How the Design System Works

Four layers, from primitives to pages.

Define tokens

Colors, fonts, spacing, and shadows live in :root as CSS custom properties.

Build utilities

Composable classes (.card, .label, .grid-2) combine tokens into reusable patterns.

Compose components

Astro components import utilities and expose typed props for page authors.

Ship pages

Pages compose components with zero custom CSS. If you are writing the same CSS twice, something is missing from the system.