Brand Starter

[Brand name] brand guide

Version [1.0] - [Month year] - Owner: [Name, role]

This guide explains how [Brand name] looks, sounds and behaves, so anyone making something for us can get it right without asking. Fill in every [bracketed field]. Delete any section that truly doesn't apply, rather than leaving it empty. A short guide people read beats a long one nobody opens.

How to fill this in: work top to bottom. Sections 1 and 2 decide everything after them, so don't skip to colours. Where you're unsure, write your best answer and mark it "draft". Review the drafts together once the whole guide exists.

---

1. Purpose and positioning

What we do, in one sentence

[Brand name] helps [who] [do what] so they can [outcome].

Example: Example Co helps independent bakeries take online orders so they can sell out before noon.

Why we exist

[Two or three sentences on the problem you saw and why you care about it. Write it so a new hire could repeat it.]

Who we serve

| Audience | What they need from us | What they worry about |
|---|---|---|
| [Primary audience] | [Need] | [Worry] |
| [Secondary audience] | [Need] | [Worry] |
| [Who we are not for] | [Why we say no] | - |

Positioning statement

For [target audience] who [need or problem], [Brand name] is the [category] that [key benefit]. Unlike [main alternative], we [main difference].

Proof points

The facts that back up the positioning. Only list things you can show.

1. [Proof point, for example "Set up in one afternoon, no developer needed"]
2. [Proof point]
3. [Proof point]

Brand values

Pick three to five. For each, say what it means in practice, so it can guide a real decision.

| Value | What it means | What it rules out |
|---|---|---|
| [Value, e.g. Plain] | [We explain things without jargon] | [Buzzwords, vague claims] |
| [Value] | [Meaning] | [What we won't do] |
| [Value] | [Meaning] | [What we won't do] |

Brand personality

If [Brand name] were a person, they would be:

• [Trait] but not [overdone version of the trait]
• [Trait, e.g. confident] but not [e.g. arrogant]
• [Trait, e.g. warm] but not [e.g. gushing]

---

2. Voice and tone

Voice is who we are, and it stays the same everywhere. Tone is how that voice adjusts to the moment: lighter in a launch post, calmer in an outage notice.

Our voice in three words

1. [Word] - [one line on what it sounds like]
2. [Word] - [one line]
3. [Word] - [one line]

Tone by situation

| Situation | Tone | Example line |
|---|---|---|
| Homepage and ads | [e.g. Confident, direct] | [Example line] |
| Onboarding and help docs | [e.g. Patient, step by step] | [Example line] |
| Error messages | [e.g. Calm, specific, no blame] | [Example line] |
| Outage or incident | [e.g. Factual, frequent, no jokes] | [Example line] |
| Social media | [e.g. Relaxed, human] | [Example line] |
| Billing and legal | [e.g. Clear, precise] | [Example line] |

Do and don't

| Do | Don't |
|---|---|
| "Your order is confirmed. We'll email you when it ships." | "Woohoo! Your awesome order is officially confirmed!!!" |
| "We couldn't save your changes. Check your connection and try again." | "Oops! Something went wrong." |
| "Most teams finish setup in about an hour." | "Setup takes seconds!" (unless it truly does) |
| "Cancel any time from Settings > Billing." | "Contact us to discuss your cancellation options." |
| "This feature is in beta. Expect some rough edges." | "Revolutionary next-generation experience." |
| "You" and "we" | "The user" and "the company" |
| Short sentences. One idea each. | Long sentences that try to cover every case at once, with several clauses and qualifiers. |

Replace these with lines in your own voice. Keep at least five pairs.

Writing rules

• Spelling: [British / American / Canadian / Australian] English. Dictionary: [name].
• Capitalisation: headings in [Sentence case / Title Case]. Buttons in [Sentence case].
• Product and feature names: [how to write them, e.g. "Example Co Orders", never "EC Orders"].
• Numbers: [e.g. one to nine in words, 10 and above in figures].
• Dates and times: [e.g. 22 October 2026, 14:00 UTC].
• Currency: [e.g. USD 49, or $49 with the currency named once on the page].
• Contractions: [Yes, use "we're" and "don't" / No].
• Exclamation marks: [e.g. at most one per page, never in errors].
• Emoji: [Where allowed, where never].
• Inclusive language: [e.g. "they" for unknown people, describe people by role, avoid idioms that don't translate].

Words we use and avoid

| We say | We don't say | Why |
|---|---|---|
| [e.g. customers] | [e.g. users] | [We sell to people, not accounts] |
| [Term] | [Term] | [Reason] |
| [Term] | [Term] | [Reason] |

Tagline and boilerplate

• Tagline: [Short line, if you have one]
• One-line description (under 140 characters): [Text]
• Short boilerplate (about 50 words): [Text for directories, press and partner pages]
• Long boilerplate (about 120 words): [Text]

---

3. Logo

Full rules and a printable sheet are in logo-usage.md and logo-usage.html. Summarise the essentials here.

Logo versions

| Version | When to use | File names |
|---|---|---|
| Primary (horizontal) | Default for websites, documents, most uses | [brand-logo-primary.svg] |
| Stacked | Square or narrow spaces | [brand-logo-stacked.svg] |
| Symbol only | Favicons, app icons, profile images, small spaces where the name appears nearby | [brand-symbol.svg] |
| Wordmark only | Where the symbol would be too small to read | [brand-wordmark.svg] |

Colour versions

• Full colour: on white or [light surface colour] only.
• Reversed (white): on [primary colour], dark photos and dark surfaces.
• One colour dark: on light backgrounds where full colour isn't possible, such as single-colour print.
• One colour light: on dark backgrounds where full colour isn't possible.

Clear space and minimum size

• Clear space: keep a margin equal to [the height of the symbol / the cap height of the wordmark, called "x"] on every side.
• Minimum size, screen: [e.g. 24 px tall for the primary logo, 16 px for the symbol].
• Minimum size, print: [e.g. 10 mm tall for the primary logo].

Never

• Stretch, squash, rotate or skew the logo.
• Recolour it outside the approved versions.
• Add shadows, glows, outlines, bevels or gradients.
• Place it on a busy photo or a background with poor contrast.
• Rebuild it in a different font or rearrange its parts.

---

4. Colour

The values below should match tokens/colors.css. If they ever disagree, the token file wins, because that is what ships.

Brand colours

| Name | Role | HEX | RGB | CMYK (print) | Pantone (if used) |
|---|---|---|---|---|---|
| [Primary] | Main brand colour, primary buttons, links | [#2453d6] | [36, 83, 214] | [Get from your printer] | [Code] |
| [Secondary] | Supporting colour, highlights | [#0f766e] | [15, 118, 110] | [ ] | [ ] |
| [Accent] | Small amounts only: badges, key callouts | [#c2410c] | [194, 65, 12] | [ ] | [ ] |

Convert to CMYK and Pantone with your printer or designer, using a proof. Automatic conversions often shift colours, especially bright blues and greens.

Neutrals

| Name | HEX | Typical use |
|---|---|---|
| [Neutral 900] | [#16191e] | Body text |
| [Neutral 600] | [#4f5662] | Secondary text |
| [Neutral 300] | [#c3c9d2] | Dividers |
| [Neutral 50] | [#f7f8fa] | Alternate backgrounds |
| [White] | [#ffffff] | Main background |

Proportions

A rough guide to how much of each colour appears in a typical layout: [e.g. 60% neutrals and white, 25% primary, 10% secondary, 5% accent].

Status colours

| Purpose | Light theme | Dark theme |
|---|---|---|
| Success | [#15803d] | [#4ade80] |
| Warning | [#b45309] | [#fbbf24] |
| Danger | [#b91c1c] | [#f87171] |
| Info | [#0369a1] | [#38bdf8] |

Never use colour alone to carry meaning. Pair it with an icon, a word or both.

Approved text and background pairs

List only pairs that meet WCAG AA (4.5:1 for normal text). See tokens/README.md for the measured ratios of the example palette.

| Text | Background | Ratio | Use |
|---|---|---|---|
| [Neutral 900] | [White] | [17.62:1] | Body text |
| [White] | [Primary] | [6.40:1] | Primary buttons |
| [ ] | [ ] | [ ] | [ ] |

---

5. Typography

Typefaces

| Role | Typeface | Weights | Fallback | Licence |
|---|---|---|---|---|
| Headings | [Typeface] | [600, 700] | [System sans-serif] | [Licence and where it is stored] |
| Body | [Typeface] | [400, 500] | [System sans-serif] | [Licence] |
| Code or data | [Typeface] | [400] | [System monospace] | [Licence] |
| Office documents | [e.g. Arial or Calibri, if brand fonts aren't installed] | - | - | - |

Check each font licence covers web, app, print and email use, and how many people may install it.

Type scale

| Style | Size (mobile to desktop) | Weight | Line height | Use |
|---|---|---|---|---|
| Display | [44 to 68 px] | [700] | [1.15] | Hero headlines only |
| H1 | [36 to 52 px] | [700] | [1.15] | Page titles |
| H2 | [30 to 40 px] | [700] | [1.15] | Section titles |
| H3 | [24 to 30 px] | [600] | [1.3] | Sub-sections |
| Body | [16 to 17 px] | [400] | [1.5] | Paragraphs |
| Small | [14 to 15 px] | [400] | [1.5] | Captions, labels |

The matching CSS is in tokens/typography.css.

Rules

• Keep lines of body text between about 45 and 75 characters.
• Left-align body text. Avoid justified text on screens.
• Use bold for emphasis. Avoid underlines except for links, and avoid all caps for more than a few words.
• [Any rules for numbers, tables or quotes].

---

6. Imagery

Photography

• Style: [e.g. natural light, real places, real work in progress].
• Subjects: [e.g. our customers' products, hands at work, small teams].
• Avoid: [e.g. staged handshakes, people pointing at blank screens, heavy filters].
• People: only use photos of real people with a signed release or a licence that covers your use.
• Sources: [own shoots / named stock libraries with licence notes].

Illustration

• Style: [e.g. flat shapes, two-pixel outlines, brand colours only].
• Where used: [e.g. empty states, onboarding, blog headers].
• Avoid: [e.g. mixing illustration styles on one page].

Icons

• Set: [Icon set name and licence].
• Style: [outline / filled], [stroke width] px stroke, [grid size] px grid.
• Colour: [inherit text colour; brand colour only for active states].
• Icons that act as buttons need a text label or an accessible name.

Image checklist

• We have the right to use it, and the licence is filed at [location].
• Alt text describes what matters in the image, or is empty for purely decorative images.
• Faces and text in the image are not cut off at common crop sizes.
• File is compressed and sized for its slot.

---

7. Layout

• Grid: [e.g. 12 columns on desktop, 4 on mobile, 24 px gutters].
• Maximum content width: [e.g. 1200 px for layouts, 66 characters for reading text].
• Spacing scale: [4, 8, 12, 16, 24, 32, 48, 64, 96 px]. Use only these values. See tokens/typography.css.
• Corner radius: [e.g. 8 px for buttons and inputs, 12 px for cards].
• Breakpoints: [e.g. 640, 768, 1024, 1280 px].
• White space: [e.g. generous; sections separated by at least 64 px on desktop].

Components

| Component | Rule |
|---|---|
| Primary button | [Primary fill, white text, one per view] |
| Secondary button | [Outline in border-strong, text colour] |
| Links | [Link colour, underlined in body text] |
| Form fields | [Border-strong outline, visible label above, error text below] |
| Cards | [Surface-alt background, border, radius-lg] |

---

8. Accessibility

Our minimum standard is [WCAG 2.2 level AA]. In practice:

• Body text and its background reach at least 4.5:1 contrast. Large text and UI boundaries reach at least 3:1.
• Every interactive element has a visible focus style.
• Nothing relies on colour alone.
• Every meaningful image has alt text.
• Videos have captions. Audio has transcripts.
• Animation respects prefers-reduced-motion. Nothing flashes more than three times a second.
• Touch targets are at least [24 by 24 px, 44 by 44 px preferred].
• Text can be zoomed to 200% without losing content.
• Link text says where it goes. No "click here".
• Documents and PDFs we publish are tagged and readable by screen readers.

Accessibility contact: [Name, email].

---

9. Applications

Show one approved example of each and link to the master file.

| Item | Template location | Notes |
|---|---|---|
| Website | [Link] | [Uses tokens from `tokens/`] |
| Email signature | [Link] | [Logo as hosted PNG, no images-only signatures] |
| Slide deck | [Link] | [Title, section, content and closing layouts] |
| Letterhead and documents | [Link] | [Office fonts listed in section 5] |
| Invoice | [Link] | [Legal company name and registration details] |
| Social profile and cover images | [Link] | [See `social-sizes.md`] |
| Business cards | [Link] | [Print specs: size, bleed, stock] |
| Merchandise | [Link] | [Approved colours on fabric] |
| Signage | [Link] | [Minimum viewing sizes] |

Co-branding

• Our logo and a partner's logo sit at equal visual weight, separated by [a thin divider / clear space of 2x].
• Partner logos are only used with written permission and their own guidelines.
• [Who approves co-branded material].

---

10. Contacts and approvals

Who owns what

| Area | Owner | Contact |
|---|---|---|
| Brand guide overall | [Name, role] | [email] |
| Logo and visual identity | [Name] | [email] |
| Copy and voice | [Name] | [email] |
| Website | [Name] | [email] |
| Social channels | [Name] | [email] |

What needs approval

| Type of work | Needs approval? | Approver | Turnaround |
|---|---|---|---|
| Uses approved templates unchanged | No | - | - |
| New marketing asset using the guide | [Yes / No] | [Name] | [2 working days] |
| Logo used by a partner or press | Yes | [Name] | [2 working days] |
| Anything that changes the logo, colours or tagline | Yes | [Name, plus leadership] | [Agreed case by case] |

Where the files live

• Master brand folder: [link]
• Logo files: [link]
• Fonts: [link, with licence]
• Templates: [link]
• This guide, latest version: [link]

Change log

| Version | Date | Change | By |
|---|---|---|---|
| 1.0 | [Date] | First version | [Name] |

Social, favicon and app icon sizes

A reference for exporting profile pictures, banners, share images and icons. Sizes are in pixels, width x height.

Platforms change these often. The values below were a reasonable reference when this kit was written, but networks redesign profiles, change crops and switch between desktop and mobile layouts without notice. Before a launch, check each platform's own help page or upload a test image and look at it on desktop and on a phone.

Rules that save rework

• Design big, export small. Make one master per shape (square, wide banner, vertical) at the largest size you need, then export the rest from it.
• Keep a safe zone. Most banners crop differently on mobile and desktop, and many place the profile picture over the bottom left. Keep logos and text in the central area.
• Profile pictures are usually shown as circles. Keep the symbol inside the middle 70 to 80 percent so corners can be cut off.
• Use the symbol, not the full logo, for profile pictures. The name already appears next to it.
• Text in images: keep it large and short. Many people see your banner at phone width.
• Formats: PNG for logos and flat graphics, JPG for photos. Keep files under each platform's upload limit, which is often a few megabytes.
• Colour: export in sRGB. Other colour profiles can look dull or shifted after upload.

Profile pictures and banners

| Platform | Profile picture | Banner or cover | Notes |
|---|---|---|---|
| X (Twitter) | 400 x 400 | 1500 x 500 | Banner crops top and bottom on some screens. Profile overlaps the banner's lower left. |
| Facebook Page | 320 x 320 or larger | 1640 x 624 recommended upload | Shown around 820 x 312 on desktop and taller and narrower on mobile. Keep content central. |
| Instagram | 320 x 320 | No banner | Shown as a small circle. |
| LinkedIn personal | 400 x 400 | 1584 x 396 | Profile overlaps the banner's lower left. |
| LinkedIn company page | 400 x 400 | 1128 x 191 | Logo is shown square with rounded corners. |
| YouTube | 800 x 800 | 2560 x 1440 | Banner safe area for text and logos is about 1546 x 423, centred. |
| TikTok | 200 x 200 minimum, larger is better | No banner | Shown as a circle. |
| Pinterest | 280 x 280 or larger | Optional cover, 16:9 works well | Shown as a circle. |
| Threads | Uses your Instagram picture | No banner | Change it in Instagram. |
| Bluesky | 1000 x 1000 | 3000 x 1000 | Banner is 3:1. |
| Discord server | 512 x 512 or larger | 960 x 540 | Banner availability depends on server features. |
| WhatsApp Business | 640 x 640 | No banner | Shown as a circle. |
| GitHub organisation | 500 x 500 or larger | No banner | Square, shown with rounded corners in places. |

Post and share images

| Use | Size | Ratio |
|---|---|---|
| Open Graph share image (link previews on most networks and chat apps) | 1200 x 630 | 1.91:1 |
| X single image post | 1600 x 900 | 16:9 |
| Instagram portrait post | 1080 x 1350 | 4:5 |
| Instagram square post | 1080 x 1080 | 1:1 |
| Stories, Reels, TikTok, Shorts (vertical video and images) | 1080 x 1920 | 9:16 |
| LinkedIn shared image | 1200 x 627 | 1.91:1 |
| Pinterest standard pin | 1000 x 1500 | 2:3 |
| YouTube thumbnail | 1280 x 720 | 16:9 |

For vertical video, keep text and logos away from the top and bottom 15 percent and the right edge. Captions, buttons and profile details sit there on most apps.

Instagram has changed how the profile grid crops posts more than once. Check how your posts look in the grid, not only in the feed.

Favicons and website icons

A minimal, modern set that covers current browsers:

| File | Size | Used by |
|---|---|---|
| `favicon.ico` | 32 x 32 (can also hold 16 x 16 and 48 x 48) | Older browsers, tools that request `/favicon.ico` directly |
| `favicon.svg` | Scalable | Current browsers. Can include a dark mode version with a CSS media query inside the SVG. |
| `apple-touch-icon.png` | 180 x 180 | iPhone and iPad home screen. Use a solid background; transparent areas show as black. |
| `icon-192.png` | 192 x 192 | Android home screen, web app manifest |
| `icon-512.png` | 512 x 512 | Web app manifest, install and splash screens |
| `icon-maskable-512.png` | 512 x 512 | Android adaptive icons. Keep the symbol inside the central circle, about 80 percent of the width. |

HTML for the head of every page:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Matching site.webmanifest:

{
  "name": "[Brand name]",
  "short_name": "[Short name]",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-maskable-512.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ],
  "theme_color": "#2453d6",
  "background_color": "#ffffff",
  "display": "standalone"
}

Test at 16 px. If the symbol turns into a smudge, make a simplified version for the smallest sizes.

App icons

| Store or platform | Size | Notes |
|---|---|---|
| Apple App Store | 1024 x 1024 | PNG, no transparency, no rounded corners. The system applies the mask. |
| Google Play listing | 512 x 512 | 32-bit PNG. Google applies the rounded mask and shadow. |
| Android adaptive icon (in the app) | 108 x 108 dp per layer | Keep the symbol inside the central 72 x 72 dp. The device chooses the mask shape. |
| Windows and Microsoft Store | Several sizes from 44 x 44 up | Generate them from a square master of 1024 x 1024 or larger. |

Apple and Google publish their current icon rules in the Human Interface Guidelines and the Android developer documentation. Check them before you submit.

Email and documents

| Use | Size | Notes |
|---|---|---|
| Email signature logo | Display at about 200 x 50, export at 400 x 100 | PNG, hosted on your own domain over HTTPS. Many email apps block images by default, so the signature must make sense without it. |
| Email newsletter header | 600 wide, any height | 600 px is the common safe width. Export at 1200 px for sharp screens. |
| Slide deck | 1920 x 1080 | 16:9 |
| Document letterhead logo | Vector PDF or SVG, or PNG at 300 dpi for the printed size | |

Export checklist

• Master files for square, wide banner and vertical shapes saved in the brand folder.
• Profile picture tested as a circle at small size.
• Banners checked on desktop and phone after upload.
• Open Graph image set on the homepage and key pages, and checked with a share preview tool.
• Favicon set exported, linked in the HTML head and tested at 16 px.
• Apple touch icon has a solid background.
• App icons exported without transparency where the store requires it.
• File names follow your naming rule, for example [brand]-social-x-banner-1500x500.png.

:root {
  --neutral-0: #ffffff;
  --neutral-50: #f7f8fa;
  --neutral-100: #eef0f3;
  --neutral-200: #dde1e7;
  --neutral-300: #c3c9d2;
  --neutral-400: #868e9b;
  --neutral-500: #6b7380;
  --neutral-600: #4f5662;
  --neutral-700: #3a404a;
  --neutral-800: #262a31;
  --neutral-900: #16191e;
  --neutral-950: #0c0e11;

  --brand-primary-300: #8aaaff;
  --brand-primary-500: #2453d6;
  --brand-primary-700: #1b3fa8;
  --brand-secondary-300: #5eead4;
  --brand-secondary-500: #0f766e;
  --brand-secondary-700: #115e59;
  --brand-accent-300: #fb923c;
  --brand-accent-500: #c2410c;
  --brand-accent-700: #9a3412;

  --green-300: #4ade80;
  --green-600: #15803d;
  --amber-300: #fbbf24;
  --amber-600: #b45309;
  --red-300: #f87171;
  --red-600: #b91c1c;
  --sky-300: #38bdf8;
  --sky-600: #0369a1;

  --color-surface: var(--neutral-0);
  --color-surface-alt: var(--neutral-50);
  --color-surface-sunken: var(--neutral-100);
  --color-surface-inverse: var(--neutral-900);
  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-text-subtle: var(--neutral-500);
  --color-text-inverse: var(--neutral-50);
  --color-border: var(--neutral-300);
  --color-border-strong: var(--neutral-400);

  --color-primary: var(--brand-primary-500);
  --color-primary-hover: var(--brand-primary-700);
  --color-on-primary: var(--neutral-0);
  --color-secondary: var(--brand-secondary-500);
  --color-secondary-hover: var(--brand-secondary-700);
  --color-on-secondary: var(--neutral-0);
  --color-accent: var(--brand-accent-500);
  --color-accent-hover: var(--brand-accent-700);
  --color-on-accent: var(--neutral-0);

  --color-link: var(--brand-primary-500);
  --color-link-hover: var(--brand-primary-700);
  --color-focus-ring: var(--brand-primary-500);

  --color-success: var(--green-600);
  --color-warning: var(--amber-600);
  --color-danger: var(--red-600);
  --color-info: var(--sky-600);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface: var(--neutral-900);
    --color-surface-alt: var(--neutral-800);
    --color-surface-sunken: var(--neutral-950);
    --color-surface-inverse: var(--neutral-50);
    --color-text: var(--neutral-50);
    --color-text-muted: var(--neutral-300);
    --color-text-subtle: var(--neutral-400);
    --color-text-inverse: var(--neutral-900);
    --color-border: var(--neutral-600);
    --color-border-strong: var(--neutral-500);

    --color-primary: var(--brand-primary-300);
    --color-primary-hover: var(--neutral-0);
    --color-on-primary: var(--neutral-950);
    --color-secondary: var(--brand-secondary-300);
    --color-secondary-hover: var(--neutral-0);
    --color-on-secondary: var(--neutral-950);
    --color-accent: var(--brand-accent-300);
    --color-accent-hover: var(--neutral-0);
    --color-on-accent: var(--neutral-950);

    --color-link: var(--brand-primary-300);
    --color-link-hover: var(--neutral-0);
    --color-focus-ring: var(--brand-primary-300);

    --color-success: var(--green-300);
    --color-warning: var(--amber-300);
    --color-danger: var(--red-300);
    --color-info: var(--sky-300);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-surface: var(--neutral-900);
  --color-surface-alt: var(--neutral-800);
  --color-surface-sunken: var(--neutral-950);
  --color-surface-inverse: var(--neutral-50);
  --color-text: var(--neutral-50);
  --color-text-muted: var(--neutral-300);
  --color-text-subtle: var(--neutral-400);
  --color-text-inverse: var(--neutral-900);
  --color-border: var(--neutral-600);
  --color-border-strong: var(--neutral-500);

  --color-primary: var(--brand-primary-300);
  --color-primary-hover: var(--neutral-0);
  --color-on-primary: var(--neutral-950);
  --color-secondary: var(--brand-secondary-300);
  --color-secondary-hover: var(--neutral-0);
  --color-on-secondary: var(--neutral-950);
  --color-accent: var(--brand-accent-300);
  --color-accent-hover: var(--neutral-0);
  --color-on-accent: var(--neutral-950);

  --color-link: var(--brand-primary-300);
  --color-link-hover: var(--neutral-0);
  --color-focus-ring: var(--brand-primary-300);

  --color-success: var(--green-300);
  --color-warning: var(--amber-300);
  --color-danger: var(--red-300);
  --color-info: var(--sky-300);

  color-scheme: dark;
}