# Stripe — Design Reference
> silk ribbon over a ledger grid

**Source:** https://stripe.com  
**Theme:** light  
**Category:** Fintech  
**Mood:** light, precise, gradient, elegant, corporate, cool  
**Captured:** 2026-09-13

## Overview

A bright, confident fintech site that reads like a precise financial document with one expensive flourish. Most pages are white or pale blue-grey (#f6f9fc) with navy text. Across them run silky ribbon gradients in orange, magenta, violet and sky blue, set on a diagonal. Faint dashed vertical guide lines show the page grid. What makes it distinctive is the contrast: light, calm, very well-set type sits next to one lush, saturated gradient that feels almost physical, plus dense product-UI mockups that prove the platform is real.

The type is Söhne (sohne-var) throughout. It uses unusual in-between weights: 300 for display headlines and body copy, 425 for links and buttons, and 500 for editorial headings. Large text gets slight negative tracking, and body text gets +0.2px. Headlines are often two-tone: the first sentence is in navy (#061b31) and the rest fades to slate (#425466). Colour is restrained. Deep navies (#0a2540, #0d1738) handle text and dark sections, and blurple (#533afd, #635bff) is the only interactive colour. Corners are tight (4px) on hero buttons and cards, with 16.5px pills for compact CTAs. Shadows are soft and layered, with a blue-grey tint (rgba(50,50,93,.25)). Spacing sits on a 4px grid, and sections are separated by 112–128px of space.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Paper White | `#ffffff` | `--color-bg` | Default page background, white cards and the nav bar area |
| Ledger Mist | `#f6f9fc` | `--color-surface` | Alternate section background (pricing and guide pages), grey half of split cards, sidebar panels |
| Frost Rule | `#e5edf5` | `--color-border` | Hairline dividers, logo-strip borders, dashed grid guides and card outlines |
| Deep Ink | `#061b31` | `--color-text` | Primary text: headline lead sentences, nav links, mobile menu items |
| Harbour Navy | `#0a2540` | `--color-navy` | Headings, dark pill CTA background, dark pricing card |
| Slate Copy | `#425466` | `--color-text-muted` | Body paragraphs, the faded second half of two-tone headlines, secondary labels |
| Stripe Blurple | `#533afd` | `--color-primary` | Main CTA fill (Get started, Contact sales), text links, secondary-button text, menu chevrons |
| Classic Blurple | `#635bff` | `--color-primary-soft` | Compact pill CTAs on content pages, breadcrumb links, feature card fill |
| Lavender Edge | `#b9b9f9` | `--color-primary-border` | 1px border on outlined secondary buttons (Sign up with Google) |
| Midnight Indigo | `#0d1738` | `--color-surface-dark` | Full-bleed dark sections ('The backbone of global commerce', developer blocks) |
| Cobalt Night | `#122054` | `--color-surface-dark-2` | Raised panels and illustration tones inside dark indigo sections |
| Input Fog | `#e6ebf1` | `--color-input` | Filled background for the rounded email input |
| Saffron Tile | `#efa82e` | `--color-accent-warm` | Warm illustration/tile accent that echoes the orange end of the ribbon gradient |
| Lagoon Tile | `#42b0d5` | `--color-accent-cool` | Cool illustration/tile accent that echoes the cyan-blue end of the gradient |

### Semantic roles

| Role | Value |
|---|---|
| background | `#ffffff` |
| surface | `#f6f9fc` |
| surface raised | `#ffffff` |
| border | `#e5edf5` |
| text | `#061b31` |
| text muted | `#425466` |
| primary | `#533afd` |
| primary text | `#ffffff` |
| accent | `#635bff` |

## Tokens — Typography

- **Display:** Söhne (sohne-var) (300, 500) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. Variable Söhne. The hero display uses a light 300 with -0.02em tracking. Article and page H1/H2 use 500 with tight negative tracking. Headlines are often two-tone: navy lead sentence, slate continuation.
- **Body:** Söhne (sohne-var) (200, 300, 400, 425, 500) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. Body copy is 300 weight with +0.2px tracking and a generous 1.56 line height. Links, buttons and strong labels use the in-between 425 weight (CTA font: 425 15px/1.6).
- **Mono:** Source Code Pro (500, 700) — fallbacks: JetBrains Mono, ui-monospace, Menlo, monospace. Used sparingly for code snippets and API samples in developer sections.

| Role | Size | Line height | Weight | Letter spacing | Family |
|---|---|---|---|---|---|
| Article Display | 56px | 1.21 | 500 | -1.12px | display |
| Hero Display | 48px | 1.15 | 300 | -0.96px | display |
| Page H1 | 38px | 1.26 | 500 | -0.2px | display |
| H2 | 34px | 1.29 | 500 | -0.1px | display |
| H3 / Feature Title | 26px | 1.12 | 300 | -0.26px | display |
| Card Title | 22px | 1.1 | 300 | -0.22px | display |
| Body Large | 18px | 1.56 | 300 | 0.2px | body |
| Body / UI | 16px | 1.4 | 300 | normal | body |
| Button / Nav | 15px | 1.6 | 425 | normal | body |
| Code | 14px | 1.5 | 500 | normal | mono |

## Tokens — Spacing & Layout

- **Base unit:** 4px
- **Density:** comfortable
- **Container max width:** 1266px
- **Section gap:** 112px
- **Card padding:** 22px
- **Scale:** 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 112px, 128px

## Tokens — Radius

| Element | Value |
|---|---|
| Hero buttons, small cards, tiles | 4px |
| Compact pill CTAs (Contact sales, Get started) | 16.5px |
| Feature cards, pricing panels | 6px |
| Bordered content cards, sidebar panels, media | 8px |
| Email input | 20px |
| Avatars, icon dots | 50% |

## Tokens — Shadows

| Name | Value | Usage |
|---|---|---|
| Button lift | `rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px` | Small raised controls, tab pills and mockup chips |
| Card float | `rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px` | Pricing cards and product UI mockups floating over gradient backgrounds |
| Deep panel | `rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px` | Large dashboard screenshots and hero device frames |
| Mockup drop | `rgba(3, 3, 39, 0.25) 0px 14.088px 21.132px -14.088px, rgba(0, 0, 0, 0.1) 0px 8.453px 16.906px -8.453px` | Scaled product illustrations inside feature tiles |
| Soft ambient | `rgba(23, 23, 23, 0.08) 0px 15px 35px 0px` | Floating sub-nav pill (Standard pricing / Custom pricing / FAQs), menus |

## Components

### Primary Button (button)

| Property | Value |
|---|---|
| background | `#533afd` |
| color | `#ffffff` |
| border | `none` |
| radius | `4px` |
| padding | `15.5px 24px` |
| font size | `16px` |
| font weight | `400` |
| shadow | `none` |
| hover | `Background darkens slightly and the trailing › chevron nudges ~3px right` |

48px tall hero CTA with a small trailing chevron. Full width on mobile.

### Secondary Outline Button (button)

| Property | Value |
|---|---|
| background | `rgba(255, 255, 255, 0.65)` |
| color | `#533afd` |
| border | `1px solid #b9b9f9` |
| radius | `4px` |
| padding | `14.5px 24px` |
| font size | `16px` |
| font weight | `400` |
| shadow | `none` |
| hover | `Border strengthens towards #533afd and the fill becomes solid white` |

Sits next to the primary button with an 8px gap. The translucent fill lets the ribbon gradient show through. Used for 'Sign up with Google' (with the G logo) and mobile 'Contact sales'.

### Pill CTA (button)

| Property | Value |
|---|---|
| background | `#635bff` |
| color | `#ffffff` |
| border | `none` |
| radius | `16.5px` |
| padding | `3px 12px` |
| font size | `15px` |
| font weight | `425` |
| shadow | `none` |
| hover | `Background shifts to #0a2540 and the chevron slides right` |

33px-tall compact CTA used in the nav and inline on content pages. There is also a navy variant (#0a2540 bg) for 'Contact sales' on customer stories.

### Top Nav (nav)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#061b31` |
| border | `none` |
| radius | `0px` |
| padding | `12px 0px` |
| font size | `14px` |
| font weight | `400` |
| shadow | `none` |
| hover | `Link colour moves to #533afd; dropdown panel fades and scales in beneath` |

76px tall. Wordmark on the left, then Products/Solutions/Developers/Resources with small down-chevrons, then a plain Pricing link. On the right: a Sign in text link (blurple with chevron) and a pill Contact sales. Sits over the hero gradient with no border.

### Email Input (input)

| Property | Value |
|---|---|
| background | `#e6ebf1` |
| color | `#0a2540` |
| border | `none` |
| radius | `20px` |
| padding | `5px 12px` |
| font size | `15px` |
| font weight | `300` |
| shadow | `none` |
| hover | `Focus adds a 2px #533afd-tinted ring` |

36px-tall filled pill with no border and placeholder 'jane@example.com'. Usually paired with a pill CTA.

### Bordered Content Card (card)

| Property | Value |
|---|---|
| background | `#ffffff` |
| color | `#425466` |
| border | `1px solid #e7ecf1` |
| radius | `8px` |
| padding | `22px` |
| font size | `16px` |
| font weight | `300` |
| shadow | `none` |
| hover | `Border darkens slightly; an expand icon button in the corner takes a lavender tint` |

Used for sidebar product cards (bold 425 title, slate body, blurple 'Learn more ›') and home feature tiles that hold a UI mockup on a pastel gradient.

### Pricing Split Card (card)

| Property | Value |
|---|---|
| background | `#ffffff` |
| color | `#0a2540` |
| border | `none` |
| radius | `6px` |
| padding | `24px 24px` |
| font size | `16px` |
| font weight | `300` |
| shadow | `rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px` |
| hover | `none` |

Two halves: copy on white and the price on #f6f9fc, with the price at 26px/500. A dark variant (#0a2540 bg) has stacked tile cells separated by 4px gaps. Both float over a skewed ribbon stripe.

### Stat Figure (other)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#ffffff` |
| border | `none` |
| radius | `0px` |
| padding | `0px` |
| font size | `48px` |
| font weight | `300` |
| shadow | `none` |
| hover | `none` |

Large light-weight numerals (135+, $1.9T, 99.999%, 500M+) with a small slate caption below. On dark indigo sections the numerals are near-white; on white sections they are blurple.

## Layout

A centred column with a max width of about 1266px, framed by faint dashed vertical guide lines that show the underlying column grid. They run the full page height and are visible behind heroes. Heroes are left-aligned with a 48–56px headline that takes about 65% of the width, a small eyebrow stat line above, and a button pair below. A logo strip between hairline rules follows. Feature areas use asymmetric bento grids of bordered tiles holding product mockups. Editorial pages use a narrow left table-of-contents rail and a wide text column, with a right-hand sticky info card near the top. Full-bleed dark indigo bands break up the white rhythm. Sections are separated by 112–128px.

## Imagery

The signature image is a silky, striated ribbon gradient (orange #efa82e tones to magenta to violet to periwinkle) sweeping diagonally from the top right, often cropped. On inner pages the same palette becomes skewed parallelogram stripes that cut across the page at about -8°. Feature tiles show crisp, realistic product UI (dashboards, checkout sheets, cards) floating with blue-tinted shadows on soft pastel gradients. Dark sections use a glowing particle globe or burst in indigo and violet. Customer stories use natural documentary photography and video. Icons are small, line-based and blurple.

## Motion

The motion is smooth and restrained. The hero ribbon animates slowly like a flowing gradient, and the GDP counter ticks live. Button and link chevrons slide a few pixels right on hover. Nav dropdowns fade in and scale from the trigger with a short ease-out. The logo strip auto-scrolls horizontally. Mockups rise gently into view on scroll. Nothing bounces; everything uses soft ease-out curves of about 150–300ms.

## Responsive

On phones the desktop nav collapses to the wordmark plus a white square hamburger button with a blurple icon. Tapping it opens a full-screen white sheet. The toggle becomes a lavender-tinted square with an ×, and the sheet lists Products, Solutions, Developers, Resources, Pricing and Sign in at about 26px/425. Each row is separated by a dashed hairline, and expandable items get blurple › chevrons. A pinned pair of 48px buttons sits at the bottom: filled 'Start now' and outlined 'Contact sales'. The hero headline is shortened to its first sentence at about 40px, and the ribbon gradient is cropped into the top-right corner. Primary and outline buttons stretch to full width and stack with an 8px gap. The logo strip becomes a horizontal scroller between hairlines. Bento tiles collapse to a single column of bordered cards with 24px side gutters.

## Do

- Set headlines in Söhne 300 (display) or 500 (editorial) with slight negative tracking, and make multi-sentence headlines two-tone: navy #061b31 lead, slate #425466 continuation.
- Keep blurple #533afd/#635bff as the only interactive colour, for CTAs, links and chevrons. Add a trailing › chevron to action buttons and links.
- Use the 425 weight for buttons, nav and inline links, and 300 for paragraphs with +0.2px tracking at 18px/1.56.
- Float product UI mockups over pastel or ribbon gradients with the layered blue-tinted shadows (rgba(50,50,93,.25) + rgba(0,0,0,.3)).
- Show the grid with faint dashed vertical guide lines and hairline #e5edf5 dividers, and alternate white with #f6f9fc and dark #0d1738 bands.
- Use tight 4px radii for hero buttons and tiles, and save the 16.5px pill for compact CTAs.

## Don't

- Don't use heavy 700 weights for headlines; the look depends on light 300 and medium 500 Söhne.
- Don't spread gradients across UI chrome, buttons or text blocks. The ribbon gradient is a single decorative object, cropped at an edge or skewed as a stripe.
- Don't use pure black text or neutral grey shadows. Text stays navy or slate, and shadows are tinted blue-violet.
- Don't round cards heavily (16px+) or use chunky borders. Keep 1px #e7ecf1 outlines and 4–8px corners.
- Don't add a second brand hue for CTAs; orange, cyan and magenta appear only in imagery and illustration.
- Don't crowd sections. Keep 112–128px between major blocks and at least 22–24px padding inside cards.

## Agent prompt

> Build a light, precise fintech marketing page in the style of Stripe. Use Söhne (fallback Inter/Helvetica Neue) everywhere and Source Code Pro for code. Hero display is 48px/1.15 weight 300 with -0.96px tracking; editorial H1s are 38–56px weight 500 with -0.2 to -1.12px tracking; H2 is 34px/500; body is 18px/1.56 weight 300 with +0.2px tracking; buttons and links are 15–16px weight 425. Make headlines two-tone: lead sentence #061b31, continuation #425466. Backgrounds are #ffffff alternating with #f6f9fc, with full-bleed dark #0d1738 bands; use hairlines #e5edf5 and faint dashed vertical grid guides. The single interactive colour is blurple #533afd (hero buttons: 4px radius, 15.5px 24px padding, 48px tall, white text, trailing › chevron), with #635bff for 33px pill CTAs (16.5px radius, 3px 12px padding) and a navy #0a2540 pill variant. Outline secondary buttons use rgba(255,255,255,.65) fill, 1px #b9b9f9 border and #533afd text. Cards are white with 1px #e7ecf1 border, 8px radius and 22px padding, or float with the shadow rgba(50,50,93,.25) 0 13px 27px -5px, rgba(0,0,0,.3) 0 8px 16px -8px. Inputs are filled #e6ebf1 pills with 20px radius. Decorate with one silky diagonal ribbon gradient (orange #efa82e to magenta to violet to periwinkle), cropped at the top right, or as skewed stripes behind pricing cards, plus crisp product UI mockups on pastel tiles. Spacing is a 4px grid, with a max width of about 1266px and 112–128px between sections. Motion is subtle: chevrons slide on hover and dropdowns fade and scale. On mobile, use a hamburger that opens a full-screen white menu with dashed dividers and pinned full-width buttons.

## CSS custom properties

```css
/* Stripe — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg: #ffffff; /* Default page background, white cards and the nav bar area */
  --color-surface: #f6f9fc; /* Alternate section background (pricing and guide pages), grey half of split cards, sidebar panels */
  --color-border: #e5edf5; /* Hairline dividers, logo-strip borders, dashed grid guides and card outlines */
  --color-text: #061b31; /* Primary text: headline lead sentences, nav links, mobile menu items */
  --color-navy: #0a2540; /* Headings, dark pill CTA background, dark pricing card */
  --color-text-muted: #425466; /* Body paragraphs, the faded second half of two-tone headlines, secondary labels */
  --color-primary: #533afd; /* Main CTA fill (Get started, Contact sales), text links, secondary-button text, menu chevrons */
  --color-primary-soft: #635bff; /* Compact pill CTAs on content pages, breadcrumb links, feature card fill */
  --color-primary-border: #b9b9f9; /* 1px border on outlined secondary buttons (Sign up with Google) */
  --color-surface-dark: #0d1738; /* Full-bleed dark sections ('The backbone of global commerce', developer blocks) */
  --color-surface-dark-2: #122054; /* Raised panels and illustration tones inside dark indigo sections */
  --color-input: #e6ebf1; /* Filled background for the rounded email input */
  --color-accent-warm: #efa82e; /* Warm illustration/tile accent that echoes the orange end of the ribbon gradient */
  --color-accent-cool: #42b0d5; /* Cool illustration/tile accent that echoes the cyan-blue end of the gradient */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #f6f9fc;
  --surface-raised: #ffffff;
  --border: #e5edf5;
  --text: #061b31;
  --text-muted: #425466;
  --primary: #533afd;
  --primary-text: #ffffff;
  --accent: #635bff;

  /* Typography */
  --font-display: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --text-article-display: 56px;
  --text-article-display--line-height: 1.21;
  --text-article-display--letter-spacing: -1.12px;
  --text-article-display--font-weight: 500;
  --text-hero-display: 48px;
  --text-hero-display--line-height: 1.15;
  --text-hero-display--letter-spacing: -0.96px;
  --text-hero-display--font-weight: 300;
  --text-page-h1: 38px;
  --text-page-h1--line-height: 1.26;
  --text-page-h1--letter-spacing: -0.2px;
  --text-page-h1--font-weight: 500;
  --text-h2: 34px;
  --text-h2--line-height: 1.29;
  --text-h2--letter-spacing: -0.1px;
  --text-h2--font-weight: 500;
  --text-h3-feature-title: 26px;
  --text-h3-feature-title--line-height: 1.12;
  --text-h3-feature-title--letter-spacing: -0.26px;
  --text-h3-feature-title--font-weight: 300;
  --text-card-title: 22px;
  --text-card-title--line-height: 1.1;
  --text-card-title--letter-spacing: -0.22px;
  --text-card-title--font-weight: 300;
  --text-body-large: 18px;
  --text-body-large--line-height: 1.56;
  --text-body-large--letter-spacing: 0.2px;
  --text-body-large--font-weight: 300;
  --text-body-ui: 16px;
  --text-body-ui--line-height: 1.4;
  --text-body-ui--letter-spacing: normal;
  --text-body-ui--font-weight: 300;
  --text-button-nav: 15px;
  --text-button-nav--line-height: 1.6;
  --text-button-nav--letter-spacing: normal;
  --text-button-nav--font-weight: 425;
  --text-code: 14px;
  --text-code--line-height: 1.5;
  --text-code--letter-spacing: normal;
  --text-code--font-weight: 500;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 112px;
  --space-11: 128px;
  --container: 1266px;
  --section-gap: 112px;

  /* Radius */
  --radius-hero-buttons-small-cards-tiles: 4px;
  --radius-compact-pill-ctas-contact-sales-get-started: 16.5px;
  --radius-feature-cards-pricing-panels: 6px;
  --radius-bordered-content-cards-sidebar-panels-media: 8px;
  --radius-email-input: 20px;
  --radius-avatars-icon-dots: 50%;

  /* Shadows */
  --shadow-button-lift: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --shadow-card-float: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  --shadow-deep-panel: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
  --shadow-mockup-drop: rgba(3, 3, 39, 0.25) 0px 14.088px 21.132px -14.088px, rgba(0, 0, 0, 0.1) 0px 8.453px 16.906px -8.453px;
  --shadow-soft-ambient: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
}
```

## Tailwind v4 theme

```css
/* Stripe — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg: #ffffff;
  --color-surface: #f6f9fc;
  --color-border: #e5edf5;
  --color-text: #061b31;
  --color-navy: #0a2540;
  --color-text-muted: #425466;
  --color-primary: #533afd;
  --color-primary-soft: #635bff;
  --color-primary-border: #b9b9f9;
  --color-surface-dark: #0d1738;
  --color-surface-dark-2: #122054;
  --color-input: #e6ebf1;
  --color-accent-warm: #efa82e;
  --color-accent-cool: #42b0d5;
  --color-background: #ffffff;
  --color-surface: #f6f9fc;
  --color-surface-raised: #ffffff;
  --color-border: #e5edf5;
  --color-text: #061b31;
  --color-text-muted: #425466;
  --color-primary: #533afd;
  --color-primary-text: #ffffff;
  --color-accent: #635bff;
  --font-display: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --text-article-display: 56px;
  --text-article-display--line-height: 1.21;
  --text-article-display--letter-spacing: -1.12px;
  --text-article-display--font-weight: 500;
  --text-hero-display: 48px;
  --text-hero-display--line-height: 1.15;
  --text-hero-display--letter-spacing: -0.96px;
  --text-hero-display--font-weight: 300;
  --text-page-h1: 38px;
  --text-page-h1--line-height: 1.26;
  --text-page-h1--letter-spacing: -0.2px;
  --text-page-h1--font-weight: 500;
  --text-h2: 34px;
  --text-h2--line-height: 1.29;
  --text-h2--letter-spacing: -0.1px;
  --text-h2--font-weight: 500;
  --text-h3-feature-title: 26px;
  --text-h3-feature-title--line-height: 1.12;
  --text-h3-feature-title--letter-spacing: -0.26px;
  --text-h3-feature-title--font-weight: 300;
  --text-card-title: 22px;
  --text-card-title--line-height: 1.1;
  --text-card-title--letter-spacing: -0.22px;
  --text-card-title--font-weight: 300;
  --text-body-large: 18px;
  --text-body-large--line-height: 1.56;
  --text-body-large--letter-spacing: 0.2px;
  --text-body-large--font-weight: 300;
  --text-body-ui: 16px;
  --text-body-ui--line-height: 1.4;
  --text-body-ui--letter-spacing: normal;
  --text-body-ui--font-weight: 300;
  --text-button-nav: 15px;
  --text-button-nav--line-height: 1.6;
  --text-button-nav--letter-spacing: normal;
  --text-button-nav--font-weight: 425;
  --text-code: 14px;
  --text-code--line-height: 1.5;
  --text-code--letter-spacing: normal;
  --text-code--font-weight: 500;
  --radius-hero-buttons-small-cards-tiles: 4px;
  --radius-compact-pill-ctas-contact-sales-get-started: 16.5px;
  --radius-feature-cards-pricing-panels: 6px;
  --radius-bordered-content-cards-sidebar-panels-media: 8px;
  --radius-email-input: 20px;
  --radius-avatars-icon-dots: 50%;
  --shadow-button-lift: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --shadow-card-float: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  --shadow-deep-panel: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
  --shadow-mockup-drop: rgba(3, 3, 39, 0.25) 0px 14.088px 21.132px -14.088px, rgba(0, 0, 0, 0.1) 0px 8.453px 16.906px -8.453px;
  --shadow-soft-ambient: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
  --container-site: 1266px;
}
```