Oberion Careers

# Design brief: the Oberion 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/12082758/oberion-framer-ai-careers-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/12082758/oberion-framer-ai-careers-featured.webp
- On DesignMunk: https://designmunk.com/oberion-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

# Oberion: Hiring Page Driven by Switzer and One Purple CTA

## Overview

Oberion speaks to finance and revenue teams with an assured, minimal voice. The UI should feel modern, serious, and low-noise: spacious sections, type-led hierarchy, and a single accent color used sparingly. Defaults favor white surfaces with near-black text for high readability. Interactions are precise rather than expressive; motion and shadows are subtle.

## Colors

- **primary (#231014):** Near-black text for headlines, body, and icons on light backgrounds.
- **tertiary (#5f17b6):** Accent for primary CTAs, highlights, and small badges.
- **neutral (#ffffff):** Base canvas for pages and cards.
- **border (#e5e7eb):** Hairline rules, card outlines, and dividers.
- **surface (#ffffff):** Surfaces for sections and containers on the light theme.
- **on-surface (#231014):** Default text color when placed on surface and neutral backgrounds.

## Typography

- Switzer (custom/self-hosted): the core family for headlines and body. Since it is not from Google Fonts, agents should not assume they can load it directly. Substitutes with similar geometry: Inter (Google), Manrope (Google), Plus Jakarta Sans (Google).
- Headline LG (Switzer 54px/500, LH 1, letter-spacing -0.05em): page H1s and marquee statements.
- Headline MD (Switzer 40px/500, LH 1.2, -0.027em): section leads and key CTAs.
- Headline SM (system sans 29px/500, LH 1.21): sub-section titles or card titles where system stack performance is preferred.
- Headline XS (Switzer 22px/500, LH 1.09, -0.009em): labels, badges, compact headings.
- Body MD (Switzer 16px/400, LH 1.5): paragraphs, metadata, and navigational text.

## Layout

Spacing scales map to page rhythm: xs 4px for fine alignment, sm 14px for inline gaps and small paddings, md 28px for grid gutters and card spacing, lg 60px for section padding, xl 100px for hero top/bottom. Use a 12-column responsive grid with md (28px) gutters. Keep sections single-purpose and separated by lg or xl spacing. Images can run edge-to-edge within the content container; text width should remain comfortable and left-aligned.

## Elevation & Depth

Depth is restrained. Prefer the border color (#e5e7eb) and whitespace to separate blocks. Use shadow sm for hover states and images; md is reserved for overlays or floating panels. Large shadow tokens are disabled (none), reinforcing a flat, editorial feel.

## Shapes

A concise corner language: 4px on interactive controls and badges; 8px on larger containers, cards, and media. Avoid mixing radii on adjacent elements; keep a single radius per cluster to maintain visual discipline.

## Components

Buttons
- Primary: background #5f17b6, text #0000ee, 4px radius, 19×25px padding, 49px height. Use for the main action per view only.
- Secondary: text #231014, 4px radius, 19×25px padding, 49px height. Treat as ghost/outline; pair with a subtle border #e5e7eb when needed.
- Link: text #231014, 0px radius. For inline and tertiary actions.

Card
- White background, #231014 text, 8px radius, 16px padding. Add border #e5e7eb for list groupings; apply shadow sm sparingly.

### Top Navigation Bar
- Left-aligned logotype, center links, right-aligned primary CTA. Padding: sm (14px) vertical, md (28px) horizontal. CTA uses the Primary button spec.

### Hiring Badge
- Compact pill preceding the H1. Use Body MD (16px/400) with a small colored dot in #5f17b6 and 4px radius.

### Careers Hero
- H1 set in Headline LG; supporting copy in Body MD. Primary CTA below. Vertical spacing: xl above/below the block.

### Culture Photo Banner
- Full-width image container with 8px radius inside the content column. Optional shadow sm; no border.

### Benefits Grid
- 3- or 4-column responsive grid with md (28px) gaps. Each item is a Card with a short title in Headline XS and copy in Body MD.

### Roles List
- Stacked list of openings. Each row: 8px radius container, md vertical padding, bottom border #e5e7eb. Title in Headline XS; meta (location/type) in Body MD; trailing Link button for Apply.

### Demo CTA Banner
- Slim section with Headline MD, one Primary button, and lg (60px) vertical padding. Use a white surface; avoid extra shadows.

### Newsletter Bar
- Inline email input (4px radius) + Primary button. Section padding lg; divider rules in #e5e7eb to isolate from footer.

## Do's and Don'ts

- Do reserve #5f17b6 for the single most important action in a view; keep secondary actions as text or ghost buttons.
- Do use lg (60px) or xl (100px) spacing to separate major sections; avoid stacking cards without at least md (28px) gaps.
- Do keep headings at weight 500 as specified; avoid bolder weights that upset the calm tone.
- Don't introduce new radii; stick to 4px for controls and 8px for containers.
- Don't rely on heavy shadows for separation; prefer #e5e7eb borders and whitespace.
- Don't mix alternative accent colors; the palette is intentionally minimal.

## Agent Prompt Guide

Quick color reference
- Text: #231014
- Background: #ffffff
- Border: #e5e7eb
- Accent: #5f17b6

1) Build a careers hero
- Container: background #ffffff, padding-top/bottom 100px.
- H1: font-family 'Switzer', Inter, system-ui; size 54px; weight 500; line-height 1; letter-spacing -0.05em; color #231014.
- Subcopy: size 16px; weight 400; line-height 1.5; color #231014; max-width ~65ch.
- Primary CTA: background #5f17b6; text #0000ee; height 49px; padding 19px 25px; border-radius 4px.

2) Create a benefits grid
- Grid: 12 columns, gap 28px; section padding 60px.
- Card: background #ffffff; text #231014; padding 16px; border-radius 8px; border 1px solid #e5e7eb; optional shadow sm.
- Title: 22px, 500; Body: 16px/1.5.

3) Top navigation with CTA
- Bar: background #ffffff; padding 14px 28px; links in #231014 at 16px.
- Right CTA uses Primary button spec (bg #5f17b6, text #0000ee, radius 4px).

4) Job listing rows
- Stack items with 1px bottom border #e5e7eb; container padding 28px; border-radius 8px for hover states with shadow sm.
- Role title: 22px/500; meta: 16px/1.5; trailing Apply as Link button (#231014).

5) Newsletter bar
- Section: border-top 1px solid #e5e7eb; padding 60px.
- Input: 4px radius, 16px text; Button: Primary spec.

## Similar Brands

- Stripe — similarly sparse, type-led layouts; Stripe leans into motion and gradients where Oberion stays flat and monochrome.
- Paddle — clean billing-focused UI with restrained palettes; Paddle uses more illustrations versus Oberion's photo-first sections.
- Chargebee — businesslike typography and quiet borders; Chargebee's color usage is broader, while Oberion keeps a single accent.
- Ramp — serious finance tone with near-black text; Ramp employs stronger contrast blocks and dark themes, while Oberion holds to light surfaces.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #231014;
  --color-tertiary: #5f17b6;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 54px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.05em;
  --text-headline-md-size: 40px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.027em;
  --text-headline-sm-size: 29px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 22px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.09;
  --text-headline-xs-tracking: -0.009em;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-switzer: "Switzer";
  --font-sans-serif: "sans-serif";

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

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 14px;
  --spacing-md: 28px;
  --spacing-lg: 60px;
  --spacing-xl: 100px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #0000ee;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 19px 25px;
  --button-primary-height: 49px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 19px 25px;
  --button-secondary-height: 49px;
  --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-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #231014;
  --color-tertiary: #5f17b6;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-on-surface: #231014;
  --font-headline-lg: "Switzer";
  --font-headline-md: "Switzer";
  --font-headline-sm: "sans-serif";
  --font-headline-xs: "Switzer";
  --font-body-md: "Switzer";
  --text-headline-lg: 54px;
  --text-headline-md: 40px;
  --text-headline-sm: 29px;
  --text-headline-xs: 22px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.05em;
  --tracking-headline-md: -0.027em;
  --tracking-headline-xs: -0.009em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 14px;
  --spacing-md: 28px;
  --spacing-lg: 60px;
  --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.137,
                    0.063,
                    0.078
                ],
                "hex": "#231014"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.373,
                    0.09,
                    0.714
                ],
                "hex": "#5f17b6"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.137,
                    0.063,
                    0.078
                ],
                "hex": "#231014"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 28,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 60,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 100,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Switzer",
                "fontSize": {
                    "value": 54,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.05,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Switzer",
                "fontSize": {
                    "value": 40,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.027,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans-serif",
                "fontSize": {
                    "value": 29,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Switzer",
                "fontSize": {
                    "value": 22,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.009,
                    "unit": "em"
                }
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Switzer",
                "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 Oberion Careers**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

---
version: alpha
name: Oberion
description: Unify billing, collections, and revenue recognition into one intelligent platform.
colors:
  primary: "#231014"
  tertiary: "#5f17b6"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Switzer
    fontSize: 54px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.05em
  headline-md:
    fontFamily: Switzer
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.027em
  headline-sm:
    fontFamily: sans-serif
    fontSize: 29px
    fontWeight: 500
    lineHeight: 1.21
  headline-xs:
    fontFamily: Switzer
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.09
    letterSpacing: -0.009em
  body-md:
    fontFamily: Switzer
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 4px
  sm: 14px
  md: 28px
  lg: 60px
  xl: 100px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#0000ee"
    rounded: "{rounded.sm}"
    padding: 19px 25px
    height: 49px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 19px 25px
    height: 49px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Oberion: Hiring Page Driven by Switzer and One Purple CTA

## Overview

Oberion speaks to finance and revenue teams with an assured, minimal voice. The UI should feel modern, serious, and low-noise: spacious sections, type-led hierarchy, and a single accent color used sparingly. Defaults favor white surfaces with near-black text for high readability. Interactions are precise rather than expressive; motion and shadows are subtle.

## Colors

- **primary (#231014):** Near-black text for headlines, body, and icons on light backgrounds.
- **tertiary (#5f17b6):** Accent for primary CTAs, highlights, and small badges.
- **neutral (#ffffff):** Base canvas for pages and cards.
- **border (#e5e7eb):** Hairline rules, card outlines, and dividers.
- **surface (#ffffff):** Surfaces for sections and containers on the light theme.
- **on-surface (#231014):** Default text color when placed on surface and neutral backgrounds.

## Typography

- Switzer (custom/self-hosted): the core family for headlines and body. Since it is not from Google Fonts, agents should not assume they can load it directly. Substitutes with similar geometry: Inter (Google), Manrope (Google), Plus Jakarta Sans (Google).
- Headline LG (Switzer 54px/500, LH 1, letter-spacing -0.05em): page H1s and marquee statements.
- Headline MD (Switzer 40px/500, LH 1.2, -0.027em): section leads and key CTAs.
- Headline SM (system sans 29px/500, LH 1.21): sub-section titles or card titles where system stack performance is preferred.
- Headline XS (Switzer 22px/500, LH 1.09, -0.009em): labels, badges, compact headings.
- Body MD (Switzer 16px/400, LH 1.5): paragraphs, metadata, and navigational text.

## Layout

Spacing scales map to page rhythm: xs 4px for fine alignment, sm 14px for inline gaps and small paddings, md 28px for grid gutters and card spacing, lg 60px for section padding, xl 100px for hero top/bottom. Use a 12-column responsive grid with md (28px) gutters. Keep sections single-purpose and separated by lg or xl spacing. Images can run edge-to-edge within the content container; text width should remain comfortable and left-aligned.

## Elevation & Depth

Depth is restrained. Prefer the border color (#e5e7eb) and whitespace to separate blocks. Use shadow sm for hover states and images; md is reserved for overlays or floating panels. Large shadow tokens are disabled (none), reinforcing a flat, editorial feel.

## Shapes

A concise corner language: 4px on interactive controls and badges; 8px on larger containers, cards, and media. Avoid mixing radii on adjacent elements; keep a single radius per cluster to maintain visual discipline.

## Components

Buttons
- Primary: background #5f17b6, text #0000ee, 4px radius, 19×25px padding, 49px height. Use for the main action per view only.
- Secondary: text #231014, 4px radius, 19×25px padding, 49px height. Treat as ghost/outline; pair with a subtle border #e5e7eb when needed.
- Link: text #231014, 0px radius. For inline and tertiary actions.

Card
- White background, #231014 text, 8px radius, 16px padding. Add border #e5e7eb for list groupings; apply shadow sm sparingly.

### Top Navigation Bar
- Left-aligned logotype, center links, right-aligned primary CTA. Padding: sm (14px) vertical, md (28px) horizontal. CTA uses the Primary button spec.

### Hiring Badge
- Compact pill preceding the H1. Use Body MD (16px/400) with a small colored dot in #5f17b6 and 4px radius.

### Careers Hero
- H1 set in Headline LG; supporting copy in Body MD. Primary CTA below. Vertical spacing: xl above/below the block.

### Culture Photo Banner
- Full-width image container with 8px radius inside the content column. Optional shadow sm; no border.

### Benefits Grid
- 3- or 4-column responsive grid with md (28px) gaps. Each item is a Card with a short title in Headline XS and copy in Body MD.

### Roles List
- Stacked list of openings. Each row: 8px radius container, md vertical padding, bottom border #e5e7eb. Title in Headline XS; meta (location/type) in Body MD; trailing Link button for Apply.

### Demo CTA Banner
- Slim section with Headline MD, one Primary button, and lg (60px) vertical padding. Use a white surface; avoid extra shadows.

### Newsletter Bar
- Inline email input (4px radius) + Primary button. Section padding lg; divider rules in #e5e7eb to isolate from footer.

## Do's and Don'ts

- Do reserve #5f17b6 for the single most important action in a view; keep secondary actions as text or ghost buttons.
- Do use lg (60px) or xl (100px) spacing to separate major sections; avoid stacking cards without at least md (28px) gaps.
- Do keep headings at weight 500 as specified; avoid bolder weights that upset the calm tone.
- Don't introduce new radii; stick to 4px for controls and 8px for containers.
- Don't rely on heavy shadows for separation; prefer #e5e7eb borders and whitespace.
- Don't mix alternative accent colors; the palette is intentionally minimal.

## Agent Prompt Guide

Quick color reference
- Text: #231014
- Background: #ffffff
- Border: #e5e7eb
- Accent: #5f17b6

1) Build a careers hero
- Container: background #ffffff, padding-top/bottom 100px.
- H1: font-family 'Switzer', Inter, system-ui; size 54px; weight 500; line-height 1; letter-spacing -0.05em; color #231014.
- Subcopy: size 16px; weight 400; line-height 1.5; color #231014; max-width ~65ch.
- Primary CTA: background #5f17b6; text #0000ee; height 49px; padding 19px 25px; border-radius 4px.

2) Create a benefits grid
- Grid: 12 columns, gap 28px; section padding 60px.
- Card: background #ffffff; text #231014; padding 16px; border-radius 8px; border 1px solid #e5e7eb; optional shadow sm.
- Title: 22px, 500; Body: 16px/1.5.

3) Top navigation with CTA
- Bar: background #ffffff; padding 14px 28px; links in #231014 at 16px.
- Right CTA uses Primary button spec (bg #5f17b6, text #0000ee, radius 4px).

4) Job listing rows
- Stack items with 1px bottom border #e5e7eb; container padding 28px; border-radius 8px for hover states with shadow sm.
- Role title: 22px/500; meta: 16px/1.5; trailing Apply as Link button (#231014).

5) Newsletter bar
- Section: border-top 1px solid #e5e7eb; padding 60px.
- Input: 4px radius, 16px text; Button: Primary spec.

## Similar Brands

- Stripe — similarly sparse, type-led layouts; Stripe leans into motion and gradients where Oberion stays flat and monochrome.
- Paddle — clean billing-focused UI with restrained palettes; Paddle uses more illustrations versus Oberion's photo-first sections.
- Chargebee — businesslike typography and quiet borders; Chargebee's color usage is broader, while Oberion keeps a single accent.
- Ramp — serious finance tone with near-black text; Ramp employs stronger contrast blocks and dark themes, while Oberion holds to light surfaces.

:root {
  /* Colors */
  --color-primary: #231014;
  --color-tertiary: #5f17b6;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 54px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.05em;
  --text-headline-md-size: 40px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.027em;
  --text-headline-sm-size: 29px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 22px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.09;
  --text-headline-xs-tracking: -0.009em;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-switzer: "Switzer";
  --font-sans-serif: "sans-serif";

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

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 14px;
  --spacing-md: 28px;
  --spacing-lg: 60px;
  --spacing-xl: 100px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #0000ee;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 19px 25px;
  --button-primary-height: 49px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 19px 25px;
  --button-secondary-height: 49px;
  --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-md);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Unify billing, collections, and revenue recognition into one intelligent platform.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.137,
          0.063,
          0.078
        ],
        "hex": "#231014"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.373,
          0.09,
          0.714
        ],
        "hex": "#5f17b6"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.906,
          0.922
        ],
        "hex": "#e5e7eb"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.137,
          0.063,
          0.078
        ],
        "hex": "#231014"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 60,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 100,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Switzer",
        "fontSize": {
          "value": 54,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.05,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Switzer",
        "fontSize": {
          "value": 40,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.027,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "sans-serif",
        "fontSize": {
          "value": 29,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Switzer",
        "fontSize": {
          "value": 22,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.009,
          "unit": "em"
        }
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Switzer",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}

@theme {
  --color-primary: #231014;
  --color-tertiary: #5f17b6;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-on-surface: #231014;
  --font-headline-lg: "Switzer";
  --font-headline-md: "Switzer";
  --font-headline-sm: "sans-serif";
  --font-headline-xs: "Switzer";
  --font-body-md: "Switzer";
  --text-headline-lg: 54px;
  --text-headline-md: 40px;
  --text-headline-sm: 29px;
  --text-headline-xs: 22px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.05em;
  --tracking-headline-md: -0.027em;
  --tracking-headline-xs: -0.009em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 14px;
  --spacing-md: 28px;
  --spacing-lg: 60px;
  --spacing-xl: 100px;
}