design tokens#

CSS custom properties defined in frontend/src/routes/+layout.svelte. Use these instead of hardcoding values.

border radius#

--radius-sm: 4px;    /* tight corners (inputs, small elements) */
--radius-base: 6px;  /* default for most elements */
--radius-md: 8px;    /* cards, modals */
--radius-lg: 12px;   /* larger containers */
--radius-xl: 16px;   /* prominent elements */
--radius-2xl: 24px;  /* hero elements */
--radius-full: 9999px; /* pills, circles */

typography#

/* scale */
--text-xs: 0.75rem;   /* 12px - hints, captions */
--text-sm: 0.85rem;   /* 13.6px - labels, secondary */
--text-base: 0.9rem;  /* 14.4px - body default */
--text-lg: 1rem;      /* 16px - body emphasized */
--text-xl: 1.1rem;    /* 17.6px - subheadings */
--text-2xl: 1.25rem;  /* 20px - section headings */
--text-3xl: 1.5rem;   /* 24px - page headings */

/* semantic aliases */
--text-page-heading: var(--text-3xl);
--text-section-heading: 1.2rem;
--text-body: var(--text-lg);
--text-small: var(--text-base);

colors#

accent#

--accent: #6a9fff;       /* primary brand color (user-customizable) */
--accent-hover: #8ab3ff; /* hover state */
--accent-muted: #4a7ddd; /* subdued variant */
--accent-rgb: 106, 159, 255; /* for rgba() usage */

backgrounds#

/* dark theme */
--bg-primary: #0a0a0a;   /* main background */
--bg-secondary: #141414; /* elevated surfaces */
--bg-tertiary: #1a1a1a;  /* cards, modals */
--bg-hover: #1f1f1f;     /* hover states */

/* light theme overrides these automatically */

borders#

--border-subtle: #282828;   /* barely visible */
--border-default: #333333;  /* standard borders */
--border-emphasis: #444444; /* highlighted borders */

text#

--text-primary;   /* high contrast */
--text-secondary; /* medium contrast */
--text-tertiary;  /* low contrast */
--text-muted;     /* very low contrast */

semantic#

--success: #22c55e;
--warning: #f59e0b;
--error: #ef4444;

usage#

<style>
  .card {
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
  }

  .label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  input:focus {
    border-color: var(--accent);
  }
</style>

anti-patterns#

/* bad - hardcoded values */
border-radius: 8px;
font-size: 14px;
background: #1a1a1a;

/* good - use tokens */
border-radius: var(--radius-md);
font-size: var(--text-base);
background: var(--bg-tertiary);