Everything for $49All templates for $99

Design systems

Sunprint design system

From the Sunprint template.

Included with Everything
Sunprint

Colour

Type

  • Archivodisplay · 400, 500, 560, 600, 620, 640, 680, 700, 780, 820, 900 · SIL Open Font License 1.1
  • IBM Plex Monomono · 400 · SIL Open Font License 1.1
  • Display306 / 109px · 900One room for the whole film.
  • H1115 / 52px · 820One room for the whole film.
  • H259 / 34px · 780Say the move. Get the shot.
  • H322 / 20px · 680One film. Every format.
  • Lead24 / 20px · 400Sunprint is the AI video studio.
  • Body20 / 18px · 400Write the scene, direct the camera and cut the film in one place, in minutes instead of weeks.
  • Small14 / 14px · 400A halftone website template for an AI video studio, led by a film screened into dots live in the browser, with the headline as a window onto it.
  • Eyebrow13 / 13px · 600THE STUDIO

Components

Use casesPricingCustomersStart for free
Start for free S1 Window

THE STUDIO

One film. Every format.

Write the scene, direct the camera and cut the film in one place, in minutes instead of weeks.

Shape and motion

  • sm · 4px
  • md · 6px
  • lg · 6px
  • pill · 9999px
  • shadow sm
  • shadow md
  • in-out · cubic-bezier(.7, 0, .25, 1)
  • out · cubic-bezier(.2, .8, .2, 1)
  • fast · 300ms
  • base · 800ms
  • slow · 1200ms

Exports

  • DESIGN.mdDESIGN.md23 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.json18 KBEverything

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

Source
Sunprint template
Palette
Sanzo Wada 232: Carmine, Pinkish Cinnamon, Deep Indigo
Fonts
Archivo (OFL 1.1), IBM Plex Mono (OFL 1.1)
Themes
Light and dark
Contrast
Text 16.56:1 · muted 7.09: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