PACK 03 · CLAUDE COWORK · DESIGN SYSTEM

Type, color, spacing.
Pick once. Stop deciding every time.

Your designer left, your agency turned over, your dev built three checkout flows with three different button styles. This pack ships the token files — CSS variables, Tailwind config, type scale, color system — every page should inherit.

See the free overview (PDF)

$99 — instant download

Build Your Design System pack — palette icon on cream background.
PLAYBOOK + SKILL INSTANT DOWNLOAD SKU LF-PACK-SKL-DESIGN
01 · What's inside

What you get
when you buy this pack.

  • tokens.css — CSS variables for color, type, spacing, motion. Drop into any project.
  • tailwind-tokens.js — equivalent Tailwind config. For projects on Tailwind.
  • Type scale doc — Fraunces, Inter, JetBrains Mono pairing with the exact ramp.
  • Color system — paper-and-ember palette with semantic tokens. Background, text-primary, accent.
  • Component naming conventions — buttons, cards, headlines, eyebrows, sections.
  • Worked examples — the same component built three ways. Vanilla CSS, Tailwind, React.
  • SKILL.md — Claude can extend the system. Add a token, generate a component, audit a page for drift.
02 · Best for

Who this is for.
And who it isn't.

Best for:

  • Teams without a design system, building UI ad-hoc.
  • Designers who want a documented starting point that doesn't make them re-choose every primitive.
  • Devs inheriting a codebase with forty-seven hex codes and three button styles.

Not best for:

  • Teams with a mature design system already in production. You don't need this.
  • Projects that demand a custom typeface or non-trivial color system. The tokens are a starting point, not a forever solution.
05 · FAQ

Questions we get.

Can I keep my brand colors and use this? Yes. The tokens are the structure. You override the values to match your brand. The naming, the ramp, and the semantic tokens are what you keep.

What if I'm on plain CSS, not Tailwind? tokens.css is the primary file. tailwind-tokens.js is a parallel for Tailwind projects. You only need one.

Will this work in a Shopify theme? Yes. Drop tokens.css into your theme's assets folder and link it. We've done this on three Shopify themes including the LF site.

Is the type scale required? No. Replace the scale with whatever your brand uses. The ramp ratios are documented so you can rebuild yours on the same logic.

What if my designer uses Figma? The pack ships a starter Figma file with the same tokens defined as variables. They sync conceptually with the CSS — you maintain both manually.

Can I extend the system on my own? Yes. The conventions doc explains the rules so any addition reads as part of the same system.

Ready to install?

$99 — instant download. Instant download. Fourteen-day refund.