FOUNDRY

Developer documentation

Build with the brand system, not around it.

A practical reference for translating your generated tokens into accessible, secure and maintainable digital products.

Semantic tokens

Treat JSON tokens as the source of truth. Consume colour roles such as primary, ink, surface and paper rather than copying literal values into components.

Typography scale

Use the display family for H1–H3 and the body family for paragraphs, controls and labels. Preserve the supplied line heights and load local fonts with font-display: swap.

Spacing rules

Build on the 4px base: 4, 8, 16, 24 and 48px. Use 24px between related groups and 48px or more between distinct sections.

Safe Next.js use

Validate user-supplied tokens before applying them. Never expose server secrets through NEXT_PUBLIC variables, never build class names from untrusted input and retain the font licence.

Token contract

One source of truth

Import the generated CSS before application styles. Map tokens to framework utilities once, then reference semantic roles throughout your component layer.

brand-tokens.css
:root {
  --brand-primary: #7A5A3A;
  --font-display: "Space Grotesk", sans-serif;
  --space-md: 16px;
}

Next.js starter checklist

  1. 01Run dependency and security checks before deployment.
  2. 02Keep secrets server-only and out of client bundles.
  3. 03Validate custom colour values against the token schema.
  4. 04Re-run contrast QA after changing colours or type sizes.
  5. 05Retain OFL-1.1.txt beside redistributed font files.
  6. 06Use the checksum manifest to verify downloaded assets.