Qonto Careers

# Design brief: the Qonto Careers 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/12090723/qonto-com-en-careers-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/12090723/qonto-com-en-careers-featured.webp
- On DesignMunk: https://designmunk.com/qonto-careers-page/

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

# Qonto: One Black CTA and an Overlapping Team Photo Stack

## Overview

Qonto's careers UI is disciplined, monochrome, and businesslike. White canvas, black text, and restrained greys keep focus on roles and locations. Spacing is generous and consistent, with centered heroes and grid-based lists below the fold. The feel is serious and efficient rather than playful, optimised for quick scanning and decisive action.

## Colors

- **primary (#000000):** Primary ink for headlines, CTAs, and icons.
- **secondary (#1c1c1c):** Subdued ink for overlines, muted headings, and hover states.
- **neutral (#ffffff):** Page canvas, cards, and image backgrounds.
- **border (#e5e7eb):** Hairline dividers, table and list separators, input outlines.
- **brand-dover-grey (#848484):** Secondary text, metadata, helper copy.
- **surface ({colors.neutral}):** Default surface for sections and cards.
- **on-surface ({colors.primary}):** Default text and icon colour on white surfaces.

## Typography

All text styles use QontoSans (custom). As a self-hosted family, it may not be directly available to agents; if unavailable, substitute with Inter, IBM Plex Sans, or Source Sans 3 for similar x-height and sober tone. Headline levels: headline-lg 72/700/1.11 for top-of-page heroes; headline-md 56/600/1.14 for section intros; headline-sm 24/600/1.33 for subheads and card titles; headline-xs 18/600/1.22 for list headings and accordions. Body copy uses body-md 16/400/1.75 for paragraphs, FAQs, and metadata.

## Layout

Spacing follows a sparse rhythm: xs 6px for tight clusters, sm 16px for inner padding, md 40px for element gaps, lg 56px for section breathing, xl 100px for hero and sectional offsets. A centered, wide content column sits within a responsive 12-column grid. Lists and benefits use 2–3 column grids on desktop, collapsing progressively with sm padding. Images are anchored to the grid and often overlap within the same column span for visual interest.

## Elevation & Depth

Depth is minimal. A soft sm shadow (rgba(29,29,27,0.06) 0px 3px 6px) is reserved for interactive or floating media like the hero photo collage. Most hierarchy is handled through whitespace, tonal contrast (black on white), and #e5e7eb borders for separation. Larger shadows are intentionally absent to keep the page crisp and lightweight.

## Shapes

Radius sm is 8px and is applied consistently to buttons, cards, images, and chips. Corners communicate approachability without feeling playful, aligning the hiring tone with the product brand. Links and text-only elements remain square to maintain contrast in the shape language.

## Components

Buttons
- Primary: white text on a black fill; height 52px; padding 11px 16px; radius 8px. One per major section is typical.
- Secondary: same sizing and radius as primary; invert or reduce contrast when used on dark media.
- Link: text-only, underline on hover; square corners.

Card
- White surface, black text, 16px padding, 8px radius. Optional sm shadow for media-heavy cards.

### Recruitment Hero
- Uses headline-lg (72px/700) centered on white. One primary button beneath. Below, a 3-image collage with 8px corners and sm shadow overlaps to suggest team life.

### Job Filters Bar
- Compact row with "View all filters" and two dropdowns. Use border #e5e7eb outlines, 8px radius, body-md text. Spacing sm inside, md between controls.

### Job List Item
- Title in headline-xs (18/600), metadata in brand-dover-grey (#848484). Items separated by a 1px #e5e7eb divider; full row is clickable.

### Culture Pillars Banner
- Short section with a bold three-word line in headline-sm and a link. Wide lg–xl spacing above/below.

### Benefits Tiles
- 3-column grid. Each tile is a simple card: 16px padding, 8px radius, black heading (headline-xs) and body-md copy; no heavy iconography required.

### Diversity Metrics Strip
- Large numerals as headline-md or headline-sm depending on density, with supporting label in brand-dover-grey. Cards are borderless on white; rely on spacing.

### FAQ Accordion
- Headers in headline-xs (18/600), content in body-md. Divided by #e5e7eb borders; no shadows; 8px radius only if presented as standalone cards.

## Do's and Don'ts

- Do keep a single, high-contrast primary button per section; use #000000 fill with #ffffff text and 8px radius.
- Do use #e5e7eb dividers instead of heavy shadows for lists and FAQs.
- Do reserve brand-dover-grey (#848484) for metadata, captions, and helper text to protect contrast.
- Do clip photos and media to 8px radius and keep ample lg–xl whitespace around the collage.
- Don't introduce new accent colours; the palette is strictly black, white, and greys.
- Don't exceed md (40px) internal gaps inside compact components; larger gaps are for section spacing, not within list items.

## Agent Prompt Guide

Quick colour reference
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent/Muted text: #848484

1) Build the centered hero
"Create a full-width hero on #ffffff with a centered H1 using Inter, 72px, weight 700, line-height 1.11, colour #000000. Add a primary button below: 52px height, 11px 16px padding, 8px radius, background #000000, text #ffffff. Place a 3-image collage beneath with 8px rounded corners and a shadow rgba(29,29,27,0.06) 0 3px 6px."

2) Job filters row and results count
"Add a top filters bar on #ffffff with two dropdown chips (Inter 16/400). Each chip: 8px radius, 1px border #e5e7eb, inner padding 8px 12px, text #000000, muted labels #848484. Space controls by 40px. Show a results count in #848484 to the right."

3) Job list
"Render a vertical list of roles. Each row: title in Inter 18px, weight 600, colour #000000; metadata (team, location, contract) in Inter 16px, colour #848484. Separate rows with a 1px divider #e5e7eb; no card background; full-row hover uses #1c1c1c at 4% tint."

4) Benefits grid
"Create a 3-column grid on desktop (collapse to 1 on mobile) with cards: background #ffffff, 1px border #e5e7eb, 8px radius, 16px padding. Headings Inter 18/600, body Inter 16/400/1.75. Use 40px gaps between cards and 56px section margins."

## Similar Brands

- N26: Similar monochrome discipline and generous whitespace; Qonto leans more on borders and a single strong CTA.
- Wise: Clean sans and transactional clarity; Wise uses more colour accents, while Qonto stays strictly black/white.
- Revolut Business: Minimal layout and tight typography; Revolut brings gradients, Qonto opts for flat surfaces.
- Monzo Business: Friendly sans and accessible content structure; Monzo uses warmer colour accents where Qonto maintains grayscale.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #1c1c1c;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-dover-grey: #848484;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 72px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.11;
  --text-headline-md-size: 56px;
  --text-headline-md-weight: 600;
  --text-headline-md-leading: 1.14;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-leading: 1.33;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.75;
  --font-qontosans: "QontoSans";

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

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 40px;
  --spacing-lg: 56px;
  --spacing-xl: 100px;

  /* Components */
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 11px 16px;
  --button-primary-height: 52px;
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 11px 16px;
  --button-secondary-height: 52px;
  --button-link-text-color: var(--color-primary);
  --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: #000000;
  --color-secondary: #1c1c1c;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-dover-grey: #848484;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "QontoSans";
  --font-headline-md: "QontoSans";
  --font-headline-sm: "QontoSans";
  --font-headline-xs: "QontoSans";
  --font-body-md: "QontoSans";
  --text-headline-lg: 72px;
  --text-headline-md: 56px;
  --text-headline-sm: 24px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 600;
  --font-weight-headline-sm: 600;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 40px;
  --spacing-lg: 56px;
  --spacing-xl: 100px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.11,
                    0.11,
                    0.11
                ],
                "hex": "#1c1c1c"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-dover-grey": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.518,
                    0.518,
                    0.518
                ],
                "hex": "#848484"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 56,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 100,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "QontoSans",
                "fontSize": {
                    "value": 72,
                    "unit": "px"
                },
                "fontWeight": 700
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "QontoSans",
                "fontSize": {
                    "value": 56,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "QontoSans",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "QontoSans",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "QontoSans",
                "fontSize": {
                    "value": 16,
                    "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 Qonto Careers**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

---
version: alpha
name: Qonto
description: All-in-one business account with compliant e-invoicing, zero effort
colors:
  primary: "#000000"
  secondary: "#1c1c1c"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-dover-grey: "#848484"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: QontoSans
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.11
  headline-md:
    fontFamily: QontoSans
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.14
  headline-sm:
    fontFamily: QontoSans
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
  headline-xs:
    fontFamily: QontoSans
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: QontoSans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.75
rounded:
  sm: 8px
spacing:
  xs: 6px
  sm: 16px
  md: 40px
  lg: 56px
  xl: 100px
components:
  button-primary:
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 11px 16px
    height: 52px
  button-secondary:
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 11px 16px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Qonto: One Black CTA and an Overlapping Team Photo Stack

## Overview

Qonto's careers UI is disciplined, monochrome, and businesslike. White canvas, black text, and restrained greys keep focus on roles and locations. Spacing is generous and consistent, with centered heroes and grid-based lists below the fold. The feel is serious and efficient rather than playful, optimised for quick scanning and decisive action.

## Colors

- **primary (#000000):** Primary ink for headlines, CTAs, and icons.
- **secondary (#1c1c1c):** Subdued ink for overlines, muted headings, and hover states.
- **neutral (#ffffff):** Page canvas, cards, and image backgrounds.
- **border (#e5e7eb):** Hairline dividers, table and list separators, input outlines.
- **brand-dover-grey (#848484):** Secondary text, metadata, helper copy.
- **surface ({colors.neutral}):** Default surface for sections and cards.
- **on-surface ({colors.primary}):** Default text and icon colour on white surfaces.

## Typography

All text styles use QontoSans (custom). As a self-hosted family, it may not be directly available to agents; if unavailable, substitute with Inter, IBM Plex Sans, or Source Sans 3 for similar x-height and sober tone. Headline levels: headline-lg 72/700/1.11 for top-of-page heroes; headline-md 56/600/1.14 for section intros; headline-sm 24/600/1.33 for subheads and card titles; headline-xs 18/600/1.22 for list headings and accordions. Body copy uses body-md 16/400/1.75 for paragraphs, FAQs, and metadata.

## Layout

Spacing follows a sparse rhythm: xs 6px for tight clusters, sm 16px for inner padding, md 40px for element gaps, lg 56px for section breathing, xl 100px for hero and sectional offsets. A centered, wide content column sits within a responsive 12-column grid. Lists and benefits use 2–3 column grids on desktop, collapsing progressively with sm padding. Images are anchored to the grid and often overlap within the same column span for visual interest.

## Elevation & Depth

Depth is minimal. A soft sm shadow (rgba(29,29,27,0.06) 0px 3px 6px) is reserved for interactive or floating media like the hero photo collage. Most hierarchy is handled through whitespace, tonal contrast (black on white), and #e5e7eb borders for separation. Larger shadows are intentionally absent to keep the page crisp and lightweight.

## Shapes

Radius sm is 8px and is applied consistently to buttons, cards, images, and chips. Corners communicate approachability without feeling playful, aligning the hiring tone with the product brand. Links and text-only elements remain square to maintain contrast in the shape language.

## Components

Buttons
- Primary: white text on a black fill; height 52px; padding 11px 16px; radius 8px. One per major section is typical.
- Secondary: same sizing and radius as primary; invert or reduce contrast when used on dark media.
- Link: text-only, underline on hover; square corners.

Card
- White surface, black text, 16px padding, 8px radius. Optional sm shadow for media-heavy cards.

### Recruitment Hero
- Uses headline-lg (72px/700) centered on white. One primary button beneath. Below, a 3-image collage with 8px corners and sm shadow overlaps to suggest team life.

### Job Filters Bar
- Compact row with "View all filters" and two dropdowns. Use border #e5e7eb outlines, 8px radius, body-md text. Spacing sm inside, md between controls.

### Job List Item
- Title in headline-xs (18/600), metadata in brand-dover-grey (#848484). Items separated by a 1px #e5e7eb divider; full row is clickable.

### Culture Pillars Banner
- Short section with a bold three-word line in headline-sm and a link. Wide lg–xl spacing above/below.

### Benefits Tiles
- 3-column grid. Each tile is a simple card: 16px padding, 8px radius, black heading (headline-xs) and body-md copy; no heavy iconography required.

### Diversity Metrics Strip
- Large numerals as headline-md or headline-sm depending on density, with supporting label in brand-dover-grey. Cards are borderless on white; rely on spacing.

### FAQ Accordion
- Headers in headline-xs (18/600), content in body-md. Divided by #e5e7eb borders; no shadows; 8px radius only if presented as standalone cards.

## Do's and Don'ts

- Do keep a single, high-contrast primary button per section; use #000000 fill with #ffffff text and 8px radius.
- Do use #e5e7eb dividers instead of heavy shadows for lists and FAQs.
- Do reserve brand-dover-grey (#848484) for metadata, captions, and helper text to protect contrast.
- Do clip photos and media to 8px radius and keep ample lg–xl whitespace around the collage.
- Don't introduce new accent colours; the palette is strictly black, white, and greys.
- Don't exceed md (40px) internal gaps inside compact components; larger gaps are for section spacing, not within list items.

## Agent Prompt Guide

Quick colour reference
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent/Muted text: #848484

1) Build the centered hero
"Create a full-width hero on #ffffff with a centered H1 using Inter, 72px, weight 700, line-height 1.11, colour #000000. Add a primary button below: 52px height, 11px 16px padding, 8px radius, background #000000, text #ffffff. Place a 3-image collage beneath with 8px rounded corners and a shadow rgba(29,29,27,0.06) 0 3px 6px."

2) Job filters row and results count
"Add a top filters bar on #ffffff with two dropdown chips (Inter 16/400). Each chip: 8px radius, 1px border #e5e7eb, inner padding 8px 12px, text #000000, muted labels #848484. Space controls by 40px. Show a results count in #848484 to the right."

3) Job list
"Render a vertical list of roles. Each row: title in Inter 18px, weight 600, colour #000000; metadata (team, location, contract) in Inter 16px, colour #848484. Separate rows with a 1px divider #e5e7eb; no card background; full-row hover uses #1c1c1c at 4% tint."

4) Benefits grid
"Create a 3-column grid on desktop (collapse to 1 on mobile) with cards: background #ffffff, 1px border #e5e7eb, 8px radius, 16px padding. Headings Inter 18/600, body Inter 16/400/1.75. Use 40px gaps between cards and 56px section margins."

## Similar Brands

- N26: Similar monochrome discipline and generous whitespace; Qonto leans more on borders and a single strong CTA.
- Wise: Clean sans and transactional clarity; Wise uses more colour accents, while Qonto stays strictly black/white.
- Revolut Business: Minimal layout and tight typography; Revolut brings gradients, Qonto opts for flat surfaces.
- Monzo Business: Friendly sans and accessible content structure; Monzo uses warmer colour accents where Qonto maintains grayscale.

:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #1c1c1c;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-dover-grey: #848484;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 72px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.11;
  --text-headline-md-size: 56px;
  --text-headline-md-weight: 600;
  --text-headline-md-leading: 1.14;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-leading: 1.33;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.75;
  --font-qontosans: "QontoSans";

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

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 40px;
  --spacing-lg: 56px;
  --spacing-xl: 100px;

  /* Components */
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 11px 16px;
  --button-primary-height: 52px;
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 11px 16px;
  --button-secondary-height: 52px;
  --button-link-text-color: var(--color-primary);
  --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": "All-in-one business account with compliant e-invoicing, zero effort",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.11,
          0.11,
          0.11
        ],
        "hex": "#1c1c1c"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.906,
          0.922
        ],
        "hex": "#e5e7eb"
      }
    },
    "brand-dover-grey": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.518,
          0.518,
          0.518
        ],
        "hex": "#848484"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 56,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 100,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "QontoSans",
        "fontSize": {
          "value": 72,
          "unit": "px"
        },
        "fontWeight": 700
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "QontoSans",
        "fontSize": {
          "value": 56,
          "unit": "px"
        },
        "fontWeight": 600
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "QontoSans",
        "fontSize": {
          "value": 24,
          "unit": "px"
        },
        "fontWeight": 600
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "QontoSans",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 600
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "QontoSans",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}

@theme {
  --color-primary: #000000;
  --color-secondary: #1c1c1c;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-dover-grey: #848484;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "QontoSans";
  --font-headline-md: "QontoSans";
  --font-headline-sm: "QontoSans";
  --font-headline-xs: "QontoSans";
  --font-body-md: "QontoSans";
  --text-headline-lg: 72px;
  --text-headline-md: 56px;
  --text-headline-sm: 24px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 600;
  --font-weight-headline-sm: 600;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 40px;
  --spacing-lg: 56px;
  --spacing-xl: 100px;
}