Examples

Build your own system with democrito

democrito is a baseline, not a constraint. The token layer is the only branding surface — override CSS custom properties in src/index.css and every component in the system inherits the new identity. No component files touched. Three worked examples below, each starting from npx shadcn@latest add https://democrito.design/r/democrito.json.

The pattern

Every customization follows the same five-step sequence. Steps 1–3 are CSS-only. Steps 4–5 update the AI context files so agents that read CLAUDE.md and DESIGN.md generate on-brand code from the first prompt.

Step	What changes	What stays the same
1 Install	Adds all tokens, components, and config to your project	Zero component files are modified after this step
2 Token overrides	CSS custom properties in src/index.css (`--accent`, surfaces, radius)	Component markup, class names, and Tailwind config
3 Font swap	`--font-display`, `--font-body`, `--font-mono` in `@theme`	All `font-display` / `font-body` / `font-mono` utility usage
4 Update CLAUDE.md	Product name, accent, and AI coding rules for the new context	Architecture rules, naming conventions, verification commands
5 Update DESIGN.md	Brand direction, mood, and visual language for AI agents	Surface hierarchy, 3-font system, monochromatic principle

Example 1 — AI prompt library

Profile: Prompt engineering workspace. Dark-first. Accent: deep violet. Typography: display mono to signal precision. No light theme needed — this tool lives in the terminal mindset.

Install

Pull the full system into a fresh Vite + React project.

bash

npx shadcn@latest add https://democrito.design/r/democrito.json

Token overrides — violet dark

All overrides live in one .dark block inside src/index.css. No component files touched.

css

/* src/index.css — add inside .dark { ... } */
--accent:             263 70% 58%;
--accent-foreground:  0 0% 98%;

/* surfaces — deeper than default to push violet forward */
--background:         263 15% 6%;
--surface:            263 12% 9%;
--card:               263 10% 12%;

/* borders — slightly violet-tinted */
--border:             263 20% 18%;
--input:              263 20% 18%;

/* muted — desaturated violet */
--muted:              263 10% 14%;
--muted-foreground:   263 15% 55%;

Font swap — display mono

Override the three font-family tokens in the @theme block.

css

/* src/index.css — inside @theme { ... } */
--font-display: "JetBrains Mono", ui-monospace, monospace;
--font-body:    "Inter", system-ui, sans-serif;
--font-mono:    "JetBrains Mono", ui-monospace, monospace;

Update CLAUDE.md

Replace the product context block so AI agents generate on-brand code.

markdown

## Product context
This is [prompt-library-name], an AI prompt engineering workspace.

**Theme:** Dark-first. No light toggle needed.
**Accent:** Deep violet — `--accent: 263 70% 58%` in `.dark`.
**Typography:** display + mono both use JetBrains Mono. Body uses Inter.
**Use case:** Dense, keyboard-driven UI. Prompt lists, version diffs,
  token counters, model selector. Everything mono-spaced and precise.

Apply the 3-surface hierarchy: background → surface → card.
Accent appears only on interactive primary actions and active states.

Update DESIGN.md

Give the AI the visual language and taste layer.

markdown

## Brand direction
Violet + dark-first. The UI should feel like a well-configured IDE:
capable, precise, and slightly opaque. Nothing decorative.

**Mood:** latent space, precision, depth. Not playful.
**Color role:** Violet accent surfaces hierarchy — it marks the thing
  you're acting on, not the surrounding system.
**Density:** tight. 4px base unit, compact card padding, no hero sections.
**Motion:** minimal. Transitions only on interactive state changes.
  No entrance animations.

The tool is invisible. The prompts are the product.

Example 2 — Developer observability dashboard

Profile: Real-time metrics and trace viewer. Supports dark and light mode — the on-call engineer switches to light during war-room standups. Accent: electric blue. Dense data tables, sparklines, status badges.

Install

bash

npx shadcn@latest add https://democrito.design/r/democrito.json

Token overrides — electric blue, both themes

Define the accent in both .dark and .light. Surfaces stay near-neutral so charts read cleanly.

css

/* src/index.css — .dark { ... } */
--accent:             217 91% 60%;
--accent-foreground:  0 0% 98%;
--background:         220 14% 6%;
--surface:            220 12% 9%;
--card:               220 10% 12%;
--border:             220 18% 16%;
--muted:              220 10% 13%;
--muted-foreground:   220 12% 52%;

/* src/index.css — .light { ... } */
--accent:             217 91% 50%;
--accent-foreground:  0 0% 100%;
--background:         220 20% 97%;
--surface:            220 15% 94%;
--card:               0 0% 100%;
--border:             220 14% 86%;
--muted:              220 14% 91%;
--muted-foreground:   220 10% 44%;

Font swap — tabular numerics

IBM Plex Mono renders tabular-nums by default — critical for aligned metric columns.

css

/* src/index.css — @theme { ... } */
--font-display: "Inter", system-ui, sans-serif;
--font-body:    "Inter", system-ui, sans-serif;
--font-mono:    "IBM Plex Mono", ui-monospace, monospace;

Update CLAUDE.md

markdown

## Product context
This is [dashboard-name], a developer observability dashboard.

**Theme:** Dark + light. User-toggleable. Default: dark.
**Accent:** Electric blue — `--accent: 217 91% 60%` (dark) / `217 91% 50%` (light).
**Typography:** Inter for display/body. IBM Plex Mono for all metrics, traces,
  timestamps, and code values — tabular-nums critical.
**Use case:** High-density metric grids, trace waterfalls, error rate sparklines,
  status badges, and filterable log tables.

Surface hierarchy is strict: background → surface (sidebar, panels) → card
  (metric tiles, trace rows). Never skip a surface level.
Accent only on primary CTA and active filter chips.
Status colors (`--destructive`, `--warning`, custom `--success`) supplement
  accent — never replace it.

Theme toggle component

Wire the existing dark/light class toggle — no new tokens needed.

tsx

import { Moon, Sun } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useTheme } from "@/hooks/useTheme";

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  const isDark = theme === "dark";

  return (
    <Button
      variant="ghost"
      size="icon"
      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
      onClick={() => setTheme(isDark ? "light" : "dark")}
    >
      {isDark ? (
        <Sun className="h-4 w-4" />
      ) : (
        <Moon className="h-4 w-4" />
      )}
    </Button>
  );
}

Example 3 — Internal AI ops review platform

Profile: Internal tooling for reviewing AI outputs, labeling responses, and managing evaluation queues. Warm dark — amber accent creates urgency without aggression. Used in long review sessions so the warm tones reduce eye strain.

Install

bash

npx shadcn@latest add https://democrito.design/r/democrito.json

Token overrides — amber warm dark

The warm default theme (:root) already leans amber — you only need to reinforce and deepen it.

css

/* src/index.css — override :root (warm default) */
--accent:             38 92% 50%;
--accent-foreground:  20 14% 8%;

/* warm-tinted darks */
--background:         25 12% 6%;
--surface:            25 10% 9%;
--card:               25 8% 12%;

/* borders — warm-tinted */
--border:             30 16% 18%;
--input:              30 16% 18%;

/* muted — desaturated amber */
--muted:              28 8% 13%;
--muted-foreground:   28 12% 52%;

/* radius — slightly softer for review context */
--radius: 0.5rem;

Font swap — editorial feel

Freight Text for display headings softens the data density. Mono stays technical.

css

/* src/index.css — @theme { ... } */
--font-display: "DM Sans", system-ui, sans-serif;
--font-body:    "DM Sans", system-ui, sans-serif;
--font-mono:    "Fira Code", ui-monospace, monospace;

Update CLAUDE.md

markdown

## Product context
This is [ops-review-name], an internal AI operations review platform.

**Theme:** Warm dark (`:root` override). No light mode.
**Accent:** Amber — `--accent: 38 92% 50%`. Use for label actions,
  approval buttons, and active queue items.
**Typography:** DM Sans (display + body) for editorial warmth.
  Fira Code (mono) for model output, eval scores, and JSON payloads.
**Use case:** Queue-driven review flows. Long-form AI output reading,
  side-by-side comparisons, label assignment, escalation routing.

Design for long sessions: generous line height on body text (`leading-relaxed`),
  card surfaces clearly separated from background.
Destructive actions (`--destructive`) for reject/flag. Amber accent for approve/pass.
Never use accent for passive information — only for the primary action in context.

What's next

The three examples above cover the full range of customization: a dark-only tool, a togglable dark/light dashboard, and a warm-tinted internal platform. Every change was CSS custom properties in src/index.css and updates to the two AI context files. No component source was modified.

Go deeper with the reference docs and AI workflow guides:

Resource	What you'll find
`docs/theming.md`	Full theming guide — surface hierarchy, accent rules, three-theme compliance, and step-by-step token override patterns.
`docs/tokens.md`	Complete token reference — every CSS custom property, its default value across all three themes, and its semantic role.
`CLAUDE.md` + `AGENTS.md`	AI + terminal workflow — how to configure coding agents to stay on-system, generate compliant components, and run verification after every change.

Contact

Questions, collaborations, or feedback on democrito — reach out on LinkedIn or via hola@atomic-products.com.

Made with ❤️ from 🇪🇸 by Mariano · github.com/mmorerasanchez/democrito