Design System ​

The nthtime visual language is inspired by Factory.ai -- an achromatic palette with a single burnt-orange accent, monospace body copy, flat surfaces without shadows, and generous negative space. This page documents the system as implemented.

Color System ​

Accent ​

A single chromatic color used with restraint -- active states, badges, links, and selection highlights.

The accent is identical across light and dark themes.

Neutral Scale ​

A 12-stop warm gray scale shared across both themes. The scale has a slight warm undertone (brown/taupe) rather than cool blue-gray.

Base Colors ​

Neither theme uses pure white or pure black. The light base is a warm off-white; the dark base is near-black with minimal blue.

Semantic Colors ​

Domain-specific colors retained from the original system, adjusted to harmonize with the neutral palette:

The orange accent does not overlap with the difficulty-intermediate amber. Orange is reserved for UI chrome; amber is reserved for difficulty badges.

Typography ​

Font Stack ​

Both fonts are loaded via Fontsource (jsDelivr CDN for the docs site, geist npm package for the Next.js app).

Type Scale ​

Eyebrow Pattern ​

A small orange dot (8x8px circle) followed by a Geist Mono 12px uppercase label. Used above section headings.

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-geist-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.24px;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-100, #ef6f2e);
}

Borders and Surfaces ​

No Shadows ​

The design system does not use box-shadow for depth. Visual hierarchy comes from:

1. Background color stepping -- slightly lighter/darker neutrals for nested surfaces
2. Border enclosure -- 1px borders define container boundaries
3. Spacing isolation -- generous margin creates visual separation

Border Patterns ​

Border Radius ​

Buttons ​

Primary (CTA) ​

Inverted foreground/background for maximum contrast. Monospace 12px uppercase text.

Dark:   bg: #FAFAFA   text: inherits   border: transparent   radius: 4px
Light:  bg: #101010   text: inherits   border: transparent   radius: 4px

Secondary (Outline) ​

Dark:   bg: #1F1D1C   text: #EEEEEE   border: transparent   radius: 4px
Light:  bg: #EEEEEE   text: #020202   border: #A49D9A       radius: 4px

Text Link ​

Monospace 12px uppercase, inherits color from context. No underline. Arrow suffix on action links.

Motion ​

Easing ​

A single easing curve for all transitions:

cubic-bezier(0.4, 0, 0.2, 1)

Standard ease-out -- quick start, gentle deceleration.

Durations ​

Hover States ​

• Nav links: Color transition from muted to primary text (200ms)
• Cards: Border-color transition only -- no scale, no shadow
• Buttons: Background-color shift (200ms) -- no scale, no shadow
• Links with arrows: Arrow may shift 2-4px right on hover

Scroll Behavior ​

html {
  scroll-padding-top: 80px;
}

No scroll-behavior: smooth is set. The sticky header is accounted for with scroll-padding.

Implementation Notes ​

CSS Variables ​

The app uses CSS custom properties in global.css with :root and .dark blocks. Colors are defined as HSL channel values (space-separated, without the hsl() wrapper) for Tailwind opacity modifier support:

:root {
  --background: #eeeeee;
  --foreground: #020202;
  --primary: #ef6f2e;
  --border: #b8b3b0;
}

.dark {
  --background: #020202;
  --foreground: #eeeeee;
  --primary: #ef6f2e;
  --border: #3d3a39;
}

Tailwind Config ​

The Tailwind config at apps/web/tailwind.config.js maps CSS variables to Tailwind utility classes:

colors: {
  background: 'hsl(var(--background))',
  foreground: 'hsl(var(--foreground))',
  primary: { DEFAULT: 'hsl(var(--primary))' },
  border: 'hsl(var(--border))',
}

shadcn/ui ​

UI components use shadcn/ui with class-variance-authority (CVA) for variant definitions. Component styles reference the CSS variable tokens, so the entire theme updates when token values change.

Dark Mode ​

Class-based toggle via next-themes with darkMode: ['class'] in Tailwind config. The dark class on <html> swaps all token values. Default theme is dark.