:root {
  /* Colors */
  --kds-color-text-accent-green: #037242;
  --kds-color-background-surface-primary: #FFFFFF;
  --kds-color-border-active: #3C3C3C;
  --kds-color-icon-green-inverse: #D2FEEB;
  --kds-color-border-accent-blue-bold: #0F0FBD;
  --kds-color-text-accent-blue: #4C4CF0;
  --kds-color-background-inverse-hover: #F2F2F2;
  --kds-color-text-accent-red-inverse-disabled: #FEF2F1;
  --kds-color-background-warning-bold: #836207;
  --kds-color-background-accent-green-bold-hovered: #025A34;
  --kds-color-border-warning-subtle: #F5C43D;
  --kds-color-background-danger-disabled: #F7BBB7;
  --kds-color-text-accent-purple: #8936C9;
  --kds-elevation-3-shadow-color: #00000033;
  --kds-color-text-primary: #171717;
  --kds-color-background-accent-green-bold-pressed: #024629;
  --kds-color-background-danger-bold-hovered: #931910;
  --kds-elevation-2-shadow-color: #0000001E;
  --kds-color-border-bold: #C9C9C9;
  --kds-color-border-danger-bold: #73140D;
  --kds-color-background-surface-secondary: #FAFAFA;
  --kds-color-background-danger-bold: #B81F14;
  --kds-color-background-selected: #2C2C2C;
  --kds-color-background-action-disabled: #B3B3B3;
  --kds-color-border-accent-blue-subtle: #C6C6FA;
  --kds-color-border-warning-bold: #4E3A04;
  --kds-color-border-accent-green-subtle: #06E584;
  --kds-color-background-warning-subtle: #FDF2D3;
  --kds-color-text-accent-purple-bolder: #582281;
  --kds-color-icon-warning: #614805;
  --kds-color-background-accent-purple-subtle: #F8F3FC;
  --kds-elevation-4-shadow-color: #00000047;
  --kds-color-background-accent-blue-subtle: #F1F1FE;
  --kds-color-border-focus: #AFAFF9;
  --kds-color-background-danger-subtle-hovered: #FBDDDB;
  --kds-color-icon-info: #1212E2;

  /* Typography */
  --font-primary: 'Inter', sans-serif;
  --font-fallback: Arial, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7: 7px;
  --space-9: 9px;
  --space-11: 11px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --space-30: 30px;
  --space-36: 36px;
  --space-48: 48px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 100%;
}

# Kickstarter Design System Specification

You are a Kickstarter design expert. Build UIs matching their visual language exactly.

## Brand Context
Kickstarter’s UI is clean, neutral, and content-first. The design avoids loud branding in structural elements, using restrained type and color. It communicates trust and creativity by framing projects with minimal interference.

## Color Palette
- Primary Neutral: #464646 — Main UI elements, semantic primary
- Link Blue: #0000EE — Body links
- Black: #000000 — Default text
- Neutral Text Gray: #656969 — Secondary text
- Neutral Dark Gray: #4D4D4D — Alt text
- Light Gray: #E0E0E0 — Dividers, light borders
- Accent Green: #05CE78 — Positive accents
- Accent Green Text: #037242 — Semantic brand green in text
- Rich Link Blue: #2B60FF — CTAs in links
- Hover Dark Gray: #3C3C3C — Hover border
- Hover Dark Teal: #037362 — Active hover accents
- Surface Primary: #FFFFFF — Page background
- Surface Secondary: #FAFAFA — Card backgrounds
- Bold Border Gray: #C9C9C9 — Card frames, buttons
- Warning Yellow Bold: #836207 — Strong warning states
- Warning Yellow Subtle: #FDF2D3 — Light warning bg
- Danger Red Bold: #B81F14 — Strong danger state
- Error Disabled BG: #F7BBB7 — Disabled danger
- Info Icon Blue: #1212E2 — Icons
- Purple Accent: #8936C9 — Text accents

## Typography
Font families:
- Primary: Inter, sans-serif
- Fallback: Arial

Sizes:
| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1-Large | Inter | 34px | 400 | 1.24 | Main titles |
| H1-Medium | Inter | 28px | 400 | 1.29 | Section headers |
| H1-Small | Inter | 21px | 400 | 1.43 | Card titles |
| Headline-Strong | Inter | 20px | 500 | 1.20 | Feature headings |
| Link-Large | Inter | 20px | 500 | 1.20 | Nav links |
| Body-Large | Inter | 18px | 400 | 1.33 | Content body |
| Body-Base | Inter | 16px | 400 | 1.50 | Regular text |
| Button-Base | Inter | 16px | 500 | 1.50 | Primary buttons |
| Caption | Inter | 14px | 400 | 1.50 | Supporting text |
| Caption-Strong | Inter | 14px | 500 | 1.14 | Labels |
| Small Button | Inter | 12px | 400 | 1.25 | Secondary buttons |

## Spacing & Grid
Base unit: 8px grid, with fine increments (4px for tight fits).
Scale: 1px, 3px, 4px, 6px, 7px, 9px, 11px, 12px, 16px, 18px, 24px, 30px, 36px, 48px.

## Border Radius
- none: 0px — Tables, squares
- sm: 4px — Buttons, small UI
- md: 8px — Card images
- lg: 16px — Containers
- xl: 20px — Badges
- full: 100% — Avatars

## Shadows & Depth
Mostly flat. Rare: rgba(0,0,0,0.17) 0px 2px 6px for subtle lift.

## Component Specifications

### Primary Button (.kds-button)
Default: transparent bg, #171717 text, 11px 15px padding, 4px radius, 1px solid #C9C9C9.  
Hover: transparent bg.  
Active: transparent bg.  
Focus: none.

### Secondary Button (.ksr-button.bttn-small)
Default: #464646 bg, white text, 9px 12px padding, radius 0px, 1px solid #464646.  
Hover/Active: unchanged.  
Focus: none.

### Navigation Links
No underline default, color from palette depending on context (blue #0000EE for inline, dark gray for nav).

### Input Fields
Text: white bg, 8px radius, padding 12px, no border.  
Select: white bg, neutral text, padding 12px 30px 12px 18px.  
Checkbox: transparent bg, no radius.

### Cards
BG: #FAFAFA or #FFFFFF, radius top corners 8px, thin 1px border #E0E0E0, minimal shadows.

## Layout & Responsive Rules
Breakpoints: 599px (mobile), 600px (tablet/desktop).  
Use base spacing across breakpoints; avoid jump in rhythm.

## Interaction Rules
Transitions: ~150ms ease on color/bg changes.  
Focus indicators: use border-accent colors (#AFAFF9 for blue focus).

## DO List
- Use ONLY palette colors.
- Maintain multiples of 8px spacing.
- Keep buttons consistent in radius (4px for outline, 0px for solid dark).
- Use Inter for headings and body; Arial only as fallback.
- Reserve green for positive actions; never for passive labels.

## DON'T List
- Don't add heavy shadows.
- Don't mix rounded and sharp corners arbitrarily.
- Don't use colors outside defined tokens.
- Don't add underlines to nav links.
- Don't use saturation for decoration — only for semantic states.

## Code Examples

Primary Button:
```css
.kds-button {
  background-color: transparent;
  color: #171717;
  padding: 11px 15px;
  border-radius: 4px;
  border: 1px solid #C9C9C9;
  font-weight: 500;
  font-size: 16px;
}
.kds-button:hover { background-color: transparent; }

.ksr-button {
  background-color: #464646;
  color: #fff;
  padding: 9px 12px;
  border-radius: 0;
  border: 1px solid #464646;
  font-size: 12px;
}

.input-text {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  border: none;
}

---

## 9. Summary

**TL;DR** — Kickstarter’s system is neutral-first, project-focused, with semantic tokens for every functional state. Minimal shadows, consistent radii, and disciplined typography make it clean and trustworthy.

**Brand Keywords**: neutral-structured, token-driven, content-first, restrained-bold