Getting Started

Theming

Pick a Feel, choose an accent, and export a CSS file you commit. Every component on this site reads from the same tokens — what you preview is what you ship.

Live editor

Switch the Feel — Modern, Modern Dark, Editorial, Playful, Stark, Clinical — and watch every page on this site re-tune. Pick an accent. When you like it, copy the CSS.

Accent

Like what you made? Share it as a URL — anyone who opens the link sees the entire site in your theme.

Export

The block below reflects the current state. Copy it into app/styles/theme.css.

theme.css

:root {
  --ds-paper: #000000;
  --ds-paper-deep: #0a0a0f;
  --ds-ink: #f6f7fb;
  --ds-ink-soft: #b8bdcd;
  --ds-muted: #6b7186;
  --ds-line: #15161d;
  --ds-radius: 12px;
  --ds-duration: 180ms;
  --ds-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-shadow: none;
  --ds-font-serif: Inter, ui-sans-serif, system-ui, "Helvetica Neue", Arial;
  --ds-font-sans: Inter, ui-sans-serif, system-ui, "Helvetica Neue", Arial;
  --ds-letter-spacing: -0.02em;
  --ds-button-radius: 10px;
  --ds-field-radius: 10px;
  --ds-accent: #6d4cf2;
  --ds-accent-ink: #ffffff;
}

Apply

Import it once at the top of your global stylesheet:

app/globals.css

@import "tailwindcss";
@import "./styles/theme.css";

Token reference

Token	Purpose
--ds-paper	Page background.
--ds-paper-deep	Recessed surfaces (sidebars, code blocks).
--ds-ink	Primary text.
--ds-ink-soft	Secondary text and labels.
--ds-muted	Tertiary text, hints, captions.
--ds-line	Borders and dividers.
--ds-accent	Brand accent — buttons, focus rings, highlights.
--ds-accent-ink	Text on accent backgrounds (auto-contrast).
--ds-radius	Default surface radius.
--ds-button-radius	Button-specific radius (Feels override this).
--ds-field-radius	Input/textarea radius.
--ds-duration	Default transition duration.
--ds-easing	Default transition curve.
--ds-shadow	Surface shadow language.