Change the design
The kit’s look is paper, ink and marigold, with Instrument Sans and JetBrains Mono. Make it
yours by hand with the table below, or ask your coding agent: the redesign skill follows
this page.
Make it ours: deep green and cream, rounder corners, and Inter for everything. Here is our logo.
Give it what you have: a description, colors, a screenshot of a site you like, or your logo.
Where the design lives
Section titled “Where the design lives”Every app reads the same palette, written once per app in the form it needs. Change them together, or the phone and the emails will not match the web.
| What | Where |
|---|---|
| Colors | apps/web/src/styles.css, apps/site/src/styles/global.css, apps/mobile/src/theme.ts, apps/api/src/mail/templates/layout.tsx |
| Fonts | The @imports and --font-* in both CSS files, fonts and fontFiles in apps/mobile/src/theme.ts, each app’s package.json |
| Corners | --radius in both CSS files, radius in apps/mobile/src/theme.ts |
| Logo | favicon.svg in apps/web/public and apps/site/public, the mark in apps/site/src/layouts/Base.astro, apps/mobile/src/components/logo.tsx |
| App icon | apps/mobile/assets/ (icon, Android adaptive icon, splash) and the colors beside them in apps/mobile/app.json |
| Share image | apps/site/src/lib/og.ts: its colors and font |
| Screenshots | apps/site/public/screens/, light and dark: see Marketing site |
What the tokens mean:
--primaryis for actions: buttons and the selected option, with--primary-foregroundon them.--brandis the accent: meters, progress, the logo. Body text never sits on it.--muted-foregroundis for secondary text, on the page and on cards.- Components use the tokens only. A color written into a component is one a redesign misses.
Check it
Section titled “Check it”- Contrast:
bun run checktests every pair of colors that puts words on a background, in light and dark, against WCAG AA (4.5 to 1). A failure names the pair. - Look at it: every main screen in light and dark, on the web and on the phone: sign-in,
the first screen, a settings page, billing, the assistant. Then the marketing site and an
email (
bun run email:preview). - The browser journeys:
bun run acceptance, since a journey finds buttons by their words and roles, not their colors. - New screenshots for the marketing site, so it shows the product as it looks now.