Everything for $49All templates for $99

Design systems

Calmfield design system

From the Calmfield template.

Included with Everything
Calmfield

Colour

Type

  • Hanken Groteskdisplay · 300, 400, 500 · SIL Open Font License 1.1
  • JetBrains Monomono · 400 · SIL Open Font License 1.1
  • Display122 / 44px · 300Store the sun at noon. Spend it at six.
  • H186 / 44px · 300Store the sun at noon. Spend it at six.
  • H249 / 32px · 300Notes from the control room.
  • H322 / 20px · 400Run one site on Calmfield for sixty days.
  • Lead19 / 18px · 400Calmfield is AI for a renewable grid.
  • Body16 / 16px · 400It forecasts every turbine and panel, then schedules batteries and demand so supply meets load, minute by minute.
  • Small14 / 14px · 400Tokens live in assets/tokens.
  • Eyebrow13 / 13px · 500The platform

Components

PricingCustomersCompanyBook a demoBook a demo
Book a demo

The platform

Run one site on Calmfield for sixty days.

It forecasts every turbine and panel, then schedules batteries and demand so supply meets load, minute by minute.

Shape and motion

  • sm · 2px
  • md · 2px
  • lg · 2px
  • pill · 9999px
  • in-out · cubic-bezier(.7, 0, .2, 1)
  • out · cubic-bezier(.16, 1, .3, 1)
  • fast · 350ms
  • base · 900ms
  • slow · 1400ms

Exports

  • DESIGN.mdDESIGN.md22 KBEverything
  • CSS variablestokens.css6 KBEverything
  • Tailwind v4tailwind.css6 KBEverything
  • shadcn/ui themeshadcn.css5 KBEverything
  • Figma variablesfigma-variables.json30 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("calmfield") with the MCP server.

Source
Calmfield template
Palette
Sanzo Wada 268: Light Brown Drab, Raw Sienna, Deep Slate Olive, Nile Blue
Fonts
Hanken Grotesk (OFL 1.1), JetBrains Mono (OFL 1.1)
Themes
Light and dark
Contrast
Text 12.7:1 · muted 5.73: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