Everything for $49All templates for $99

Design systems

Truecourse design system

From the Truecourse template.

Included with Everything
Truecourse

Colour

Type

  • Anybodydisplay · 400, 650, 720 · Check the font vendor
  • IBM Plex Sansbody · 400, 500, 600 · Check the font vendor
  • IBM Plex Monomono · 400, 500 · SIL Open Font License 1.1
  • Display91 / 64px · 720Six ways to build with one team.
  • H263 / 34px · 720Every one handed over on the date.
  • H332 / 22px · 650Know the number before we meet.
  • Lead21 / 20px · 400Every site starts at 7:15 with a ten-minute briefing on the day's riskiest task.
  • Body17 / 15px · 400Every enquiry is answered by an estimator or a site manager, not a call centre.
  • Small12 / 12px · 400Every site starts at 7:15 with a ten-minute briefing on the day's riskiest task.
  • Eyebrow13 / 13px · 500WHAT WE DO

Components

SectorsProcessSafetyAboutServices
Get an estimate Quality See our projects Standard

WHAT WE DO

Know the number before we meet.

Every enquiry is answered by an estimator or a site manager, not a call centre.

Shape and motion

  • sm · 0px
  • md · 0px
  • lg · 0px
  • out · cubic-bezier(.22, .8, .2, 1)
  • in-out · cubic-bezier(.65, 0, .25, 1)
  • fast · 180ms
  • base · 420ms
  • slow · 900ms

Exports

  • DESIGN.mdDESIGN.md22 KBEverything
  • CSS variablestokens.css5 KBEverything
  • Tailwind v4tailwind.css6 KBEverything
  • shadcn/ui themeshadcn.css5 KBEverything
  • Figma variablesfigma-variables.json29 KBEverything
  • Webflow variableswebflow-variables.json9 KBEverything
  • W3C tokens (JSON)tokens.json17 KBEverything

Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("truecourse") with the MCP server.

Source
Truecourse template
Palette
Sanzo Wada 114: Orange Yellow, Antwarp Blue
Fonts
Anybody (Check the font vendor), IBM Plex Sans (Check the font vendor), IBM Plex Mono (OFL 1.1)
Themes
Light and dark
Contrast
Text 15.36:1 · muted 9.29:1

Inside DESIGN.md

  1. At a glance
  2. Setup
  3. Colour
  4. Typography
  5. Layout and spacing
  6. Shape and depth
  7. Motion
  8. Components
  9. Voice and copy
  10. Do and don’t
  11. Tokens

More design systems

All 123