Colors & Fonts

Colors & Fonts

Files: src/styles/theme.css, src/config/fonts.json · Skill level: Beginner

A rebrand in Taskly is a few values, not a find-and-replace. Components use color tokens (bg-primary, text-dark, bg-lime), and content files pick colors by name (color: "lime"), so changing a value in theme.css updates every page.

The Pastel Palette

The colors live in the :root block at the bottom of src/styles/theme.css:

And the pastels that cards, tags, avatars, and the product mockups use. Content files pick them by name; the name maps to a variable, a text color, and a soft tint in src/lib/pastel.ts:

white and cream are names too. There is also a paler --theme-lilac (#ccbdf4, the bg-lilac class) that a few components use directly, for example the newsletter card of the tiles footer; the content name lilac uses --theme-primary.

Pick A Color In Content

Content files never contain color codes. Wherever a file has a color field (tags, cards, icon tiles, avatars, calendar marks, plan names), it takes one of these names:

tag: { label: "Pricing", color: "lime" } # sun | lime | sky | lilac | orchid | mint | lemon | white | cream

Text is white on lilac, orchid, and mint and ink on the others (pastelText in src/lib/pastel.ts; icons on tiles follow pastelIcon in the same file). If you change a pastel a lot, for example make --theme-lime dark, change its entry there too so the text stays readable.

Change The Brand Colors

Taskly has two brand roles: primary (lilac) and the main button (sun).

:root {
  --theme-primary: #2563eb;      /* links, focus rings, featured plan, logo tile */
  --theme-primary-soft: #eff6ff; /* a very light tint of the same color */
  --theme-sun: #ffd86f;          /* the "fill" button, with dark text */
  --theme-accent: #ffd86f;       /* keep equal to --theme-sun */
}

The fill button is dark text on --theme-sun, so --theme-sun must stay light; changing it also changes every sun tag and card. White text sits on primary (the featured plan with highlight: true, the built-in logo tile, lilac tags), so check the contrast of your primary with a free checker such as WebAIM’s.

To retint the whole palette, change the pastel values too. The names stay the same, so no content file changes.

Shapes, Breakpoints, And Type Scale

The @theme inline block at the top of theme.css holds the rest of the design tokens:

• Radii: --radius-card (20px, section cards) and --radius-panel (12px, cards inside cards and mockup panels). Buttons and inputs use rounded-xl; tags and avatars are round.
• Breakpoints: sm 540px, md 768px, lg 1024px, xl 1280px.
• Type scale: --text-h1 to --text-h6 for desktop (60px down to 18px) and --text-h1-sm to --text-h6-sm for phones, plus heading line heights and letter spacing (--leading-h1, --tracking-h1…).
• Easing: --ease-out-soft (menus, header) and --ease-spring (the FAQ plus and the pricing switch).

Fonts

Fonts are listed in src/config/fonts.json and load from Google Fonts at build time (self-hosted, no request to Google from your visitors):

To change a font, replace its name with any Google Fonts family and keep its cssVariable:

{
  "name": "Inter",
  "variants": [
    { "style": "normal", "weight": "400" },
    { "style": "normal", "weight": "600" }
  ],
  "preload": true,
  "display": "swap",
  "cssVariable": "--font-primary",
  "provider": "google",
  "subsets": ["latin"],
  "fallback": "sans-serif"
}

List every weight the theme uses (body: 400 to 700; headings: 500 to 700), or the browser fakes the missing ones. preload: true is worth it only for the body and heading fonts. The generated Open Graph cards use the --font-primary font.

The Highlighted Word

Wrap a word or two of a hero or page header title in single asterisks and it is set in Instrument Serif italic inside an outlined pill:

title: "Run your *team* from one board"

Keep it to one short phrase per title, and check the result at phone width: long phrases wrap.

Do It With AI

Follow the "Rebrand colors / typography" skill in SKILLS.md. Brand color: [HEX]. Fonts: body
[FONT], headings [FONT]. Edit src/styles/theme.css (:root values) and src/config/fonts.json, and
src/lib/pastel.ts only if a pastel changes from light to dark. Keep --theme-sun light (the "fill"
button is dark text on it) and --theme-accent equal to it, check that white text reads on
--theme-primary, and keep the variable names and cssVariable values. List the values you chose.