# Design Language: v0 by Vercel - Build Full-Stack Web Apps with AI

> Extracted from `https://v0.dev` on June 25, 2026
> 2535 elements analyzed

This document describes the complete design language of the website. It is structured for AI/LLM consumption — use it to faithfully recreate the visual design in any framework.

## Color Palette

### Neutral Colors

| Hex | HSL | Usage Count |
|-----|-----|-------------|
| `#d2d2d2` | hsl(0, 0%, 82%) | 2468 |
| `#020202` | hsl(0, 0%, 1%) | 1695 |
| `#222222` | hsl(0, 0%, 13%) | 839 |
| `#ffffff` | hsl(0, 0%, 100%) | 160 |
| `#f4f4f4` | hsl(0, 0%, 96%) | 78 |
| `#343434` | hsl(0, 0%, 20%) | 62 |
| `#646464` | hsl(0, 0%, 39%) | 6 |
| `#e2e2e2` | hsl(0, 0%, 89%) | 3 |
| `#959595` | hsl(0, 0%, 58%) | 2 |

### Background Colors

Used on large-area elements: `#f4f4f4`, `#ffffff`, `#e2e2e2`

### Text Colors

Text color palette: `#000000`, `#020202`, `#222222`, `#ffffff`, `#646464`, `#343434`

### Gradients

```css
background-image: linear-gradient(to right, oklch(1 0 0) 0%, rgba(0, 0, 0, 0) 100%);
```

```css
background-image: linear-gradient(to left, oklch(1 0 0) 0%, rgba(0, 0, 0, 0) 100%);
```

```css
background-image: linear-gradient(in oklab, rgba(255, 255, 255, 0.3) 0%, rgba(102, 102, 102, 0.3) 100%);
```

```css
background-image: linear-gradient(to right, oklab(1 0 0 / 0.8) 0%, rgba(0, 0, 0, 0) 50%, oklab(1 0 0 / 0.8) 100%);
```

```css
background-image: linear-gradient(oklab(1 0 0 / 0.8) 0%, rgba(0, 0, 0, 0) 50%, oklab(1 0 0 / 0.8) 100%);
```

### Full Color Inventory

| Hex | Contexts | Count |
|-----|----------|-------|
| `#d2d2d2` | border, background | 2468 |
| `#020202` | text, border, background | 1695 |
| `#222222` | text | 839 |
| `#ffffff` | background, text | 160 |
| `#f4f4f4` | background | 78 |
| `#343434` | text | 62 |
| `#646464` | text | 6 |
| `#e2e2e2` | border, background | 3 |
| `#959595` | border | 2 |

## Typography

### Font Families

- **GeistSans** — used for all (2368 elements)
- **GeistMono** — used for body (6 elements)
- **Times** — used for body (4 elements)

### Type Scale

| Size (px) | Size (rem) | Weight | Line Height | Letter Spacing | Used On |
|-----------|------------|--------|-------------|----------------|---------|
| 48px | 3rem | 600 | 56px | -2.88px | h3, br, h2, span |
| 32px | 2rem | 600 | 40px | -1.28px | h1, h2 |
| 24px | 1.5rem | 600 | 32px | -0.96px | h2 |
| 20px | 1.25rem | 600 | 26px | -0.4px | h3 |
| 18px | 1.125rem | 400 | 28px | normal | p |
| 16px | 1rem | 400 | 24px | normal | html, head, meta, link |
| 14px | 0.875rem | 500 | 20px | normal | a, svg, path, span |
| 13px | 0.8125rem | 500 | 19.5px | normal | button, div, span, svg |
| 10px | 0.625rem | 400 | 15px | normal | span |

### Heading Scale

```css
h3 { font-size: 48px; font-weight: 600; line-height: 56px; }
h1 { font-size: 32px; font-weight: 600; line-height: 40px; }
h2 { font-size: 24px; font-weight: 600; line-height: 32px; }
h3 { font-size: 20px; font-weight: 600; line-height: 26px; }
h2 { font-size: 14px; font-weight: 500; line-height: 20px; }
```

### Body Text

```css
body { font-size: 13px; font-weight: 500; line-height: 19.5px; }
```

### Font Weights in Use

`400` (2314x), `500` (206x), `600` (15x)

## Spacing

**Base unit:** 4px

| Token | Value | Rem |
|-------|-------|-----|
| spacing-1 | 1px | 0.0625rem |
| spacing-64 | 64px | 4rem |
| spacing-96 | 96px | 6rem |
| spacing-108 | 108px | 6.75rem |
| spacing-128 | 128px | 8rem |
| spacing-192 | 192px | 12rem |
| spacing-208 | 208px | 13rem |

## Border Radii

| Label | Value | Count |
|-------|-------|-------|
| sm | 4px | 23 |
| md | 8px | 114 |
| lg | 12px | 22 |
| lg | 16px | 10 |
| full | 35px | 1 |

## Box Shadows

**sm** — blur: 0px
```css
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
```

**sm** — blur: 0px
```css
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
```

**sm** — blur: 0px
```css
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 1px 0px;
```

**sm** — blur: 0px
```css
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
```

**xs** — blur: 1px
```css
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 4px 8px -4px, rgba(0, 0, 0, 0.06) 0px 16px 24px -8px;
```

## CSS Custom Properties

### Colors

```css
--sh-string: #00e7c1;
--fides-overlay-primary-color: #2b2e35;
--fides-overlay-background-color: #f7fafc;
--fides-overlay-embed-background-color: transparent;
--fides-overlay-font-color: #4a5568;
--fides-overlay-font-color-dark: #2d3748;
--fides-overlay-hover-color: #edf2f7;
--fides-overlay-gpc-applied-background-color: #38a169;
--fides-overlay-gpc-applied-text-color: #fff;
--fides-overlay-gpc-overridden-background-color: #e53e3e;
--fides-overlay-gpc-overridden-text-color: #fff;
--fides-overlay-brand-link-logo-color: #2b2e35;
--fides-overlay-background-dark-color: #e2e8f0;
--fides-overlay-background-error-color: #f7c2c2;
--fides-overlay-error-color: #e53e3e;
--fides-overlay-success-color: #38a169;
--fides-overlay-skeleton-gradient-from-color: rgba(0,0,0,.06);
--fides-overlay-skeleton-gradient-to-color: rgba(0,0,0,.15);
--fides-overlay-inactive-font-color: #a0aec0;
--fides-overlay-primary-button-background-color: var(
    --fides-overlay-primary-color
  );
--fides-overlay-primary-button-background-hover-color: #4f525b;
--fides-overlay-primary-button-text-color: #fff;
--fides-overlay-primary-button-border-color: transparent;
--fides-overlay-secondary-button-background-color: var(
    --fides-overlay-background-color
  );
--fides-overlay-secondary-button-background-hover-color: var(
    --fides-overlay-hover-color
  );
--fides-overlay-neutral-background-color: #edf2f7;
--fides-overlay-secondary-button-text-color: #2d3748;
--fides-overlay-secondary-button-border-color: var(
    --fides-overlay-primary-color
  );
--fides-overlay-secondary-button-border-color-disabled: #a0aec0;
--fides-overlay-title-font-color: var(--fides-overlay-font-color);
--fides-overlay-body-font-color: var(--fides-overlay-font-color);
--fides-overlay-link-font-color: var(--fides-overlay-font-color-dark);
--fides-overlay-primary-active-color: var(--fides-overlay-primary-color);
--fides-overlay-inactive-color: #e2e8f0;
--fides-overlay-disabled-color: #e1e7ee;
--fides-overlay-row-divider-color: #e2e8f0;
--fides-overlay-row-hover-color: var(--fides-overlay-hover-color);
--fides-overlay-badge-background-color: #718096;
--fides-overlay-badge-border-radius: 4px;
--fides-overlay-select-border-color: #e2e8f0;
--fides-overlay-language-button-border-radius: 4px;
--fides-overlay-form-label-color: var(--fides-overlay-font-color);
--fides-overlay-form-input-background-color: var(
    --fides-overlay-background-color
  );
--fides-overlay-form-input-border-radius: var(
    --fides-overlay-component-border-radius
  );
--fides-overlay-form-input-border-color: var(
    --fides-overlay-select-border-color
  );
--fides-overlay-form-input-font-color: var(--fides-overlay-body-font-color);
--fides-overlay-button-border-radius: 6px;
--fides-overlay-container-border-radius: 12px;
--fides-overlay-container-border-width: 1px;
--fides-overlay-component-border-radius: 4px;
--fides-overlay-modal-secondary-button-group-height: calc(var(--fides-overlay-font-size-body) + var(--fides-overlay-link-v-padding)*2);
--border: 240 5.9% 90%;
--color-v0-red-800: oklch(58.2% .2049 24.8);
--color-zinc-200: lab(90.6853% .399232 -1.45452);
--ds-shadow-border-large: 0 0 0 1px #00000014, 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
--color-pink-500: lab(56.9303% 76.8162 -8.07021);
--color-orange-600: lab(57.1026% 64.2584 89.8886);
--color-orange-800: lab(37.1566% 46.6433 50.5562);
--color-v0-amber-1000: oklch(30.7% .0771 44.5);
--color-v0-gray-900: oklch(51% 0 0);
--color-v0-amber-200: oklch(96.8% .042 91.4);
--geist-console-text-color-default: #000;
--color-purple-800: lab(30.6017% 56.7637 -64.4751);
--tw-inset-ring-shadow: 0 0 #0000;
--muted: 0 0% 98%;
--color-cyan-700: lab(44.7267% -21.5987 -26.118);
--color-v0-green-1000: oklch(28.8% .0449 147.7);
--color-v0-gray-100: oklch(96.1% 0 0);
--geist-secondary-lighter: #eaeaea;
--color-primary-foreground: oklch(100% 0 0);
--popover: 0 0% 100%;
--v0-caveat-button-primary-focus: oklch(35% 0 0);
--color-green-500: lab(70.5521% -66.5147 45.8073);
--header-border-bottom: 0 1px 0 0 #0000001a;
--color-v0-amber-700: oklch(81.7% .164 75.9);
--color-v0-blue-300: oklch(94.8% .026 247.4);
--color-blue-400: lab(65.0361% -1.42065 -56.9802);
--color-v0-alpha-700: oklch(0% 0 0/.439);
--color-zinc-950: lab(2.51107% .242703 -.886115);
--popover-foreground: 240 10% 3.9%;
--color-v0-blue-900: oklch(53.2% .1887 257.1);
--v0-caveat-button-primary-disabled: oklch(96.1% 0 0);
--color-v0-purple-700: oklch(55.6% .1826 305.9);
--geist-secondary-dark: #333;
--color-v0-teal-600: oklch(81.5% .132 179.1);
--ds-focus-ring: ;
--color-v0-amber-800: oklch(77.2% .1722 64.2);
--color-v0-red-100: oklch(96.7% .0158 18.4);
--accents-3: #999;
--sidebar-primary: 240 5.9% 10%;
--accent: 240 4.8% 95.9%;
--color-v0-teal-900: oklch(52.1% .0912 183.8);
--geist-selection-text-color: #fff;
--accents-8: #111;
--color-zinc-900: lab(8.30603% .618205 -2.16572);
--color-v0-white: oklch(100% 0 0);
--color-v0-background-300: oklch(100% 0 0);
--accents-2: #eaeaea;
--color-v0-amber-300: oklch(95.7% .048 88.8);
--color-secondary: hsl(240 4.8% 95.9%);
--color-v0-purple-1000: oklch(24.4% .0971 304.5);
--color-green-400: lab(78.503% -64.9265 39.7492);
--color-accent-foreground: oklch(20.5% 0 0);
--color-yellow-50: lab(98.6846% -1.79055 9.7766);
--color-popover-foreground: hsl(240 10% 3.9%);
--color-gray-950: lab(1.90334% .278696 -5.48866);
--warning-foreground: 0 0% 9%;
--sidebar-border: 220 13% 91%;
--ds-shadow-border-small: 0 0 0 1px #00000014, 0px 1px 2px #0000000a;
--color-indigo-500: lab(48.295% 38.3129 -81.9673);
--color-purple-400: lab(63.6946% 47.6127 -59.2066);
--color-v0-gray-300: oklch(92.5% 0 0);
--color-border: oklch(92.5% 0 0);
--color-blue-50: lab(96.492% -1.14644 -5.11479);
--color-indigo-700: lab(32.4486% 49.2217 -84.6695);
--color-foreground: oklch(20.5% 0 0);
--destructive: 0 84.2% 60.2%;
--color-v0-pink-300: oklch(91.7% .0492 347.1);
--chart-3: 197 37% 24%;
--v0-caveat-button-primary-active: oklch(35% 0 0);
--color-v0-purple-800: oklch(48.5% .1687 305.1);
--color-orange-200: lab(88.4871% 9.94918 28.8378);
--color-v0-gray-1000: oklch(20.5% 0 0);
--tw-ring-shadow: 0 0 #0000;
--color-v0-alpha-400: oklch(0% 0 0/.078);
--color-yellow-600: lab(62.7799% 22.4197 86.1544);
--geist-foreground-rgb: 0, 0, 0;
--color-neutral-500: lab(48.496% 0 0);
--color-amber-600: oklch(81.7% .164 75.9);
--color-yellow-800: lab(38.7484% 23.5833 51.4916);
--geist-console-text-color-blue: #0070f3;
--color-v0-gray-500: oklch(83.6% 0 0);
--color-v0-red-900: oklch(54.8% .1951 24.9);
--tw-border-spacing-x: 0px;
--color-v0-red-500: oklch(84.5% .0718 18.7);
--color-v0-teal-1000: oklch(31.4% .054 180);
--accent-foreground: ;
--color-v0-purple-900: oklch(48.8% .1801 305.3);
--color-v0-blue-100: oklch(97.3% .0126 251.6);
--color-teal-800: lab(35.5975% -26.6648 -4.34487);
--color-v0-amber-500: oklch(86.6% .1271 79.6);
--color-v0-green-100: oklch(97.6% .0202 147.1);
--color-v0-green-900: oklch(52% .1268 147.6);
--sidebar-accent: 240 4.8% 95.9%;
--color-red-800: lab(33.7174% 55.8993 41.0293);
--tw-ring-offset-width: 0px;
--color-zinc-300: lab(84.9837% .601262 -2.17986);
--color-v0-blue-600: oklch(73% .1467 248);
--color-v0-alpha-600: oklch(0% 0 0/.341);
--v0-caveat-button-primary-hover: oklch(35% 0 0);
--color-v0-gray-200: oklch(94% 0 0);
--accents-4: #888;
--color-v0-teal-500: oklch(87.1% .098 181.8);
--destructive-foreground: 0 0% 98%;
--color-v0-alpha-500: oklch(0% 0 0/.212);
--color-cyan-800: lab(36.5114% -17.1989 -21.6292);
--color-v0-blue-500: oklch(83.2% .0882 246.6);
--color-secondary-foreground: hsl(240 5.9% 10%);
--tw-ring-offset-shadow: 0 0 #0000;
--color-v0-teal-100: oklch(98% .015 180);
--color-destructive: hsl(0 84.2% 60.2%);
--geist-secondary-light: #999;
--color-green-50: lab(98.1563% -5.60117 2.75915);
--ds-motion-popover-timing: cubic-bezier(.175, .885, .32, 1.1);
--color-zinc-800: lab(15.7305% .613764 -2.16959);
--color-v0-purple-300: oklch(94.4% .0305 311);
--color-v0-black: oklch(0% 0 0);
--color-amber-500: lab(72.7183% 31.8672 97.9407);
--color-yellow-700: lab(47.8202% 25.2426 66.5015);
--color-green-800: lab(37.4616% -36.7971 22.9692);
--color-v0-gray-600: oklch(73.2% 0 0);
--color-red-700: oklch(58.2% .2049 24.8);
--color-gray-900: oklch(20.5% 0 0);
--color-v0-pink-400: oklch(91.1% .049 348.2);
--color-v0-blue-1000: oklch(26.6% .0842 254.1);
--color-muted: oklch(98.5% 0 0);
--chart-5: 27 87% 67%;
--color-gray-700: oklch(51% 0 0);
--color-cyan-600: lab(55.1767% -26.7496 -30.5139);
--color-teal-300: lab(84.8977% -48.1516 -1.3321);
--muted-foreground: 240 3.8% 46.1%;
--color-green-300: lab(86.9953% -47.2691 25.0054);
--ds-motion-popover-duration: .2s;
--color-v0-background-200: oklch(98.5% 0 0);
--color-red-950: lab(13.003% 29.04 16.7519);
--color-v0-alpha-100: oklch(0% 0 0/.051);
--color-teal-500: lab(67.3859% -49.0983 -2.63511);
--color-v0-green-200: #e7f9e7;
--color-v0-blue-800: oklch(51.3% .191 258.2);
--color-v0-pink-900: oklch(53% .1986 4.6);
--color-blue-950: lab(15.6723% 8.86232 -32.2945);
--foreground: 240 10% 15%;
--color-yellow-500: lab(76.3898% 14.5258 98.4589);
--secondary: 240 4.8% 95.9%;
--ds-shadow-border-medium: 0 0 0 1px #00000014, 0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a;
--color-v0-purple-400: oklch(91.5% .0446 312.3);
--color-purple-200: lab(87.8405% 13.4282 -18.7159);
--color-zinc-100: lab(96.1634% .0993311 -.364041);
--sidebar-primary-foreground: 0 0% 98%;
--card: 0 0% 100%;
--primary-foreground: 0 0% 98%;
--color-v0-pink-700: oklch(63.4% .2131 1.3);
--v0-shadow-border: 0 0 0 1px oklch(92.5% 0 0);
--color-v0-alpha-800: oklch(0% 0 0/.51);
--color-blue-300: lab(77.5052% -6.4629 -36.42);
--color-card-foreground: hsl(240 10% 3.9%);
--accents-6: #444;
--color-yellow-400: lab(83.2664% 8.65132 106.895);
--v0-caveat-button-primary-default: oklch(20.5% 0 0);
--color-zinc-50: lab(98.26% 0 0);
--color-v0-alpha-300: oklch(0% 0 0/.102);
--ds-shadow-border: 0 0 0 1px #00000014;
--color-v0-blue-700: oklch(57.3% .2146 258.2);
--color-accent: oklch(96.1% 0 0);
--color-popover: hsl(0 0% 100%);
--color-yellow-300: lab(89.7033% -.480294 84.4917);
--color-v0-teal-700: oklch(64.9% .1141 182);
--color-v0-gray-400: oklch(93.7% 0 0);
--color-input: hsl(240 5.9% 90%);
--color-zinc-700: lab(26.8019% 1.35387 -4.68303);
--color-v0-pink-600: oklch(72.7% .1635 355.4);
--color-v0-green-800: oklch(57.7% .1312 147.8);
--geist-violet-background-secondary: #291c3a;
--chart-2: 173 58% 39%;
--ds-overlay-backdrop-color: ;
--color-v0-pink-1000: oklch(24.9% .0762 4.5);
--color-v0-amber-400: oklch(90.9% .1042 86.7);
--quaint-foreground-subtle: 46 79% 87%;
--color-v0-alpha-900: oklch(0% 0 0/.604);
--color-v0-teal-300: oklch(95% .0361 183.2);
--color-v0-red-700: oklch(62.6% .1935 23.1);
--color-v0-purple-100: oklch(96.6% .0219 313.2);
--color-green-600: oklch(65.1% .147 147.5);
--color-green-950: lab(15.6845% -20.4225 11.7249);
--color-v0-background-100: oklch(100% 0 0);
--color-cyan-500: lab(67.805% -35.3952 -30.2018);
--color-orange-500: lab(64.272% 57.1788 90.3583);
--color-v0-pink-100: oklch(95.9% .0247 346);
--color-v0-blue-200: oklch(96.9% .0152 246.8);
--color-red-300: lab(76.5514% 36.422 15.5335);
--secondary-foreground: 240 5.9% 10%;
--color-amber-700: oklch(81.7% .164 75.9);
--color-v0-green-700: oklch(65.1% .147 147.5);
--ds-shadow-border-inset: inset 0 0 0 1px #00000014;
--color-zinc-600: lab(35.1166% 1.78212 -6.1173);
--color-v0-red-200: oklch(95.6% .0221 18.4);
--color-orange-100: lab(94.7127% 3.58394 14.3151);
--color-yellow-200: lab(94.3433% -5.00429 52.9663);
--color-ring: hsl(240 5% 64.9%);
--tw-border-style: solid;
--color-cyan-900: lab(30.372% -13.1853 -18.7887);
--color-red-600: oklch(62.6% .1935 23.1);
--color-v0-pink-200: oklch(94.9% .0284 349.9);
--color-v0-amber-900: oklch(52.8% .1312 54.6);
--v0-caveat-focus-ring-tab: oklch(57.3% .2146 258.2);
--color-neutral-400: lab(66.128% -.0000298023 .0000119209);
--tw-border-spacing-y: 0px;
--color-v0-red-300: oklch(94.3% .0285 18.4);
--primary: 240 5.9% 10%;
--v0-caveat-focus-ring-press: oklch(0% 0 0/.16);
--sidebar-ring: 240 5% 64.9%;
--chart-1: 12 76% 61%;
--color-muted-foreground: oklch(51% 0 0);
--color-cyan-400: lab(76.6045% -40.9406 -29.6231);
--color-amber-400: lab(80.1641% 16.6016 99.2089);
--color-purple-500: lab(52.0183% 66.11 -78.2316);
--accents-7: #333;
--card-foreground: 240 10% 3.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--color-v0-purple-500: oklch(81.4% .0964 310.8);
--ring: 240 5% 64.9%;
--color-v0-teal-200: oklch(96.9% .022 182.6);
--geist-console-text-color-purple: #7928ca;
--tw-ring-offset-color: #fff;
--color-v0-pink-800: oklch(59.4% .2194 3.7);
--color-v0-purple-600: oklch(72% .149 307.6);
--color-red-400: lab(63.7053% 60.745 31.3109);
--color-v0-teal-400: oklch(92.8% .0561 184.1);
--geist-console-text-color-pink: #eb367f;
--color-v0-alpha-1000: oklch(0% 0 0/.91);
--color-v0-pink-500: oklch(81.4% .1083 351);
--sidebar-foreground: 240 5.3% 26.1%;
--color-v0-blue-400: oklch(91.6% .0425 246.4);
--accents-1: #fafafa;
--color-background: oklch(100% 0 0);
--color-v0-green-600: oklch(80% .1711 145.5);
--color-v0-green-400: oklch(91.9% .0691 145.6);
--color-indigo-600: lab(38.4009% 52.6132 -92.3857);
--geist-secondary: #666;
--color-v0-amber-600: oklch(80.4% .1424 74.1);
--chart-4: 43 74% 66%;
--color-orange-300: lab(80.8059% 21.7313 50.4455);
--color-yellow-100: lab(97.3564% -4.51407 27.344);
--v0-caveat-focus-ring-error: oklch(54.8% .1951 24.9/.24);
--color-destructive-foreground: hsl(0 0% 98%);
--color-zinc-500: lab(47.8878% 1.65477 -5.77283);
--color-v0-green-300: oklch(94.7% .0438 145.2);
--color-v0-red-1000: oklch(24.6% .0588 17.8);
--color-cyan-100: lab(95.3146% -13.8285 -6.84732);
--color-slate-950: lab(1.76974% 1.32743 -9.28855);
--color-v0-alpha-200: oklch(0% 0 0/.082);
--color-v0-amber-100: oklch(97.6% .0242 82.9);
--accents-5: #666;
--color-blue-500: lab(54.1736% 13.3369 -74.6839);
--color-zinc-400: lab(65.6464% 1.53497 -5.42429);
--color-yellow-900: lab(32.3865% 21.1273 38.5959);
--geist-foreground: #000;
--color-amber-950: lab(15.8111% 20.9107 23.3752);
--color-primary: oklch(20.5% 0 0);
--color-v0-teal-800: oklch(57.5% .101 181.7);
--color-v0-gray-800: oklch(59% 0 0);
--color-v0-purple-200: oklch(96.8% .0191 312.9);
--color-teal-200: lab(90.7612% -33.1343 -.542295);
--color-v0-green-500: oklch(85.5% .1226 146.3);
--next-icon-border: #000;
--geist-link-color: ;
--color-green-700: oklch(65.1% .147 147.5);
--color-v0-gray-700: oklch(65% 0 0);
--color-card: hsl(0 0% 100%);
--color-v0-red-600: oklch(71.3% .1643 21.4);
--color-v0-red-400: oklch(91.3% .0411 18.4);
--color-purple-300: lab(78.3298% 26.2195 -34.9499);
```

### Spacing

```css
--fides-base-font-size: 16px;
--fides-overlay-font-size-body-xs: var(--8px);
--fides-overlay-font-size-body-small: var(--12px);
--fides-overlay-font-size-body: var(--14px);
--fides-overlay-font-size-title: var(--16px);
--fides-overlay-font-size-buttons: var(--14px);
--fides-overlay-padding: 24px;
--fides-overlay-button-padding: 8px 16px;
--fides-overlay-link-v-padding: 4px;
--fides-overlay-link-h-padding: 4px;
--fides-overlay-link-padding: var(--fides-overlay-link-v-padding) var(--fides-overlay-link-h-padding);
--fides-banner-font-size-title: var(--16px);
--geist-space-64x: 256px;
--geist-space-small-negative: -32px;
--tw-space-x-reverse: 0;
--geist-space-16x: 64px;
--geist-space-large-negative: -48px;
--geist-space-gap-half-negative: -12px;
--geist-gap-half: 12px;
--geist-space-24x: 96px;
--geist-space-2x-negative: -8px;
--geist-space-gap-quarter-negative: -8px;
--geist-space-large: 48px;
--geist-gap-half-negative: -12px;
--geist-space-32x-negative: -128px;
--tw-space-y-reverse: 0;
--geist-space-8x-negative: -32px;
--geist-gap-quarter: 8px;
--geist-space-3x: 12px;
--geist-gap-quarter-negative: -8px;
--geist-space-small: 32px;
--geist-gap: 24px;
--geist-space-48x-negative: -192px;
--font-space-grotesk: ;
--geist-space-negative: -4px;
--ds-page-width-with-margin: calc(1400px + calc(2 * 24px));
--geist-page-width-with-margin: calc(1200px + calc(2 * 24px));
--geist-gap-double: 48px;
--geist-space-16x-negative: -64px;
--geist-space-gap: 24px;
--geist-space-gap-negative: -24px;
--geist-space-4x: 16px;
--geist-space-medium: 40px;
--geist-space-gap-quarter: 8px;
--geist-space-24x-negative: -96px;
--geist-space-48x: 192px;
--geist-gap-section: 32px;
--spacing: .25rem;
--geist-space-gap-half: 12px;
--geist-space: 4px;
--geist-gap-negative: -24px;
--geist-space-32x: 128px;
--geist-gap-double-negative: -48px;
--geist-page-margin: 24px;
--geist-space-6x: 24px;
--geist-space-8x: 32px;
--geist-space-4x-negative: -16px;
--geist-space-64x-negative: -256px;
--geist-space-10x: 40px;
--geist-space-medium-negative: -40px;
--geist-space-2x: 8px;
```

### Typography

```css
--fides-overlay-line-height: 1.4em;
--fides-overlay-font-family: Inter,sans-serif;
--ship-text: #ff5b4f;
--text-base--line-height: calc(1.5 / 1);
--tracking-wider: .05em;
--font-mono: ;
--text-9xl--line-height: 1;
--text-8xl: 6rem;
--text-sm: .875rem;
--geist-form-small-font: .875rem;
--font-weight-thin: 100;
--geist-form-large-font: 1rem;
--text-lg: 1.125rem;
--text-8xl--line-height: 1;
--geist-form-small-line-height: .875rem;
--text-6xl: 3.75rem;
--default-font-family: ;
--tracking-tighter: -.05em;
--develop-text: #0a72ef;
--font-weight-extrabold: 800;
--text-sm--line-height: calc(1.25 / .875);
--text-3xl--line-height: calc(2.25 / 1.875);
--text-3xl: 1.875rem;
--text-xs: .75rem;
--tracking-widest: .1em;
--font-weight-medium: 500;
--font-weight-normal: 400;
--font-sans-fallback: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--text-base: 1rem;
--default-mono-font-family: ;
--preview-text: #de1d8d;
--geist-text-gradient: linear-gradient(180deg, #000c 0%, #000 100%);
--font-weight-bold: 700;
--font-weight-extralight: 200;
--text-xs--line-height: calc(1 / .75);
--text-xl: 1.25rem;
--leading-relaxed: 1.625;
--leading-snug: 1.375;
--text-9xl: 8rem;
--geist-form-line-height: 1.25rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-xl--line-height: calc(1.75 / 1.25);
--font-mono-fallback: "Roboto Mono", Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
--geist-form-font: .875rem;
--leading-tight: 1.25;
--geist-form-large-line-height: 1.5rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--tracking-tight: -.025em;
--text-2xl: 1.5rem;
--text-7xl: 4.5rem;
--text-5xl--line-height: 1;
--leading-normal: 1.5;
--text-lg--line-height: calc(1.75 / 1.125);
--font-sans: ;
--font-weight-light: 300;
--text-7xl--line-height: 1;
--font-weight-black: 900;
--font-lora: ;
--tracking-wide: .025em;
--font-weight-semibold: 600;
--text-4xl: 2.25rem;
--tracking-normal: 0em;
--text-5xl: 3rem;
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--text-6xl--line-height: 1;
```

### Shadows

```css
--tw-inset-shadow: 0 0 #0000;
--dropdown-box-shadow: 0 4px 4px 0 #00000005;
--tw-shadow-alpha: 100%;
--ds-shadow-large: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
--shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
--shadow-sticky: 0 12px 10px -10px #0000001f;
--tw-drop-shadow-alpha: 100%;
--shadow-sm: 0 0 0 1px hsl(0, 0%, 0%, .08), 0px 2px 1px 0px #0000000a;
--shadow-large: 0 30px 60px #0000001f;
--shadow-2xl: 0 25px 50px -12px #00000040;
--ds-shadow-small: 0px 1px 2px #0000000a;
--shadow-medium: 0 8px 30px #0000001f;
--drop-shadow-xs: 0 1px 1px #0000000d;
--ds-shadow-modal: 0 0 0 1px #00000014, 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f;
--ds-shadow-medium: 0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a;
--tw-shadow: 0 0 #0000;
--shadow-hover: 0 30px 60px #0000001f;
--shadow-2xs: 0 1px #0000000d;
--tw-inset-shadow-alpha: 100%;
--shadow-xs: 0 1px 2px 0 #0000000d;
--shadow-default: 0px 1px 2px 0px #00000014;
--shadow-smallest: 0px 2px 4px #0000001a;
--shadow-md: 0 0 0 1px hsl(0, 0%, 0%, .08), 0px 8px 8px -8px #0000000a, 0px 2px 2px 0px #0000000a;
--ds-shadow-tooltip: 0 0 0 1px #00000014, 0px 1px 1px #00000005, 0px 4px 8px #0000000a;
--shadow-lg: 0 0 0 1px hsl(0, 0%, 0%, .08), 0px 8px 16px -4px #0000000a, 0px 2px 2px 0px #0000000a;
--shadow-small: 0 5px 10px #0000001f;
--drop-shadow-md: 0 3px 3px #0000001f;
--ds-shadow-fullscreen: 0 0 0 1px #00000014, 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f;
--shadow-extra-small: 0px 4px 8px #0000001f;
--ds-shadow-menu: 0 0 0 1px #00000014, 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f;
```

### Radii

```css
--radius-4xl: 2rem;
--radius-sm: calc(.5rem - 4px);
--radius-md: calc(.5rem - 2px);
--radius-lg: .5rem;
--radius: .5rem;
--geist-radius: 5px;
--geist-marketing-radius: 8px;
--radius-3xl: 1.5rem;
--radius-xl: 12px;
```

### Other

```css
--sh-class: #00a7fd;
--sh-identifier: #fff;
--sh-sign: #9b9b9b;
--sh-keyword: #ff0078;
--sh-comment: #a19595;
--sh-jsxliterals: #ffff72;
--fides-overlay-width: 680px;
--8px: calc(var(--fides-base-font-size)*0.5);
--11px: calc(var(--fides-base-font-size)*0.6875);
--12px: calc(var(--fides-base-font-size)*0.75);
--14px: calc(var(--fides-base-font-size)*0.875);
--16px: calc(var(--fides-base-font-size)*1);
--fides-overlay-banner-offset: 48px;
--fides-overlay-language-loading-indicator-speed: 5s;
--fides-overlay-toggle-width: 50px;
--green-900: 143.81 61.17% 20.2%;
--gray-150: 240 5.56% 92.94%;
--v0-red-500: oklch(84.5% .0718 18.7);
--geist-cyan-lighter: #aaffec;
--v0-green-700: oklch(65.1% .147 147.5);
--amber-200: 48 96.64% 76.67%;
--background-subtle: 0 0% 100%;
--alpha: 0 0% 0%;
--ease-in: cubic-bezier(.4, 0, 1, 1);
--geist-error: #e00;
--tw-enter-scale: 1;
--v0-caveat-button-blue-active: oklch(47.8% .1826 258.2);
--blue-600: 221.21 83.19% 53.33%;
--geist-violet-lighter: #d8ccf1;
--gray-600: 240 5.2% 33.92%;
--blue-900: 224.44 64.29% 32.94%;
--v0-pink-500: oklch(81.4% .1083 351);
--v0-green-400: oklch(91.9% .0691 145.6);
--wv-orange: #ffa400;
--v0-teal-1000: oklch(31.4% .054 180);
--develop-start-gradient: #007cf0;
--geist-violet-background-tertiary: #eae5f4;
--v0-amber-800: oklch(77.2% .1722 64.2);
--tw-exit-translate-y: 0;
--gray-100: 240 4.76% 95.88%;
--quaint-background-subtle: 240, 3%, 8%, .5;
--v0-background-200: oklch(98.5% 0 0);
--v0-amber-300: oklch(95.7% .048 88.8);
--tw-gradient-to-position: 100%;
--v0-caveat-status-warning: oklch(77.2% .1722 64.2);
--v0-pink-800: oklch(59.4% .2194 3.7);
--alpha-400: 0, 0%, 0%, .1;
--dropdown-triangle-stroke: #fff;
--v0-alpha-300: oklch(0% 0 0/.102);
--geist-highlight-magenta: #eb367f;
--starter-groq: 255 233 228 1;
--vh100-offset: calc(64px + 0px);
--v0-alpha-600: oklch(0% 0 0/.341);
--white: 0 0% 100%;
--scroller-start: #fff;
--v0-blue-1000: oklch(26.6% .0842 254.1);
--_number-flow-d: 0;
--v0-blue-900: oklch(53.2% .1887 257.1);
--green-200: 141 78.95% 85.1%;
--tw-scale-y: 1;
--scroller-end: #fff0;
--container-6xl: 72rem;
--geist-background-rgb: 255, 255, 255;
--tw-exit-translate-x: 0;
--v0-gray-600: oklch(73.2% 0 0);
--v0-blue-500: oklch(83.2% .0882 246.6);
--header-zindex: 75;
--v0-amber-100: oklch(97.6% .0242 82.9);
--green-600: 142.13 76.22% 36.27%;
--v0-teal-200: oklch(96.9% .022 182.6);
--v0-caveat-toggle-false: oklch(100% 0 0);
--teal-600: 174.67 83.85% 31.57%;
--v0-red-800: oklch(58.2% .2049 24.8);
--v0-purple-400: oklch(91.5% .0446 312.3);
--starter-neon: 184 100% 94%;
--purple-100: 268.7 100% 95.49%;
--red-700: 0 74% 42%;
--gray-800: 240 3.7% 15.88%;
--gray-200: 240 5.56% 92.94%;
--v0-pink-100: oklch(95.9% .0247 346);
--teal-100: 167.23 85.45% 89.22%;
--container-xl: 36rem;
--v0-purple-200: oklch(96.8% .0191 312.9);
--geist-highlight-purple: #f81ce5;
--v0-red-300: oklch(94.3% .0285 18.4);
--v0-green-500: oklch(85.5% .1226 146.3);
--geist-code: #000;
--v0-amber-500: oklch(86.6% .1271 79.6);
--v0-blue-700: oklch(57.3% .2146 258.2);
--geist-warning-lighter: #ffefcf;
--v0-alpha-900: oklch(0% 0 0/.604);
--v0-caveat-status-cancelled: oklch(83.6% 0 0);
--v0-caveat-button-error-default: oklch(58.2% .2049 24.8);
--tw-animation-direction: normal;
--v0-blue-200: oklch(96.9% .0152 246.8);
--geist-page-width: 1200px;
--starter-deepinfra: 234 100% 96%;
--purple-700: 272.09 71.67% 47.06%;
--tw-divide-x-reverse: 0;
--v0-amber-400: oklch(90.9% .1042 86.7);
--preview-end-gradient: #ff0080;
--tw-exit-rotate: 0;
--v0-caveat-button-blue-default: oklch(51.3% .191 258.2);
--v0-alpha-400: oklch(0% 0 0/.078);
--develop-end-gradient: #00dfd8;
--container-sm: 24rem;
--v0-green-200: #e7f9e7;
--header-sub-menu-height: 46px;
--v0-amber-200: oklch(96.8% .042 91.4);
--ds-overlay-backdrop-opacity: .8;
--v0-red-600: oklch(71.3% .1643 21.4);
--_number-flow-d-width: 0;
--v0-amber-700: oklch(81.7% .164 75.9);
--tw-gradient-from-position: 0%;
--pink-700: 335.06 77.57% 41.96%;
--wv-green: #0cce6b;
--teal-900: 175.93 60.82% 19.02%;
--geist-console-purple: #7928ca;
--v0-gray-900: oklch(51% 0 0);
--v0-gray-200: oklch(94% 0 0);
--tw-animation-fill-mode: forwards;
--amber-900: 21.71 77.78% 26.47%;
--geist-highlight-pink: #ff0080;
--geist-cyan-light: #79ffe1;
--amber-50: 48.29 100% 91.96%;
--geist-cyan: #50e3c2;
--tw-enter-translate-x: 0;
--container-4xl: 56rem;
--v0-blue-600: oklch(73% .1467 248);
--amber-100: 48 96.49% 88.82%;
--v0-alpha-200: oklch(0% 0 0/.082);
--preview-line-end: #9a1fb8;
--breakpoint-md: 768px;
--v0-caveat-button-blue-hover: oklch(47.8% .1826 258.2);
--gray-400: 240 5.03% 64.9%;
--v0-red-1000: oklch(24.6% .0588 17.8);
--v0-gray-1000: oklch(20.5% 0 0);
--tw-enter-opacity: 1;
--red-200: 0 96% 89%;
--ds-motion-overlay-scale: .96;
--v0-alpha-800: oklch(0% 0 0/.51);
--geist-form-height: 40px;
--container-md: 28rem;
--header-height: 64px;
--aspect-video: 16 / 9;
--develop-line-end: #019ae9;
--amber-600: 32.13 94.62% 43.73%;
--tw-animation-delay: 0s;
--v0-green-800: oklch(57.7% .1312 147.8);
--v0-green-300: oklch(94.7% .0438 145.2);
--v0-amber-600: oklch(80.4% .1424 74.1);
--v0-gray-500: oklch(83.6% 0 0);
--geist-success-light: #3291ff;
--tw-outline-style: solid;
--geist-warning-light: #f7b955;
--geist-cyan-dark: #29bc9b;
--blue-100: 214.29 94.59% 92.75%;
--v0-gray-400: oklch(93.7% 0 0);
--geist-success-dark: #0761d1;
--geist-form-small-height: 32px;
--header-import-flow-background: #fafafacc;
--v0-caveat-logo: oklch(0% 0 0);
--v0-teal-100: oklch(98% .015 180);
--blue-200: 213 97% 87%;
--warning: 35, 100%, 52%;
--v0-caveat-status-error: oklch(58.2% .2049 24.8);
--v0-purple-900: oklch(48.8% .1801 305.3);
--v0-caveat-button-error-disabled: oklch(96.1% 0 0);
--tw-gradient-from: rgba(0, 0, 0, 0);
--tw-gradient-to: rgba(0, 0, 0, 0);
--black: 0 0% 0%;
--geist-violet-light: #8a63d2;
--v0-purple-600: oklch(72% .149 307.6);
--_number-flow-d-opacity: 0;
--tw-gradient-via-position: 50%;
--red-100: 0 93% 94%;
--v0-gray-700: oklch(65% 0 0);
--v0-caveat-status-queued: oklch(83.6% 0 0);
--default-transition-duration: .15s;
--animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
--v0-black: oklch(0% 0 0);
--container-xs: 20rem;
--banner-height: 0px;
--v0-teal-700: oklch(64.9% .1141 182);
--blue-700: 224.28 76.33% 48.04%;
--alpha-200: 0, 0%, 0%, .05;
--sidebar-background: 0 0% 98%;
--v0-teal-300: oklch(95% .0361 183.2);
--alpha-white-400: 0, 0%, 100%, .1;
--gray-900: 240 5.88% 10%;
--v0-red-400: oklch(91.3% .0411 18.4);
--v0-red-700: oklch(62.6% .1935 23.1);
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--v0-caveat-button-error-active: oklch(52.6% .1712 24.8);
--tw-animation-iteration-count: 1;
--tw-exit-opacity: 1;
--v0-alpha-1000: oklch(0% 0 0/.91);
--ds-motion-overlay-timing: cubic-bezier(.175, .885, .32, 1.1);
--v0-pink-200: oklch(94.9% .0284 349.9);
--background: 0 0% 100%;
--tw-translate-z: 0;
--tw-gradient-via: rgba(0, 0, 0, 0);
--v0-purple-1000: oklch(24.4% .0971 304.5);
--v0-purple-700: oklch(55.6% .1826 305.9);
--v0-pink-300: oklch(91.7% .0492 347.1);
--geist-violet-dark: #4c2889;
--breakpoint-lg: 1024px;
--red-500: 0 84% 60%;
--container-3xl: 48rem;
--v0-caveat-button-blue-focus: oklch(47.8% .1826 258.2);
--blur-xs: 4px;
--tw-translate-y: 0;
--ease-out: cubic-bezier(0, 0, .2, 1);
--gray-300: 240 4.88% 83.92%;
--v0-green-1000: oklch(28.8% .0449 147.7);
--ship-start-gradient: #ff4d4d;
--gray-500: 240 3.83% 46.08%;
--ds-page-width: 1400px;
--tw-content: "";
--v0-blue-300: oklch(94.8% .026 247.4);
--red-600: 0 72% 51%;
--v0-pink-400: oklch(91.1% .049 348.2);
--v0-green-900: oklch(52% .1268 147.6);
--v0-teal-600: oklch(81.5% .132 179.1);
--tw-translate-x: 0;
--purple-900: 273.64 65.64% 31.96%;
--v0-pink-900: oklch(53% .1986 4.6);
--tw-enter-rotate: 0;
--geist-error-lighter: #f7d4d6;
--v0-background-100: oklch(100% 0 0);
--animate-bounce: bounce 1s infinite;
--purple-600: 271.48 81.33% 55.88%;
--v0-background-300: oklch(100% 0 0);
--v0-alpha-100: oklch(0% 0 0/.051);
--v0-pink-1000: oklch(24.9% .0762 4.5);
--geist-marketing-gray: #fafbfc;
--v0-blue-100: oklch(97.3% .0126 251.6);
--ds-motion-timing-swift: cubic-bezier(.175, .885, .32, 1.1);
--teal-700: 175.34 77.44% 26.08%;
--v0-caveat-button-error-hover: oklch(52.6% .1712 24.8);
--_number-flow-dx: 0px;
--breakpoint-xl: 1280px;
--quaint-background: 159 20% 55%;
--blue-800: 226 71% 40%;
--alpha-600: 0, 0%, 0%, .21;
--v0-green-600: oklch(80% .1711 145.5);
--geist-form-large-height: 48px;
--v0-caveat-toggle-true: oklch(100% 0 0);
--animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
--v0-alpha-500: oklch(0% 0 0/.212);
--geist-warning: #f5a623;
--geist-error-dark: #c50000;
--ds-motion-overlay-duration: .3s;
--wv-red: #ff4e42;
--v0-green-100: oklch(97.6% .0202 147.1);
--geist-violet: #7928ca;
--alpha-300: 0, 0%, 0%, .08;
--gray-700: 240 5.26% 26.08%;
--ship-line-end: #f9cb28;
--geist-console-header: #efe7ed;
--blur-xl: 24px;
--geist-error-light: #ff1a1a;
--geist-success-lighter: #d3e5ff;
--tw-scale-z: 1;
--v0-amber-1000: oklch(30.7% .0771 44.5);
--v0-red-100: oklch(96.7% .0158 18.4);
--v0-white: oklch(100% 0 0);
--v0-universal-black: oklch(0% 0 0);
--v0-amber-900: oklch(52.8% .1312 54.6);
--v0-purple-500: oklch(81.4% .0964 310.8);
--tw-scroll-snap-strictness: proximity;
--green-100: 140.62 84.21% 92.55%;
--container-lg: 32rem;
--geist-highlight-yellow: #fff500;
--v0-blue-800: oklch(51.3% .191 258.2);
--v0-caveat-button-error-focus: oklch(52.6% .1712 24.8);
--v0-teal-400: oklch(92.8% .0561 184.1);
--v0-caveat-status-ready: oklch(81.5% .132 179.1);
--v0-pink-700: oklch(63.4% .2131 1.3);
--geist-success: #0070f3;
--amber-700: 25.96 90.48% 37.06%;
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
--v0-blue-400: oklch(91.6% .0425 246.4);
--v0-red-200: oklch(95.6% .0221 18.4);
--v0-purple-100: oklch(96.6% .0219 313.2);
--preview-start-gradient: #7928ca;
--v0-universal-white: oklch(100% 0 0);
--container-5xl: 64rem;
--starter-supabase: 154 100% 94%;
--geist-background: #fff;
--v0-alpha-700: oklch(0% 0 0/.439);
--v0-teal-500: oklch(87.1% .098 181.8);
--green-700: 142.43 71.81% 29.22%;
--v0-gray-800: oklch(59% 0 0);
--red-900: 0 63% 31%;
--v0-teal-900: oklch(52.1% .0912 183.8);
--geist-selection: ;
--v0-caveat-status-stable: oklch(57.3% .2146 258.2);
--animate-spin: spin 1s linear infinite;
--geist-warning-dark: #ab570a;
--red-50: 4 73% 96%;
--v0-gray-100: oklch(96.1% 0 0);
--v0-caveat-button-blue-disabled: oklch(96.1% 0 0);
--tw-divide-y-reverse: 0;
--starter-fal: 191 100% 95%;
--container-2xl: 42rem;
--tw-exit-scale: 1;
--starter-upstash: 160 100% 95%;
--input: 240 5.9% 90%;
--v0-purple-800: oklch(48.5% .1687 305.1);
--tw-enter-translate-y: 0;
--tw-scale-x: 1;
--v0-teal-800: oklch(57.5% .101 181.7);
--v0-purple-300: oklch(94.4% .0305 311);
--v0-pink-600: oklch(72.7% .1635 355.4);
--breakpoint-sm: 640px;
--ship-end-gradient: #f9cb28;
--v0-red-900: oklch(54.8% .1951 24.9);
--geist-violet-background: #fff;
--container-7xl: 80rem;
--v0-gray-300: oklch(92.5% 0 0);
--blur-sm: 8px;
```

### Dependencies

```css
0: --fides-overlay-font-color;
0: --fides-overlay-font-color;
0: --fides-overlay-font-color-dark;
0: --fides-overlay-primary-color;
0: --fides-overlay-hover-color;
0: --fides-overlay-font-color;
0: --fides-overlay-body-font-color;
0: --fides-base-font-size;
0: --fides-base-font-size;
0: --fides-base-font-size;
0: --fides-base-font-size;
0: --fides-base-font-size;
0: --8px;
0: --12px;
0: --14px;
0: --16px;
0: --14px;
0: --fides-overlay-link-v-padding;
1: --fides-overlay-link-h-padding;
0: --16px;
0: --fides-overlay-font-size-body;
1: --fides-overlay-link-v-padding;
```

### Semantic

```css
--fides-overlay-success-color: #38a169;
--green-900: 143.81 61.17% 20.2%;
--v0-green-700: oklch(65.1% .147 147.5);
--color-v0-green-1000: oklch(28.8% .0449 147.7);
--color-green-500: lab(70.5521% -66.5147 45.8073);
--v0-green-400: oklch(91.9% .0691 145.6);
--green-200: 141 78.95% 85.1%;
--color-green-400: lab(78.503% -64.9265 39.7492);
--green-600: 142.13 76.22% 36.27%;
--v0-green-500: oklch(85.5% .1226 146.3);
--color-v0-green-100: oklch(97.6% .0202 147.1);
--color-v0-green-900: oklch(52% .1268 147.6);
--v0-green-200: #e7f9e7;
--wv-green: #0cce6b;
--color-green-50: lab(98.1563% -5.60117 2.75915);
--color-green-800: lab(37.4616% -36.7971 22.9692);
--color-green-300: lab(86.9953% -47.2691 25.0054);
--color-v0-green-200: #e7f9e7;
--v0-green-800: oklch(57.7% .1312 147.8);
--v0-green-300: oklch(94.7% .0438 145.2);
--geist-success-light: #3291ff;
--geist-success-dark: #0761d1;
--color-v0-green-800: oklch(57.7% .1312 147.8);
--color-green-600: oklch(65.1% .147 147.5);
--color-green-950: lab(15.6845% -20.4225 11.7249);
--v0-green-1000: oklch(28.8% .0449 147.7);
--color-v0-green-700: oklch(65.1% .147 147.5);
--v0-green-900: oklch(52% .1268 147.6);
--v0-green-600: oklch(80% .1711 145.5);
--v0-green-100: oklch(97.6% .0202 147.1);
--geist-success-lighter: #d3e5ff;
--color-v0-green-600: oklch(80% .1711 145.5);
--color-v0-green-400: oklch(91.9% .0691 145.6);
--green-100: 140.62 84.21% 92.55%;
--geist-success: #0070f3;
--color-v0-green-300: oklch(94.7% .0438 145.2);
--green-700: 142.43 71.81% 29.22%;
--color-v0-green-500: oklch(85.5% .1226 146.3);
--color-green-700: oklch(65.1% .147 147.5);
--amber-200: 48 96.64% 76.67%;
--color-v0-amber-1000: oklch(30.7% .0771 44.5);
--color-v0-amber-200: oklch(96.8% .042 91.4);
--color-v0-amber-700: oklch(81.7% .164 75.9);
--v0-amber-800: oklch(77.2% .1722 64.2);
--v0-amber-300: oklch(95.7% .048 88.8);
--color-v0-amber-800: oklch(77.2% .1722 64.2);
--v0-caveat-status-warning: oklch(77.2% .1722 64.2);
--color-v0-amber-300: oklch(95.7% .048 88.8);
--color-yellow-50: lab(98.6846% -1.79055 9.7766);
--warning-foreground: 0 0% 9%;
--v0-amber-100: oklch(97.6% .0242 82.9);
--color-yellow-600: lab(62.7799% 22.4197 86.1544);
--v0-amber-500: oklch(86.6% .1271 79.6);
--color-amber-600: oklch(81.7% .164 75.9);
--color-yellow-800: lab(38.7484% 23.5833 51.4916);
--geist-warning-lighter: #ffefcf;
--color-v0-amber-500: oklch(86.6% .1271 79.6);
--v0-amber-400: oklch(90.9% .1042 86.7);
--v0-amber-200: oklch(96.8% .042 91.4);
--v0-amber-700: oklch(81.7% .164 75.9);
--amber-900: 21.71 77.78% 26.47%;
--color-amber-500: lab(72.7183% 31.8672 97.9407);
--color-yellow-700: lab(47.8202% 25.2426 66.5015);
--amber-50: 48.29 100% 91.96%;
--amber-100: 48 96.49% 88.82%;
--color-yellow-500: lab(76.3898% 14.5258 98.4589);
--amber-600: 32.13 94.62% 43.73%;
--v0-amber-600: oklch(80.4% .1424 74.1);
--geist-warning-light: #f7b955;
--color-yellow-400: lab(83.2664% 8.65132 106.895);
--warning: 35, 100%, 52%;
--color-yellow-300: lab(89.7033% -.480294 84.4917);
--color-v0-amber-400: oklch(90.9% .1042 86.7);
--color-amber-700: oklch(81.7% .164 75.9);
--color-yellow-200: lab(94.3433% -5.00429 52.9663);
--color-v0-amber-900: oklch(52.8% .1312 54.6);
--color-amber-400: lab(80.1641% 16.6016 99.2089);
--geist-warning: #f5a623;
--v0-amber-1000: oklch(30.7% .0771 44.5);
--v0-amber-900: oklch(52.8% .1312 54.6);
--geist-highlight-yellow: #fff500;
--color-v0-amber-600: oklch(80.4% .1424 74.1);
--amber-700: 25.96 90.48% 37.06%;
--color-yellow-100: lab(97.3564% -4.51407 27.344);
--color-v0-amber-100: oklch(97.6% .0242 82.9);
--geist-warning-dark: #ab570a;
--color-yellow-900: lab(32.3865% 21.1273 38.5959);
--color-amber-950: lab(15.8111% 20.9107 23.3752);
--fides-overlay-background-error-color: #f7c2c2;
--fides-overlay-error-color: #e53e3e;
--color-v0-red-800: oklch(58.2% .2049 24.8);
--v0-red-500: oklch(84.5% .0718 18.7);
--geist-error: #e00;
--geist-space-small-negative: -32px;
--color-v0-red-100: oklch(96.7% .0158 18.4);
--geist-space-large-negative: -48px;
--geist-space-gap-half-negative: -12px;
--geist-space-2x-negative: -8px;
--v0-red-800: oklch(58.2% .2049 24.8);
--geist-space-gap-quarter-negative: -8px;
--red-700: 0 74% 42%;
--destructive: 0 84.2% 60.2%;
--geist-gap-half-negative: -12px;
--geist-space-32x-negative: -128px;
--geist-space-8x-negative: -32px;
--v0-red-300: oklch(94.3% .0285 18.4);
--color-v0-red-900: oklch(54.8% .1951 24.9);
--v0-caveat-button-error-default: oklch(58.2% .2049 24.8);
--color-v0-red-500: oklch(84.5% .0718 18.7);
--geist-gap-quarter-negative: -8px;
--color-red-800: lab(33.7174% 55.8993 41.0293);
--destructive-foreground: 0 0% 98%;
--geist-space-48x-negative: -192px;
--v0-red-600: oklch(71.3% .1643 21.4);
--geist-space-negative: -4px;
--color-destructive: hsl(0 84.2% 60.2%);
--geist-space-16x-negative: -64px;
--color-red-700: oklch(58.2% .2049 24.8);
--color-red-950: lab(13.003% 29.04 16.7519);
--v0-red-1000: oklch(24.6% .0588 17.8);
--red-200: 0 96% 89%;
--v0-caveat-status-error: oklch(58.2% .2049 24.8);
--v0-caveat-button-error-disabled: oklch(96.1% 0 0);
--geist-space-gap-negative: -24px;
--geist-space-24x-negative: -96px;
--red-100: 0 93% 94%;
--color-v0-red-700: oklch(62.6% .1935 23.1);
--v0-red-400: oklch(91.3% .0411 18.4);
--v0-red-700: oklch(62.6% .1935 23.1);
--v0-caveat-button-error-active: oklch(52.6% .1712 24.8);
--color-red-300: lab(76.5514% 36.422 15.5335);
--red-500: 0 84% 60%;
--color-v0-red-200: oklch(95.6% .0221 18.4);
--red-600: 0 72% 51%;
--color-red-600: oklch(62.6% .1935 23.1);
--geist-error-lighter: #f7d4d6;
--color-v0-red-300: oklch(94.3% .0285 18.4);
--v0-caveat-button-error-hover: oklch(52.6% .1712 24.8);
--geist-gap-negative: -24px;
--geist-error-dark: #c50000;
--geist-gap-double-negative: -48px;
--wv-red: #ff4e42;
--color-red-400: lab(63.7053% 60.745 31.3109);
--geist-error-light: #ff1a1a;
--v0-red-100: oklch(96.7% .0158 18.4);
--v0-caveat-button-error-focus: oklch(52.6% .1712 24.8);
--geist-space-4x-negative: -16px;
--geist-space-64x-negative: -256px;
--v0-caveat-focus-ring-error: oklch(54.8% .1951 24.9/.24);
--v0-red-200: oklch(95.6% .0221 18.4);
--color-destructive-foreground: hsl(0 0% 98%);
--color-v0-red-1000: oklch(24.6% .0588 17.8);
--red-900: 0 63% 31%;
--red-50: 4 73% 96%;
--geist-space-medium-negative: -40px;
--color-v0-red-600: oklch(71.3% .1643 21.4);
--v0-red-900: oklch(54.8% .1951 24.9);
--color-v0-red-400: oklch(91.3% .0411 18.4);
--v0-caveat-button-blue-active: oklch(47.8% .1826 258.2);
--blue-600: 221.21 83.19% 53.33%;
--blue-900: 224.44 64.29% 32.94%;
--color-v0-blue-300: oklch(94.8% .026 247.4);
--color-blue-400: lab(65.0361% -1.42065 -56.9802);
--color-v0-blue-900: oklch(53.2% .1887 257.1);
--v0-blue-1000: oklch(26.6% .0842 254.1);
--v0-blue-900: oklch(53.2% .1887 257.1);
--v0-blue-500: oklch(83.2% .0882 246.6);
--color-blue-50: lab(96.492% -1.14644 -5.11479);
--v0-blue-700: oklch(57.3% .2146 258.2);
--geist-console-text-color-blue: #0070f3;
--v0-blue-200: oklch(96.9% .0152 246.8);
--color-v0-blue-100: oklch(97.3% .0126 251.6);
--v0-caveat-button-blue-default: oklch(51.3% .191 258.2);
--color-v0-blue-600: oklch(73% .1467 248);
--color-v0-blue-500: oklch(83.2% .0882 246.6);
--color-v0-blue-1000: oklch(26.6% .0842 254.1);
--v0-blue-600: oklch(73% .1467 248);
--v0-caveat-button-blue-hover: oklch(47.8% .1826 258.2);
--color-v0-blue-800: oklch(51.3% .191 258.2);
--color-blue-950: lab(15.6723% 8.86232 -32.2945);
--blue-100: 214.29 94.59% 92.75%;
--color-blue-300: lab(77.5052% -6.4629 -36.42);
--blue-200: 213 97% 87%;
--color-v0-blue-700: oklch(57.3% .2146 258.2);
--blue-700: 224.28 76.33% 48.04%;
--color-v0-blue-200: oklch(96.9% .0152 246.8);
--v0-caveat-button-blue-focus: oklch(47.8% .1826 258.2);
--v0-blue-300: oklch(94.8% .026 247.4);
--v0-blue-100: oklch(97.3% .0126 251.6);
--blue-800: 226 71% 40%;
--color-v0-blue-400: oklch(91.6% .0425 246.4);
--v0-blue-800: oklch(51.3% .191 258.2);
--v0-blue-400: oklch(91.6% .0425 246.4);
--color-blue-500: lab(54.1736% 13.3369 -74.6839);
--v0-caveat-button-blue-disabled: oklch(96.1% 0 0);
```

## Breakpoints

| Name | Value | Type |
|------|-------|------|
| xs | 370px | max-width |
| sm | 450px | max-width |
| sm | 480px | max-width |
| sm | 500px | max-width |
| sm | 600px | max-width |
| sm | 601px | min-width |
| sm | 639px | max-width |
| sm | 640px | max-width |
| md | 768px | max-width |
| 900px | 900px | max-width |
| lg | 960px | max-width |
| lg | 961px | min-width |
| lg | 1024px | max-width |
| xl | 1280px | min-width |

## Transitions & Animations

**Easing functions:** `cubic-bezier(0.4, 0, 0.2, 1)`, `cubic-bezier(0.31, 0.1, 0.08, 0.96)`, `cubic-bezier(0.3, 0.1, 0.1, 0.95)`, `cubic-bezier(0.34, 1.56, 0.64, 1)`, `cubic-bezier(0, 0, 0.2, 1)`

**Durations:** `0.15s`, `0.5s`, `0.2s`, `0.3s`, `0.1s`, `0.35s`, `0.6s`, `1s`

### Common Transitions

```css
transition: all;
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), outline-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), fill 0.15s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1), --tw-gradient-from 0.15s cubic-bezier(0.4, 0, 0.2, 1), --tw-gradient-via 0.15s cubic-bezier(0.4, 0, 0.2, 1), --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), translate 0.15s cubic-bezier(0.4, 0, 0.2, 1), scale 0.15s cubic-bezier(0.4, 0, 0.2, 1), rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-backdrop-filter 0.15s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.15s cubic-bezier(0.4, 0, 0.2, 1), display 0.15s cubic-bezier(0.4, 0, 0.2, 1), content-visibility 0.15s cubic-bezier(0.4, 0, 0.2, 1), overlay 0.15s cubic-bezier(0.4, 0, 0.2, 1), pointer-events 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity cubic-bezier(0.31, 0.1, 0.08, 0.96);
transition: border-color 0.15s cubic-bezier(0.31, 0.1, 0.08, 0.96), background 0.15s cubic-bezier(0.31, 0.1, 0.08, 0.96), color 0.15s cubic-bezier(0.31, 0.1, 0.08, 0.96);
transition: width cubic-bezier(0.3, 0.1, 0.1, 0.95), height cubic-bezier(0.3, 0.1, 0.1, 0.95);
transition: opacity 0.5s cubic-bezier(0.31, 0.1, 0.08, 0.96), transform 0.5s cubic-bezier(0.31, 0.1, 0.08, 0.96);
transition: border-color 0.2s cubic-bezier(0.31, 0.1, 0.08, 0.96);
transition: height 0.3s cubic-bezier(0.31, 0.1, 0.08, 0.96), margin 0.3s cubic-bezier(0.31, 0.1, 0.08, 0.96), opacity 0.3s cubic-bezier(0.31, 0.1, 0.08, 0.96);
transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
```

### Keyframe Animations

**accordion-down**
```css
@keyframes accordion-down {
  0% { height: 0px; }
  100% { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,auto)))); }
}
```

**accordion-up**
```css
@keyframes accordion-up {
  0% { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,auto)))); }
  100% { height: 0px; }
}
```

**float**
```css
@keyframes float {
  0% { transform: translate(0px); }
  50% { transform: translate(4px, 8px); }
  100% { transform: translate(0px); }
}
```

**slide-from-left**
```css
@keyframes slide-from-left {
  0% { transform: translate(-100%); }
  100% { transform: translate(0px); }
}
```

**slide-to-left**
```css
@keyframes slide-to-left {
  0% { transform: translate(0px); }
  100% { transform: translate(-100%); }
}
```

**fade**
```css
@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
```

**slideUpAndFade**
```css
@keyframes slideUpAndFade {
  0% { opacity: 0; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0px); }
}
```

**slideRightAndFade**
```css
@keyframes slideRightAndFade {
  0% { opacity: 0; transform: translate(-2px); }
  100% { opacity: 1; transform: translate(0px); }
}
```

**slideDownAndFade**
```css
@keyframes slideDownAndFade {
  0% { opacity: 0; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0px); }
}
```

**slideLeftAndFade**
```css
@keyframes slideLeftAndFade {
  0% { opacity: 0; transform: translate(2px); }
  100% { opacity: 1; transform: translate(0px); }
}
```

## Component Patterns

Detected UI component patterns and their most common styles:

### Buttons (75 instances)

```css
.buttons {
  background-color: oklch(1 0 0);
  color: oklch(0.51 0 0);
  font-size: 13px;
  font-weight: 400;
  padding-top: 0px;
  padding-right: 0px;
  border-radius: 0px;
}
```

### Cards (131 instances)

```css
.cards {
  background-color: oklch(1 0 0);
  border-radius: 3.35544e+07px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  padding-top: 0px;
  padding-right: 0px;
}
```

### Links (319 instances)

```css
.links {
  color: oklch(0.205 0 0);
  font-size: 14px;
  font-weight: 400;
}
```

### Navigation (2 instances)

```css
.navigation {
  color: oklch(0.205 0 0);
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 8px;
  padding-right: 8px;
  position: relative;
}
```

### Footer (2 instances)

```css
.footer {
  color: oklch(0.205 0 0);
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 16px;
}
```

### Dropdowns (2 instances)

```css
.dropdowns {
  background-color: oklch(1 0 0);
  border-radius: 0px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 4px 8px -4px, rgba(0, 0, 0, 0.06) 0px 16px 24px -8px;
  border-color: oklch(0.937 0 0);
  padding-top: 0px;
}
```

### Badges (18 instances)

```css
.badges {
  color: oklch(0.51 0 0);
  font-size: 14px;
  font-weight: 400;
  padding-top: 0px;
  padding-right: 0px;
  border-radius: 4px;
}
```

### Tabs (72 instances)

```css
.tabs {
  background-color: oklch(0.205 0 0);
  color: oklch(1 0 0);
  font-size: 14px;
  font-weight: 500;
  padding-top: 0px;
  padding-right: 12px;
  border-color: oklch(0.205 0 0);
  border-radius: 8px;
}
```

## Component Clusters

Reusable component instances grouped by DOM structure and style similarity:

### Button — 7 instances, 2 variants

**Variant 1** (2 instances)

```css
  background: rgba(0, 0, 0, 0);
  color: oklch(0.51 0 0);
  padding: 4px 8px 4px 8px;
  border-radius: 6px;
  border: 0px solid oklch(0.937 0 0);
  font-size: 14px;
  font-weight: 500;
```

**Variant 2** (5 instances)

```css
  background: oklch(1 0 0);
  color: oklch(0.51 0 0);
  padding: 0px 12px 0px 12px;
  border-radius: 3.35544e+07px;
  border: 1px solid oklch(0 0 0 / 0.078);
  font-size: 14px;
  font-weight: 500;
```

### Button — 1 instance, 1 variant

**Variant 1** (1 instance)

```css
  background: oklch(1 0 0);
  color: oklch(0.205 0 0);
  padding: 0px 0px 0px 0px;
  border-radius: 3.35544e+07px;
  border: 1px solid oklch(0 0 0 / 0.078);
  font-size: 13px;
  font-weight: 500;
```

### Button — 1 instance, 1 variant

**Variant 1** (1 instance)

```css
  background: rgba(0, 0, 0, 0);
  color: oklch(0.51 0 0);
  padding: 0px 4px 0px 6px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0);
  font-size: 13px;
  font-weight: 500;
```

### Button — 1 instance, 1 variant

**Variant 1** (1 instance)

```css
  background: oklch(0.205 0 0);
  color: oklch(1 0 0);
  padding: 0px 0px 0px 0px;
  border-radius: 6px;
  border: 1px solid oklch(0.205 0 0);
  font-size: 14px;
  font-weight: 500;
```

### Button — 17 instances, 1 variant

**Variant 1** (17 instances)

```css
  background: rgba(0, 0, 0, 0);
  color: oklch(0.51 0 0);
  padding: 0px 0px 0px 0px;
  border-radius: 0px;
  border: 0px solid oklch(0.937 0 0);
  font-size: 13px;
  font-weight: 400;
```

### Button — 1 instance, 1 variant

**Variant 1** (1 instance)

```css
  background: oklch(0.205 0 0);
  color: oklch(1 0 0);
  padding: 0px 20px 0px 20px;
  border-radius: 3.35544e+07px;
  border: 1px solid oklch(0.205 0 0);
  font-size: 16px;
  font-weight: 500;
```

## Layout System

**7 grid containers** and **745 flex containers** detected.

### Container Widths

| Max Width | Padding |
|-----------|---------|
| 690px | 0px |
| 1264px | 0px |
| 100% | 0px |
| 1440px | 0px |
| 1400px | 40px |
| 1280px | 0px |

### Grid Column Patterns

| Columns | Usage Count |
|---------|-------------|
| 1-column | 3x |
| 3-column | 3x |
| 4-column | 1x |

### Grid Templates

```css
grid-template-columns: 384px 384px 384px;
gap: 16px;
grid-template-columns: 378.656px 378.672px 378.656px;
gap: 24px;
grid-template-columns: 136.609px 136.609px 136.609px 136.609px;
gap: 108px;
grid-template-columns: 378px 378px 378px;
gap: 24px;
grid-template-columns: 26px;
```

### Flex Patterns

| Direction/Wrap | Count |
|----------------|-------|
| column/nowrap | 156x |
| row/nowrap | 587x |
| row/wrap | 2x |

**Gap values:** `108px`, `10px normal`, `128px`, `12px`, `16px`, `24px`, `2px`, `32px`, `4px`, `64px 48px`, `6px`, `72px`, `8px`, `normal 2px`

## Accessibility (WCAG 2.1)

**Overall Score: 100%** — 63 passing, 0 failing color pairs

### Passing Color Pairs

| Foreground | Background | Ratio | Level |
|------------|------------|-------|-------|
| `#ffffff` | `#020202` | 20.75:1 | AAA |
| `#222222` | `#ffffff` | 15.91:1 | AAA |
| `#020202` | `#ffffff` | 20.75:1 | AAA |

## Design System Score

**Overall: 90/100 (Grade: A)**

| Category | Score |
|----------|-------|
| Color Discipline | 85/100 |
| Typography Consistency | 80/100 |
| Spacing System | 100/100 |
| Shadow Consistency | 100/100 |
| Border Radius Consistency | 90/100 |
| Accessibility | 100/100 |
| CSS Tokenization | 100/100 |

**Strengths:** Tight, disciplined color palette, Well-defined spacing scale, Clean elevation system, Consistent border radii, Strong accessibility compliance, Good CSS variable tokenization

**Issues:**
- No clear primary brand color detected
- 300 !important rules — prefer specificity over overrides
- 5442 duplicate CSS declarations

## Gradients

**5 unique gradients** detected.

| Type | Direction | Stops | Classification |
|------|-----------|-------|----------------|
| linear | to right | 2 | brand |
| linear | to left | 2 | brand |
| linear | — | 3 | bold |
| linear | to right | 3 | bold |
| linear | — | 3 | bold |

```css
background: linear-gradient(to right, oklch(1 0 0) 0%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to left, oklch(1 0 0) 0%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(in oklab, rgba(255, 255, 255, 0.3) 0%, rgba(102, 102, 102, 0.3) 100%);
background: linear-gradient(to right, oklab(1 0 0 / 0.8) 0%, rgba(0, 0, 0, 0) 50%, oklab(1 0 0 / 0.8) 100%);
background: linear-gradient(oklab(1 0 0 / 0.8) 0%, rgba(0, 0, 0, 0) 50%, oklab(1 0 0 / 0.8) 100%);
```

## Z-Index Map

**9 unique z-index values** across 3 layers.

| Layer | Range | Elements |
|-------|-------|----------|
| dropdown | 100,100 | ol.f.i.x.e.d. .t.o.p.-.0. .z.-.1.0.0. .f.l.e.x. .m.a.x.-.h.-.s.c.r.e.e.n. .w.-.f.u.l.l. .f.l.e.x.-.c.o.l.-.r.e.v.e.r.s.e. .p.-.4. .s.m.:.b.o.t.t.o.m.-.0. .s.m.:.r.i.g.h.t.-.0. .s.m.:.t.o.p.-.a.u.t.o. .s.m.:.f.l.e.x.-.c.o.l. .l.g.:.m.a.x.-.w.-.[.4.2.0.p.x.] |
| sticky | 10,50 | div.r.e.l.a.t.i.v.e. .z.-.1.0. .f.l.e.x. .w.-.f.u.l.l. .f.l.e.x.-.c.o.l, div.r.e.l.a.t.i.v.e. .z.-.1.0, div.f.r.o.m.-.b.a.c.k.g.r.o.u.n.d.-.s.u.b.t.l.e. .t.o.-.t.r.a.n.s.p.a.r.e.n.t. .a.b.s.o.l.u.t.e. .z.-.1.0. .t.r.a.n.s.i.t.i.o.n.-.o.p.a.c.i.t.y. .p.o.i.n.t.e.r.-.e.v.e.n.t.s.-.n.o.n.e. .o.p.a.c.i.t.y.-.0. .b.g.-.l.i.n.e.a.r.-.t.o.-.r. .l.e.f.t.-.0. .t.o.p.-.0. .h.-.f.u.l.l |
| base | -1,5 | svg.a.b.s.o.l.u.t.e, main.z.-.0. .f.l.e.x. .w.-.f.u.l.l. .f.l.e.x.-.c.o.l. .s.m.:.p.x.-.6. .p.x.-.3. .g.a.p.-.1.6. .l.g.:.g.a.p.-.3.2, div.a.b.s.o.l.u.t.e. .l.e.f.t.-.0. .t.o.p.-.0. .w.-.f.u.l.l |

## SVG Icons

**40 unique SVG icons** detected. Dominant style: **filled**.

| Size Class | Count |
|------------|-------|
| xs | 11 |
| sm | 16 |
| lg | 3 |
| xl | 10 |

**Icon colors:** `currentColor`, `rgb(0, 0, 0)`, `white`, `url(#triangleGradient)`

## Font Files

| Family | Source | Weights | Styles |
|--------|--------|---------|--------|
| KaTeX_AMS | self-hosted | 400 | normal |
| KaTeX_Caligraphic | self-hosted | 400, 700 | normal |
| KaTeX_Fraktur | self-hosted | 400, 700 | normal |
| KaTeX_Main | self-hosted | 400, 700 | normal, italic |
| KaTeX_Math | self-hosted | 400, 700 | italic |
| KaTeX_SansSerif | self-hosted | 400, 700 | normal, italic |
| KaTeX_Script | self-hosted | 400 | normal |
| KaTeX_Size1 | self-hosted | 400 | normal |
| KaTeX_Size2 | self-hosted | 400 | normal |
| KaTeX_Size3 | self-hosted | 400 | normal |
| KaTeX_Size4 | self-hosted | 400 | normal |
| KaTeX_Typewriter | self-hosted | 400 | normal |
| GeistMono | self-hosted | 100 900 | normal |
| GeistSans | self-hosted | 100 900 | normal |
| Lora | self-hosted | 400 700 | normal |

## Image Style Patterns

| Pattern | Count | Key Styles |
|---------|-------|------------|
| thumbnail | 67 | objectFit: cover, borderRadius: 0px, shape: square |
| general | 21 | objectFit: cover, borderRadius: 0px, shape: square |
| avatar | 11 | objectFit: cover, borderRadius: 3.35544e+07px, shape: circular |

**Aspect ratios:** 1:1 (77x), 3:2 (10x), 16:9 (6x), 0.26:1 (4x), 9:16 (2x)

## Motion Language

**Feel:** springy · **Scroll-linked:** yes

### Duration Tokens

| name | value | ms |
|---|---|---|
| `xs` | `100ms` | 100 |
| `sm` | `200ms` | 200 |
| `md` | `300ms` | 300 |
| `lg` | `500ms` | 500 |
| `xl` | `1s` | 1000 |

### Easing Families

- **custom** (184 uses) — `cubic-bezier(0.4, 0, 0.2, 1)`, `cubic-bezier(0.31, 0.1, 0.08, 0.96)`, `cubic-bezier(0.3, 0.1, 0.1, 0.95)`
- **spring** (2 uses) — `cubic-bezier(0.34, 1.56, 0.64, 1)`
- **ease-out** (12 uses) — `cubic-bezier(0, 0, 0.2, 1)`

### Spring / Overshoot Easings

- `cubic-bezier(0.34, 1.56, 0.64, 1)`

### Keyframes In Use

| name | kind | properties | uses |
|---|---|---|---|
| `logos-section-module__ricZ8G__marquee` | slide | transform | 1 |

## Component Anatomy

### button — 28 instances

**Slots:** label, icon
**Variants:** outline
**Sizes:** medium

| variant | count | sample label |
|---|---|---|
| default | 17 | 677 |
| outline | 11 | Templates |

## Brand Voice

**Tone:** neutral · **Pronoun:** you-only · **Headings:** Sentence case (tight)

### Top CTA Verbs

- **templates** (1)
- **resources** (1)
- **v** (1)
- **contact** (1)
- **image** (1)
- **mini** (1)
- **finance** (1)
- **k** (1)

### Button Copy Patterns

- "81" (2×)
- "3" (1×)
- "5" (1×)
- "33" (1×)
- "73" (1×)
- "95" (1×)
- "98" (1×)
- "182" (1×)
- "397" (1×)
- "575" (1×)

### Sample Headings

> What do you want to create?
> Start with a template
> Prompt.
Build. Publish.
> Sync with a repo
> Integrate with apps
> Start with a template
> Prompt.
Build. Publish.
> Sync with a repo
> Integrate with apps
> Deploy to Vercel

## Page Intent

**Type:** `landing` (confidence 0.45)
**Description:** Your collaborative AI assistant to design, iterate, and scale full-stack applications for the web.

## Section Roles

Reading order (top→bottom): content → faq → nav → testimonials → hero → testimonials → content → hero → cta → footer → footer

| # | Role | Heading | Confidence |
|---|------|---------|------------|
| 0 | content | — | 0.3 |
| 1 | faq | — | 0.85 |
| 2 | nav | — | 0.9 |
| 3 | testimonials | What do you want to create? | 0.4 |
| 4 | hero | Start with a template | 0.4 |
| 5 | testimonials | Prompt.
Build. Publish. | 0.4 |
| 6 | content | — | 0.3 |
| 7 | hero | Ship mobile sites | 0.4 |
| 8 | cta | Start building with v0 | 0.75 |
| 9 | footer | Product | 0.95 |
| 10 | footer | Product | 0.95 |

## Material Language

**Label:** `flat` (confidence 0)

| Metric | Value |
|--------|-------|
| Avg saturation | 0 |
| Shadow profile | soft |
| Avg shadow blur | 0px |
| Max radius | 35px |
| backdrop-filter in use | no |
| Gradients | 5 |

## Imagery Style

**Label:** `gradient-mesh` (confidence 0.101)
**Counts:** total 99, svg 10, icon 137, screenshot-like 1, photo-like 0
**Dominant aspect:** square-ish
**Radius profile on images:** full

## Component Library

**Detected:** `shadcn/ui` (confidence 0.65)

Evidence:
- shadcn css tokens

Also considered: tailwindcss (0.3)

## Quick Start

To recreate this design in a new project:

1. **Install fonts:** Add `GeistSans` from Google Fonts or your font provider
2. **Import CSS variables:** Copy `variables.css` into your project
3. **Tailwind users:** Use the generated `tailwind.config.js` to extend your theme
4. **Design tokens:** Import `design-tokens.json` for tooling integration