SuperDev Pro

# Design brief: the SuperDev Pro design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/07091153/superdevpro-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07091153/superdevpro-com-featured.webp
- On DesignMunk: https://designmunk.com/superdev-pro/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# SuperDev Pro: Mint CTAs on a Dark-Grid Hero

## Overview

SuperDev Pro targets developers and designers who value speed and utility over ornament. The tone is technical, confident, and minimal. The UI feels light-mode by default, with a contrasting dark hero to frame the pitch. Layouts are compact yet readable, favoring dense information blocks, simple cards, and one consistent CTA style to keep momentum.

## Colors

- **primary (#1c1917):** Deep ink for headlines, body text, and dark hero panels.
- **secondary (#91f05b):** Bright lime accent for highlights, deals, or supportive emphasis.
- **tertiary (#a7e68f):** Mint used for primary actions and key CTAs.
- **neutral (#ffffff):** Paper-white canvas for pages and cards.
- **border (#e5e7eb):** Light dividers, card outlines, inputs, and section separators.
- **brand-military-green (#647c3c):** Olive accent for brand flourishes, badges, or subtle fills.
- **surface (#ffffff):** Alias of Neutral; default component background.
- **on-surface (#1c1917):** Alias of Primary; default text on light surfaces.

## Typography

- Albert Sans (Google): single family across headings and body. Freely available via Google Fonts. Substitutes with similar geometry and x-height: Inter, Manrope, or Plus Jakarta Sans.
- Headline LG: 52px, 700, 1.04, letter-spacing -0.03em — use for hero claims.
- Headline MD: 41px, 700, 1.01, -0.018em — section leads (Features, Pricing).
- Headline SM: 32px, 700, 1.15, -0.02em — card titles or major list items.
- Headline XS: 25px, 600, 1.2 — feature titles and FAQ questions.
- Body MD: 20px, 400, 1.55 — paragraph copy, testimonials, pricing bullets.

## Layout

- Spacing scale: 8, 18, 26, 40, 64px. Use 64px for section spacing, 40px for major block gaps, 26px for card padding or grid gutters, 18px for compact clusters, 8px for micro-gaps.
- Grid behavior: stack into one column on narrow screens; on desktop, use multi-column cards and feature grids with consistent 26px gutters.
- Content rhythm: headings sit close to their copy (18–26px), while sections breathe with 40–64px top/bottom margins.

## Elevation & Depth

Shadows are minimal by design: only a small green glow is measured (rgba(22,163,74,0.4) 0 0 8 0) and is reserved for accent elements like the primary CTA. Most hierarchy is conveyed with tonal contrast (dark hero vs. light surface), crisp borders (#e5e7eb), and whitespace from the spacing scale.

## Shapes

Corners default to 8px (rounded.sm) for buttons and cards, signaling approachable utility without softness. Link-style buttons are square (0px radius) to read as text actions rather than components.

## Components

Buttons and cards
- Primary Button: background #a7e68f, text #0b1d0b, 8px radius, 10×16 padding, height 38px; may use the small green glow shadow for prominence.
- Secondary Button: text #1c1917, 8px radius, 10×16 padding, height 38px; no fill by default.
- Link Button: text #15803d, 0px radius; inline calls to explore tools or docs.
- Card: white background (#ffffff), text #1c1917, 8px radius, 16px padding; rely on #e5e7eb borders if separation is needed.

### Top Navigation Bar
Compact masthead with brand at left, links, and two actions at right. Use Body MD (20px) for items; primary navigation spacing at 18–26px. The install and lifetime-access actions adopt button tokens above.

### Hero Module
Dark panel using Primary (#1c1917) with white text (#ffffff). Headline LG (52px/700/-0.03em), supporting Body MD (20px). Primary CTA uses the mint button and the small glow; trust row and subcopy stack with 8–18px gaps.

### Numbered Feature List
Section lead in Headline MD (41px). Each feature title in Headline XS (25px/600) with Body MD details. Lay out as a responsive grid using 26px gutters; keep cards on white with border separators.

### Toolkit Link List
A dense list of text actions styled as Link Buttons (#15803d, 0px radius). Use 18px vertical rhythm and wrap onto new lines; underline or hover affordances should be text-driven, not boxy.

### Pricing Cards
Three Card components side-by-side on desktop with 26px gutters. Titles in Headline SM (32px), price in Headline MD (41px), features in Body MD (20px). Primary CTA uses the mint button; rely on #e5e7eb borders for emphasis, not heavy shadows.

### Reviews Grid
Quotes in Body MD with author lines styled subtly in On-Surface (#1c1917). Arrange as cards on Surface white with 16px padding and 8px radius; use 40–64px section spacing.

### FAQ Accordion
Questions in Headline XS (25px/600), answers in Body MD. Use #e5e7eb dividers between items and 18–26px internal spacing.

## Do's and Don'ts

- Do reserve #a7e68f for the primary action so the CTA remains uniquely identifiable.
- Do keep button height at 38px with 10×16 padding and 8px corners for consistency.
- Do use Headline LG (52px/700/-0.03em) only for the main hero message; step down to 41px and 32px thereafter.
- Do separate dense lists with #e5e7eb borders and 26px gutters instead of large shadows.
- Don't mix additional font families; Albert Sans carries headings and body.
- Don't round components beyond 8px or introduce new glow/shadow styles.

## Agent Prompt Guide

Quick reference — text/background/border/accent
- Text: #1c1917
- Background: #ffffff
- Border: #e5e7eb
- Accent (Primary CTA): #a7e68f

1) Build a hero banner
- Container: full-width section on #1c1917 with inner max-width grid and 64px vertical padding.
- Heading: Albert Sans 700, 52px, line-height 1.04, letter-spacing -0.03em, color #ffffff.
- Body: Albert Sans 400, 20px/1.55, color #ffffff.
- Primary CTA: 38px height, 10×16 padding, background #a7e68f, text #0b1d0b, radius 8px, shadow rgba(22,163,74,0.4) 0px 0px 8px 0px.

2) Create a 3-up feature grid
- Section background #ffffff with 64px top and bottom spacing.
- Each card: background #ffffff, border 1px solid #e5e7eb, radius 8px, padding 16px.
- Title: Albert Sans 700, 25px/1.2; Body: 20px/1.55, color #1c1917.
- Grid gutters: 26px; section gap above/below: 40px.

3) Pricing section with consistent CTAs
- Three cards using the card token (white, 16px padding, 8px radius, #1c1917 text).
- Plan title: 32px/700; Price: 41px/700; Bullets: 20px/1.55.
- Primary button per plan: background #a7e68f, text #0b1d0b, 38px height, 10×16 padding, radius 8px.
- Use #e5e7eb borders; no large shadows.

4) FAQ accordion
- Container on #ffffff with 64px section padding.
- Question row: 25px/600, color #1c1917, bottom border 1px solid #e5e7eb, 18–26px vertical padding.
- Answer: 20px/1.55, color #1c1917; spacing 18px between items.

## Similar Brands

- Raycast — developer-centric site with a single sans family and crisp CTAs; Raycast skews darker overall and uses higher motion than this page.
- Arc Browser — bold headline rhythm and soft rounded buttons; Arc is more playful in color, while SuperDev Pro stays utilitarian mint-and-ink.
- Polypane — dense feature communication with dark hero contrast; Polypane leans heavier on illustrations than this text-first approach.
- Wappalyzer — tool-driven marketing with straightforward cards and pricing; Wappalyzer's palette shifts purple where SuperDev Pro uses greens.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #1c1917;
  --color-secondary: #91f05b;
  --color-tertiary: #a7e68f;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-military-green: #647c3c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 52px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.04;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 41px;
  --text-headline-md-weight: 700;
  --text-headline-md-leading: 1.01;
  --text-headline-md-tracking: -0.018em;
  --text-headline-sm-size: 32px;
  --text-headline-sm-weight: 700;
  --text-headline-sm-leading: 1.15;
  --text-headline-sm-tracking: -0.02em;
  --text-headline-xs-size: 25px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 20px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.55;
  --font-albert-sans: "Albert Sans";

  /* Rounded */
  --radius-sm: 8px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 18px;
  --spacing-md: 26px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #0b1d0b;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 10px 16px;
  --button-primary-height: 38px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 10px 16px;
  --button-secondary-height: 38px;
  --button-link-text-color: #15803d;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #1c1917;
  --color-secondary: #91f05b;
  --color-tertiary: #a7e68f;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-military-green: #647c3c;
  --color-surface: #ffffff;
  --color-on-surface: #1c1917;
  --font-headline-lg: "Albert Sans";
  --font-headline-md: "Albert Sans";
  --font-headline-sm: "Albert Sans";
  --font-headline-xs: "Albert Sans";
  --font-body-md: "Albert Sans";
  --text-headline-lg: 52px;
  --text-headline-md: 41px;
  --text-headline-sm: 32px;
  --text-headline-xs: 25px;
  --text-body-md: 20px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.018em;
  --tracking-headline-sm: -0.02em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 700;
  --font-weight-headline-sm: 700;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --spacing-xs: 8px;
  --spacing-sm: 18px;
  --spacing-md: 26px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.11,
                    0.098,
                    0.09
                ],
                "hex": "#1c1917"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.569,
                    0.941,
                    0.357
                ],
                "hex": "#91f05b"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.655,
                    0.902,
                    0.561
                ],
                "hex": "#a7e68f"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-military-green": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.392,
                    0.486,
                    0.235
                ],
                "hex": "#647c3c"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.11,
                    0.098,
                    0.09
                ],
                "hex": "#1c1917"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 18,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 26,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 64,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Albert Sans",
                "fontSize": {
                    "value": 52,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Albert Sans",
                "fontSize": {
                    "value": 41,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.018,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Albert Sans",
                "fontSize": {
                    "value": 32,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Albert Sans",
                "fontSize": {
                    "value": 25,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Albert Sans",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as SuperDev Pro**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

---
version: alpha
name: SuperDev Pro
description: One extension replaces your browser toolbox—no clutter, no context switching.
colors:
  primary: "#1c1917"
  secondary: "#91f05b"
  tertiary: "#a7e68f"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-military-green: "#647c3c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Albert Sans
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.04
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Albert Sans
    fontSize: 41px
    fontWeight: 700
    lineHeight: 1.01
    letterSpacing: -0.018em
  headline-sm:
    fontFamily: Albert Sans
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.02em
  headline-xs:
    fontFamily: Albert Sans
    fontSize: 25px
    fontWeight: 600
    lineHeight: 1.2
  body-md:
    fontFamily: Albert Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
rounded:
  sm: 8px
spacing:
  xs: 8px
  sm: 18px
  md: 26px
  lg: 40px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#0b1d0b"
    rounded: "{rounded.sm}"
    padding: 10px 16px
    height: 38px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
    height: 38px
  button-link:
    textColor: "#15803d"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# SuperDev Pro: Mint CTAs on a Dark-Grid Hero

## Overview

SuperDev Pro targets developers and designers who value speed and utility over ornament. The tone is technical, confident, and minimal. The UI feels light-mode by default, with a contrasting dark hero to frame the pitch. Layouts are compact yet readable, favoring dense information blocks, simple cards, and one consistent CTA style to keep momentum.

## Colors

- **primary (#1c1917):** Deep ink for headlines, body text, and dark hero panels.
- **secondary (#91f05b):** Bright lime accent for highlights, deals, or supportive emphasis.
- **tertiary (#a7e68f):** Mint used for primary actions and key CTAs.
- **neutral (#ffffff):** Paper-white canvas for pages and cards.
- **border (#e5e7eb):** Light dividers, card outlines, inputs, and section separators.
- **brand-military-green (#647c3c):** Olive accent for brand flourishes, badges, or subtle fills.
- **surface (#ffffff):** Alias of Neutral; default component background.
- **on-surface (#1c1917):** Alias of Primary; default text on light surfaces.

## Typography

- Albert Sans (Google): single family across headings and body. Freely available via Google Fonts. Substitutes with similar geometry and x-height: Inter, Manrope, or Plus Jakarta Sans.
- Headline LG: 52px, 700, 1.04, letter-spacing -0.03em — use for hero claims.
- Headline MD: 41px, 700, 1.01, -0.018em — section leads (Features, Pricing).
- Headline SM: 32px, 700, 1.15, -0.02em — card titles or major list items.
- Headline XS: 25px, 600, 1.2 — feature titles and FAQ questions.
- Body MD: 20px, 400, 1.55 — paragraph copy, testimonials, pricing bullets.

## Layout

- Spacing scale: 8, 18, 26, 40, 64px. Use 64px for section spacing, 40px for major block gaps, 26px for card padding or grid gutters, 18px for compact clusters, 8px for micro-gaps.
- Grid behavior: stack into one column on narrow screens; on desktop, use multi-column cards and feature grids with consistent 26px gutters.
- Content rhythm: headings sit close to their copy (18–26px), while sections breathe with 40–64px top/bottom margins.

## Elevation & Depth

Shadows are minimal by design: only a small green glow is measured (rgba(22,163,74,0.4) 0 0 8 0) and is reserved for accent elements like the primary CTA. Most hierarchy is conveyed with tonal contrast (dark hero vs. light surface), crisp borders (#e5e7eb), and whitespace from the spacing scale.

## Shapes

Corners default to 8px (rounded.sm) for buttons and cards, signaling approachable utility without softness. Link-style buttons are square (0px radius) to read as text actions rather than components.

## Components

Buttons and cards
- Primary Button: background #a7e68f, text #0b1d0b, 8px radius, 10×16 padding, height 38px; may use the small green glow shadow for prominence.
- Secondary Button: text #1c1917, 8px radius, 10×16 padding, height 38px; no fill by default.
- Link Button: text #15803d, 0px radius; inline calls to explore tools or docs.
- Card: white background (#ffffff), text #1c1917, 8px radius, 16px padding; rely on #e5e7eb borders if separation is needed.

### Top Navigation Bar
Compact masthead with brand at left, links, and two actions at right. Use Body MD (20px) for items; primary navigation spacing at 18–26px. The install and lifetime-access actions adopt button tokens above.

### Hero Module
Dark panel using Primary (#1c1917) with white text (#ffffff). Headline LG (52px/700/-0.03em), supporting Body MD (20px). Primary CTA uses the mint button and the small glow; trust row and subcopy stack with 8–18px gaps.

### Numbered Feature List
Section lead in Headline MD (41px). Each feature title in Headline XS (25px/600) with Body MD details. Lay out as a responsive grid using 26px gutters; keep cards on white with border separators.

### Toolkit Link List
A dense list of text actions styled as Link Buttons (#15803d, 0px radius). Use 18px vertical rhythm and wrap onto new lines; underline or hover affordances should be text-driven, not boxy.

### Pricing Cards
Three Card components side-by-side on desktop with 26px gutters. Titles in Headline SM (32px), price in Headline MD (41px), features in Body MD (20px). Primary CTA uses the mint button; rely on #e5e7eb borders for emphasis, not heavy shadows.

### Reviews Grid
Quotes in Body MD with author lines styled subtly in On-Surface (#1c1917). Arrange as cards on Surface white with 16px padding and 8px radius; use 40–64px section spacing.

### FAQ Accordion
Questions in Headline XS (25px/600), answers in Body MD. Use #e5e7eb dividers between items and 18–26px internal spacing.

## Do's and Don'ts

- Do reserve #a7e68f for the primary action so the CTA remains uniquely identifiable.
- Do keep button height at 38px with 10×16 padding and 8px corners for consistency.
- Do use Headline LG (52px/700/-0.03em) only for the main hero message; step down to 41px and 32px thereafter.
- Do separate dense lists with #e5e7eb borders and 26px gutters instead of large shadows.
- Don't mix additional font families; Albert Sans carries headings and body.
- Don't round components beyond 8px or introduce new glow/shadow styles.

## Agent Prompt Guide

Quick reference — text/background/border/accent
- Text: #1c1917
- Background: #ffffff
- Border: #e5e7eb
- Accent (Primary CTA): #a7e68f

1) Build a hero banner
- Container: full-width section on #1c1917 with inner max-width grid and 64px vertical padding.
- Heading: Albert Sans 700, 52px, line-height 1.04, letter-spacing -0.03em, color #ffffff.
- Body: Albert Sans 400, 20px/1.55, color #ffffff.
- Primary CTA: 38px height, 10×16 padding, background #a7e68f, text #0b1d0b, radius 8px, shadow rgba(22,163,74,0.4) 0px 0px 8px 0px.

2) Create a 3-up feature grid
- Section background #ffffff with 64px top and bottom spacing.
- Each card: background #ffffff, border 1px solid #e5e7eb, radius 8px, padding 16px.
- Title: Albert Sans 700, 25px/1.2; Body: 20px/1.55, color #1c1917.
- Grid gutters: 26px; section gap above/below: 40px.

3) Pricing section with consistent CTAs
- Three cards using the card token (white, 16px padding, 8px radius, #1c1917 text).
- Plan title: 32px/700; Price: 41px/700; Bullets: 20px/1.55.
- Primary button per plan: background #a7e68f, text #0b1d0b, 38px height, 10×16 padding, radius 8px.
- Use #e5e7eb borders; no large shadows.

4) FAQ accordion
- Container on #ffffff with 64px section padding.
- Question row: 25px/600, color #1c1917, bottom border 1px solid #e5e7eb, 18–26px vertical padding.
- Answer: 20px/1.55, color #1c1917; spacing 18px between items.

## Similar Brands

- Raycast — developer-centric site with a single sans family and crisp CTAs; Raycast skews darker overall and uses higher motion than this page.
- Arc Browser — bold headline rhythm and soft rounded buttons; Arc is more playful in color, while SuperDev Pro stays utilitarian mint-and-ink.
- Polypane — dense feature communication with dark hero contrast; Polypane leans heavier on illustrations than this text-first approach.
- Wappalyzer — tool-driven marketing with straightforward cards and pricing; Wappalyzer's palette shifts purple where SuperDev Pro uses greens.

:root {
  /* Colors */
  --color-primary: #1c1917;
  --color-secondary: #91f05b;
  --color-tertiary: #a7e68f;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-military-green: #647c3c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 52px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.04;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 41px;
  --text-headline-md-weight: 700;
  --text-headline-md-leading: 1.01;
  --text-headline-md-tracking: -0.018em;
  --text-headline-sm-size: 32px;
  --text-headline-sm-weight: 700;
  --text-headline-sm-leading: 1.15;
  --text-headline-sm-tracking: -0.02em;
  --text-headline-xs-size: 25px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 20px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.55;
  --font-albert-sans: "Albert Sans";

  /* Rounded */
  --radius-sm: 8px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 18px;
  --spacing-md: 26px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #0b1d0b;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 10px 16px;
  --button-primary-height: 38px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 10px 16px;
  --button-secondary-height: 38px;
  --button-link-text-color: #15803d;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "One extension replaces your browser toolbox—no clutter, no context switching.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.11,
          0.098,
          0.09
        ],
        "hex": "#1c1917"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.569,
          0.941,
          0.357
        ],
        "hex": "#91f05b"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.655,
          0.902,
          0.561
        ],
        "hex": "#a7e68f"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.906,
          0.922
        ],
        "hex": "#e5e7eb"
      }
    },
    "brand-military-green": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.392,
          0.486,
          0.235
        ],
        "hex": "#647c3c"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.11,
          0.098,
          0.09
        ],
        "hex": "#1c1917"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 26,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 64,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Albert Sans",
        "fontSize": {
          "value": 52,
          "unit": "px"
        },
        "fontWeight": 700,
        "letterSpacing": {
          "value": -0.03,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Albert Sans",
        "fontSize": {
          "value": 41,
          "unit": "px"
        },
        "fontWeight": 700,
        "letterSpacing": {
          "value": -0.018,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Albert Sans",
        "fontSize": {
          "value": 32,
          "unit": "px"
        },
        "fontWeight": 700,
        "letterSpacing": {
          "value": -0.02,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Albert Sans",
        "fontSize": {
          "value": 25,
          "unit": "px"
        },
        "fontWeight": 600
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Albert Sans",
        "fontSize": {
          "value": 20,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}

@theme {
  --color-primary: #1c1917;
  --color-secondary: #91f05b;
  --color-tertiary: #a7e68f;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-military-green: #647c3c;
  --color-surface: #ffffff;
  --color-on-surface: #1c1917;
  --font-headline-lg: "Albert Sans";
  --font-headline-md: "Albert Sans";
  --font-headline-sm: "Albert Sans";
  --font-headline-xs: "Albert Sans";
  --font-body-md: "Albert Sans";
  --text-headline-lg: 52px;
  --text-headline-md: 41px;
  --text-headline-sm: 32px;
  --text-headline-xs: 25px;
  --text-body-md: 20px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.018em;
  --tracking-headline-sm: -0.02em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 700;
  --font-weight-headline-sm: 700;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --spacing-xs: 8px;
  --spacing-sm: 18px;
  --spacing-md: 26px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;
}