Skip to content
Docs
    Menu

    Site code reference

    Styling rules

    How to style a Starjay site: colors and fonts only from design tokens, stock Tailwind values for everything else.

    Only colors and fonts are design tokens. Everything else (spacing, sizing, radius, shadows, breakpoints) uses Tailwind's stock utilities.

    Colors

    Your site's colors are defined in brand/tokens.ts and become Tailwind utilities:

    • A scale has 11 shades, 50 to 950: bg-{name}-{shade}, text-{name}-{shade}, border-{name}-{shade}.
    • A swatch is a single color: bg-{name}, text-{name}.

    The names are whatever the site chose. Read them with get_tokens before you write classes, and never assume a scale called primary or neutral exists.

    If the color you need isn't in the palette, add it first with modify_tokens, then use the new class in the same change. importTailwindScale copies one of Tailwind's built-in scales exactly; addScale builds a scale from a base color. A name such as stone is fine once the site has registered it as a token.

    Fonts

    Fonts are slots, used as font-{slot}. Slot names are site-specific (one site has font-display and font-body, another only font-default). Add or change a font with modify_tokens. Only Google Fonts are supported.

    Everything else

    Use stock Tailwind values: p-6, gap-8, rounded-lg, max-w-4xl, shadow-md. There are no named spacing tokens (p-lg doesn't exist).

    Site-wide element styles

    Element defaults style every bare element of a type across the site, such as body background and text color or every h2. Don't repeat those classes in components. Change them with modify_element_defaults. The page background, text color and font can also be changed in Settings → General → Page Defaults.

    Token variables in CSS

    Each token is also a CSS variable, for the rare case where you need plain CSS:

    <style>
  .pull-quote {
    border-left: 2px solid var(--color-accent-500);
    font-family: var(--font-display);
  }
</style>

    Colors are --color-{name}-{shade} (or --color-{name} for a swatch); fonts are --font-{slot}.

    Related