Civitai Developer

Appearance

Design tokens ​

The design system is built on a small set of semantic design tokens shipped by @civitai/theme. Every --civitai-* custom property, its light and dark value, and the value your browser actually resolves are shown below — read live from the published package, so this page can never drift from what a consumer installs.

How tokens are consumed ​

Tokens ship in three interchangeable forms:

  • CSS custom properties — link @civitai/theme/styles.css (or injectTokens() from JS). Every --civitai-* property is registered with @property and re-resolves under a [data-theme="light|dark"] scope.
  • Typed JS/TS export — tokens (light values), darkTokens (dark overrides), and tokenVars (var(--civitai-*) reference strings) from @civitai/theme, with a TokenName union.
  • DTCG JSON — @civitai/theme/tokens.json for design-tool import.
ts
import { tokens, darkTokens, tokenVars, type TokenName } from '@civitai/theme';

// Resolved light value:            tokens.colorPrimary       // "#228BE6"
// Dark override:                   darkTokens.colorPrimary   // "#1971C2"
// CSS var reference (for styling): tokenVars.colorPrimary    // "var(--civitai-color-primary)"
const brand: TokenName = 'colorPrimary';

Theme a subtree by setting data-theme on any ancestor; all tokens re-resolve from that scope:

html
<div data-theme="dark">
  <!-- --civitai-* tokens here resolve to the dark palette -->
</div>

All 27 tokens below are read live from the published @civitai/theme export. The tokens form a single semantic layer (e.g. colorPrimary, colorSurface) — there is no separate raw-palette layer at this version; consumers reference the semantic names and let the [data-theme] scope resolve light vs. dark.

Colors

colorText--civitai-color-text light #222 · dark #C1C2C5 resolved: …
colorTextDimmed--civitai-color-text-dimmed light #868e96 · dark #8c8fa3 resolved: …
colorBody--civitai-color-body light #fefefe · dark #1A1B1E resolved: …
colorSurface--civitai-color-surface light #fefefe · dark #1A1B1E resolved: …
colorSurface2--civitai-color-surface-2 light #fefefe · dark #25262B resolved: …
colorBorder--civitai-color-border light #ced4da · dark #373A40 resolved: …
colorPrimary--civitai-color-primary light #228BE6 · dark #1971C2 resolved: …
colorPrimaryHover--civitai-color-primary-hover light #1C7ED6 · dark #1864AB resolved: …
colorPrimaryFg--civitai-color-primary-fg light #fefefe · dark #fefefe resolved: …
colorPrimaryLight--civitai-color-primary-light light rgba(34, 139, 230, 0.1) · dark rgba(34, 139, 230, 0.15) resolved: …
colorError--civitai-color-error light #fa5252 · dark #e03131 resolved: …
colorSuccess--civitai-color-success light #299C7A · dark #326D5C resolved: …
colorWarning--civitai-color-warning light #fd7e14 · dark #e8590c resolved: …
colorInfo--civitai-color-info light #228BE6 · dark #1971C2 resolved: …
colorGray0--civitai-color-gray-0 light #f8f9fa · dark #f8f9fa resolved: …
colorGray1--civitai-color-gray-1 light #f1f3f5 · dark #f1f3f5 resolved: …
colorGray2--civitai-color-gray-2 light #e9ecef · dark #e9ecef resolved: …
colorGray3--civitai-color-gray-3 light #dee2e6 · dark #dee2e6 resolved: …
colorGray4--civitai-color-gray-4 light #ced4da · dark #ced4da resolved: …
colorGray5--civitai-color-gray-5 light #adb5bd · dark #adb5bd resolved: …
colorGray6--civitai-color-gray-6 light #868e96 · dark #868e96 resolved: …
colorGray7--civitai-color-gray-7 light #495057 · dark #495057 resolved: …
colorGray8--civitai-color-gray-8 light #343a40 · dark #343a40 resolved: …
colorGray9--civitai-color-gray-9 light #212529 · dark #212529 resolved: …

Typography

font
--civitai-font The quick brown fox jumps over the lazy dog — 0123456789
fontMono
--civitai-font-mono The quick brown fox jumps over the lazy dog — 0123456789

Radius & shape

radius
--civitai-radius0.25rem

All tokens

TokenCSS custom propertyLightDark
font--civitai-font-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji
fontMono--civitai-font-monoui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospaceui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
radius--civitai-radius0.25rem0.25rem
colorText--civitai-color-text#222#C1C2C5
colorTextDimmed--civitai-color-text-dimmed#868e96#8c8fa3
colorBody--civitai-color-body#fefefe#1A1B1E
colorSurface--civitai-color-surface#fefefe#1A1B1E
colorSurface2--civitai-color-surface-2#fefefe#25262B
colorBorder--civitai-color-border#ced4da#373A40
colorPrimary--civitai-color-primary#228BE6#1971C2
colorPrimaryHover--civitai-color-primary-hover#1C7ED6#1864AB
colorPrimaryFg--civitai-color-primary-fg#fefefe#fefefe
colorPrimaryLight--civitai-color-primary-lightrgba(34, 139, 230, 0.1)rgba(34, 139, 230, 0.15)
colorError--civitai-color-error#fa5252#e03131
colorSuccess--civitai-color-success#299C7A#326D5C
colorWarning--civitai-color-warning#fd7e14#e8590c
colorInfo--civitai-color-info#228BE6#1971C2
colorGray0--civitai-color-gray-0#f8f9fa#f8f9fa
colorGray1--civitai-color-gray-1#f1f3f5#f1f3f5
colorGray2--civitai-color-gray-2#e9ecef#e9ecef
colorGray3--civitai-color-gray-3#dee2e6#dee2e6
colorGray4--civitai-color-gray-4#ced4da#ced4da
colorGray5--civitai-color-gray-5#adb5bd#adb5bd
colorGray6--civitai-color-gray-6#868e96#868e96
colorGray7--civitai-color-gray-7#495057#495057
colorGray8--civitai-color-gray-8#343a40#343a40
colorGray9--civitai-color-gray-9#212529#212529

Component size scales

Spacing and sizing come from each component's data-gap / data-padding / data-size presets (resolved in @civitai/components), not from theme tokens. For reference:

PresetStack gapGroup gapCard padding
sm8px6px10px
md16px16px16px
lg24px24px24px

DTCG export

The same tokens are published as a DTCG document at @civitai/theme/tokens.json for design-tool import:

View tokens.json
{
  "font": {
    "font": {
      "$type": "fontFamily",
      "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji",
      "$description": "Base UI font stack (Mantine default system stack)."
    },
    "mono": {
      "$type": "fontFamily",
      "$value": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
      "$description": "Monospace font stack."
    }
  },
  "radius": {
    "radius": {
      "$type": "dimension",
      "$value": {
        "value": 0.25,
        "unit": "rem"
      },
      "$description": "Default corner radius (civitai leaves Mantine's `sm` default)."
    }
  },
  "color": {
    "text": {
      "$type": "color",
      "$value": "#222",
      "$description": "Primary body text color.",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "#C1C2C5"
        }
      }
    },
    "textDimmed": {
      "$type": "color",
      "$value": "#868e96",
      "$description": "Secondary / muted text color.",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "#8c8fa3"
        }
      }
    },
    "body": {
      "$type": "color",
      "$value": "#fefefe",
      "$description": "Page / document background (derived from Mantine's `--mantine-color-body`). Use for `body { background }` in plain-HTML apps.",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "#1A1B1E"
        }
      }
    },
    "surface": {
      "$type": "color",
      "$value": "#fefefe",
      "$description": "Primary surface / page background.",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "#1A1B1E"
        }
      }
    },
    "surface2": {
      "$type": "color",
      "$value": "#fefefe",
      "$description": "Secondary surface (inputs, insets).",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "#25262B"
        }
      }
    },
    "border": {
      "$type": "color",
      "$value": "#ced4da",
      "$description": "Default border / divider color.",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "#373A40"
        }
      }
    },
    "primary": {
      "$type": "color",
      "$value": "#228BE6",
      "$description": "Primary accent (filled) color.",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "#1971C2"
        }
      }
    },
    "primaryHover": {
      "$type": "color",
      "$value": "#1C7ED6",
      "$description": "Primary accent hover color.",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "#1864AB"
        }
      }
    },
    "primaryFg": {
      "$type": "color",
      "$value": "#fefefe",
      "$description": "Foreground/text color on a filled primary surface.",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "#fefefe"
        }
      }
    },
    "primaryLight": {
      "$type": "color",
      "$value": "rgba(34, 139, 230, 0.1)",
      "$description": "Translucent primary tint (light variant background).",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "rgba(34, 139, 230, 0.15)"
        }
      }
    },
    "error": {
      "$type": "color",
      "$value": "#fa5252",
      "$description": "Error / destructive color.",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "#e03131"
        }
      }
    },
    "success": {
      "$type": "color",
      "$value": "#299C7A",
      "$description": "Success color (civitai's custom `success` palette).",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "#326D5C"
        }
      }
    },
    "warning": {
      "$type": "color",
      "$value": "#fd7e14",
      "$description": "Warning color (derived from the orange palette).",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "#e8590c"
        }
      }
    },
    "info": {
      "$type": "color",
      "$value": "#228BE6",
      "$description": "Informational color (derived from the blue palette).",
      "$extensions": {
        "com.civitai.theme": {
          "dark": "#1971C2"
        }
      }
    },
    "gray0": {
      "$type": "color",
      "$value": "#f8f9fa",
      "$description": "Neutral ramp step 0 (Mantine gray[0]); 0 = lightest … 9 = darkest."
    },
    "gray1": {
      "$type": "color",
      "$value": "#f1f3f5",
      "$description": "Neutral ramp step 1 (Mantine gray[1]); 0 = lightest … 9 = darkest."
    },
    "gray2": {
      "$type": "color",
      "$value": "#e9ecef",
      "$description": "Neutral ramp step 2 (Mantine gray[2]); 0 = lightest … 9 = darkest."
    },
    "gray3": {
      "$type": "color",
      "$value": "#dee2e6",
      "$description": "Neutral ramp step 3 (Mantine gray[3]); 0 = lightest … 9 = darkest."
    },
    "gray4": {
      "$type": "color",
      "$value": "#ced4da",
      "$description": "Neutral ramp step 4 (Mantine gray[4]); 0 = lightest … 9 = darkest."
    },
    "gray5": {
      "$type": "color",
      "$value": "#adb5bd",
      "$description": "Neutral ramp step 5 (Mantine gray[5]); 0 = lightest … 9 = darkest."
    },
    "gray6": {
      "$type": "color",
      "$value": "#868e96",
      "$description": "Neutral ramp step 6 (Mantine gray[6]); 0 = lightest … 9 = darkest."
    },
    "gray7": {
      "$type": "color",
      "$value": "#495057",
      "$description": "Neutral ramp step 7 (Mantine gray[7]); 0 = lightest … 9 = darkest."
    },
    "gray8": {
      "$type": "color",
      "$value": "#343a40",
      "$description": "Neutral ramp step 8 (Mantine gray[8]); 0 = lightest … 9 = darkest."
    },
    "gray9": {
      "$type": "color",
      "$value": "#212529",
      "$description": "Neutral ramp step 9 (Mantine gray[9]); 0 = lightest … 9 = darkest."
    }
  }
}

Civitai Developer Documentation

© 2026 Civitai