Create the design system

GoalLink to this section

Turn Northline's approved brand inputs into tokens before styling pages. The default starter includes default and dark themes; confirm the project's actual names in its references.

1. Inspect the current designLink to this section

cat .systhema/references/tokens/_index.toon

Read the relevant collection references beside the index. They describe this project's values. Documentation examples describe defaults.

Use the token collections and custom tokens references for the source format and override shape.

2. Generate a starting designLink to this section

Use Systhema Design in the browser, or use the same design engine through the CLI:

systhema design new --seed '#0E4DA4' --heading-font 'Space Grotesk' --body-font Inter --yes
systhema design status
systhema design diff
systhema design color check

Replace the seed and font choices with the approved brand. A secondary brand color usually needs a palette, not an entire color-system mode:

systhema design palette add accent '#E8590C'
systhema design color set foundations.decorative @accent.500

A mode rebinds a complete semantic palette. Use modes only when a whole region must change its colors together.

3. Review and applyLink to this section

Start from a clean working tree. Review every intended write before applying:

systhema design apply --dry-run
systhema design apply

Apply writes project design inputs and runs sync. Re-read the generated references afterward. The Design CLI reference covers exports and round trips.

For a small project-specific override, merge runtime values into customTokens; do not add $value or collection-mode wrappers. See Custom tokens for a complete config example. A color primitive alone does not rebind foundations; use the Design CLI to generate and connect the palette.

4. Use Figma when it is the design sourceLink to this section

The Systhema Figma plugin is distributed to licensed teams. Export the design's variables and styles, place its JSON files and manifest in src/tokens/, then run pnpm sync. Read the references again before composing the layout.

Use Figma export for the export steps. Do not hand-edit exported token JSON, generated TOON files or .systhema/artifacts.

5. Load fonts through the projectLink to this section

Use the fonts installed by Design apply, or Next.js font loading in your site template. Avoid remote CSS @import font loading. Confirm the loaded family matches the font token and that the supplied licence covers web use.

Check your workLink to this section

• The token references show the approved themes, fonts and responsive sizing.
• Brand changes affect existing components without hardcoded colors in JSX.
• Both default and dark regions have readable text and visible focus states.
• Exported token files remain reproducible from the design source.

Next: Build layout and pages.