Don't start from scratch…

## Framer Design System Setup

You are setting up a design system inside Framer. Apply everything below using native Framer tools:
- Create all **Text Styles** using Framer's text style panel (Style Presets)
- Create all **Color Styles** using Framer's color style panel (Color Tokens)
- Do not hardcode colors or font sizes inline — everything must live in the style system

---

### Fonts

- Headings H1–H6: "Inter" — use for all heading text styles (H1 through H6)
- Paragraphs (body copy): "Inter" — use for Paragraph/Large and Paragraph/Small text styles
- UI labels and supporting text: "Inter" — use for captions, labels, navigation, buttons

---

### Text Styles

Create the following text styles in Framer. Name them exactly as shown.

| Style name   | Font                    | Size   | Line height       | Letter spacing      | Weight |
|--------------|-------------------------|--------|-------------------|---------------------|--------|
| Heading/H1   | Inter    | 56px | 1.02 | -0.030em | 700 |
| Heading/H2   | Inter    | 44px | 1.06 | -0.025em | 650 |
| Heading/H3   | Inter    | 34px | 1.12 | -0.020em | 620 |
| Heading/H4   | Inter  | 26px | 1.18 | -0.015em | 600 |
| Heading/H5   | Inter  | 20px | 1.22 | -0.010em | 580 |
| Heading/H6   | Inter  | 16px | 1.28 | -0.005em | 560 |

---

### Paragraph Styles

| Style name      | Font                   | Size  | Line height | Letter spacing | Weight |
|-----------------|------------------------|-------|-------------|----------------|--------|
| Paragraph/Large | Inter | 18px  | 1.6         | -0.010em        | 400    |
| Paragraph/Small | Inter | 14px  | 1.5         | 0.000em            | 400    |

---

### Color Styles

Create the following color styles in Framer using the Color Token panel. Use the folder/name format exactly as shown. The base shade (marked ← base) is the closest match to the chosen color and should be used as the default reference.

#### Theme

- Theme/50   #f7f7f7
- Theme/100   #f0f0f0
- Theme/200   #d9d9d9
- Theme/300   #bdbdbd
- Theme/400   #9e9e9e
- Theme/500   #808080
- Theme/600   #666666
- Theme/700   #4d4d4d
- Theme/800   #333333
- Theme/900   #1f1f1f
- Theme/950   #121212  ← base

#### Accent

- Accent/50   #f4f7fa
- Accent/100   #e7eef8
- Accent/200   #bfd2f3
- Accent/300   #87b0f2
- Accent/400   #4a8af2  ← base
- Accent/500   #0b64f4
- Accent/600   #0c50c0
- Accent/700   #0c3d8d
- Accent/800   #0b295b
- Accent/900   #0a1a34
- Accent/950   #070f1c


---

### Animations

Animation style: **Subtle**

Use restrained, purposeful motion that supports the content without distracting from it.
- Appear effects: fade in with a gentle upward drift (opacity 0→1, y: 20px→0, duration ~0.5s, spring or ease-out)
- Hover effects on interactive elements (buttons, cards, links): very slight scale (1→1.02) or opacity shift, short duration (0.15–0.2s)
- Page transitions: simple fade or slide, under 0.4s
- Avoid looping animations, parallax, or anything that moves continuously


---

### Buttons

Create all buttons as **Framer ComponentNodes** with variants, not as inline frames. Each button must have:
- A **Default** variant
- A **Hover** variant (wired via a hover Gesture Variant)
- Each variant difference should be clearly visible — typically a background color shift or opacity change

Do not hardcode colors. Use the Color Tokens created above.

#### Primary Button

A filled button using the Accent color as background.

| Size   | Padding       | Font size | Font weight | Radius |
|--------|---------------|-----------|-------------|--------|
| Large  | 14px 28px     | 16px      | 600         | 8px    |
| Medium | 10px 20px     | 14px      | 600         | 8px    |
| Small  | 7px 14px      | 12px      | 600         | 8px    |

- Background: Accent/400 (light mode), Accent/300 (dark mode)
- Text: white if accent is dark, dark if accent is light
- Hover variant: background shifts to Accent/500 (light) / Accent/200 (dark)
- Create one ComponentNode named "Button/Primary" with size as a variant property (Large / Medium / Small)

#### Secondary Button

An outlined button using a **subtle** shade of the Theme color — not the full dark theme color, but a mid-range tint so the border reads as refined rather than heavy.

| Size   | Padding       | Font size | Font weight | Radius |
|--------|---------------|-----------|-------------|--------|
| Large  | 14px 28px     | 16px      | 600         | 8px    |
| Medium | 10px 20px     | 14px      | 600         | 8px    |
| Small  | 7px 14px      | 12px      | 600         | 8px    |

**Border (critical):**
- Thickness: **1px** — never 2px. A thin border is intentional and not a mistake.
- Light mode border color: Theme/300 — a mid-range tint, not Theme/900 or the raw theme hex
- Dark mode border color: Theme/700 — a mid-range tint visible against dark backgrounds
- Do NOT use the darkest theme shade or the raw input color as the border — it will look heavy and generic

**Text color:**
- Light mode: Theme/900 (dark enough to read, but use the token not a hardcoded value)
- Dark mode: Theme/100

**Background:** transparent in both modes

**Hover variant:**
- Light mode: border shifts to Theme/500, text shifts to Theme/700, background gets Theme/50 at very low opacity (e.g. 30%)
- Dark mode: border shifts to Theme/400, text stays Theme/100, background gets Theme/900 at 40% opacity

- Create one ComponentNode named "Button/Secondary" with size as a variant property (Large / Medium / Small)
- Wire hover states using Framer's gesture variant system
- Expose a label string variable as a control
- Use Color Tokens exclusively — never hardcode hex values