# StudioCut.Video — Design System
Extracted from https://studiocut.video/ (CSS source + HTML inspection)

---

## 1. Color Palette

### CSS Custom Properties (Light Mode)
```css
--paper:      #fffdfa   /* page background — warm off-white */
--paper-2:    #EBE5D8   /* subtle tinted background, dividers, icon bg */
--card:       #FBF9F3   /* card background */
--card-raise: #FFFFFF   /* elevated/hovered card */
--ink:        #181510   /* primary text, headings */
--ink-2:      #48433A   /* body text, secondary text */
--ink-3:      #7B7568   /* muted text, captions */
--ink-4:      #A39C8C   /* very muted, metadata */
--navy:       #2C5273   /* accent blue */
--navy-deep:  #1E3B54   /* deep navy */
--amber:      #F29F05   /* primary brand accent, CTA gradient start */
--rust:       #D93D04   /* secondary brand accent, CTA gradient end */
--line:       rgba(24,21,16,0.14)   /* border color */
--line-soft:  rgba(24,21,16,0.08)   /* subtle border */
```

### Accent Chip Colors
```css
--c-navy: #2C5273
--c-amber: #E08A00
--c-rose:  #C7547A
--c-mint:  #1F8A63
--c-lav:   #6661C9
```

### Dark Mode Overrides
```css
--paper:      #14110D
--paper-2:    #1F1B14
--card:       #1A1611
--card-raise: #231E16
--ink:        #F0EBE0
--ink-2:      #C5BEAE
--ink-3:      #8C857A
--ink-4:      #5C5648
--line:       rgba(245,240,225,0.10)
--line-soft:  rgba(245,240,225,0.05)
```

### Key Gradients
```
Primary CTA:     linear-gradient(120deg, #F29F05, #D93D04)
Gradient text:   linear-gradient(135deg, #2C5273, #D93D04 70%, #F29F05)
Progress bar:    linear-gradient(90deg, #F29F05, #D93D04)
Ambient mesh bg: radial-gradient(ellipse 800px 600px at 12% 5%, rgba(242,159,5,0.12), transparent 60%),
                 radial-gradient(ellipse 700px 500px at 88% 8%, rgba(199,84,122,0.10), transparent 60%),
                 radial-gradient(ellipse 900px 600px at 50% 100%, rgba(31,138,99,0.10), transparent 60%)
```

---

## 2. Typography

### Font Families
| Role | Family | Weights |
|------|---------|---------|
| Headings / Display | `Space Grotesk` | 400, 500, 600, 700 |
| Body / UI | `Inter` | 400, 500, 600, 700 |
| Mono / Labels / Eyebrows | `JetBrains Mono` | 400, 500, 700 |

### Google Fonts import
```
https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap
```

### Type Scale
```css
/* Headings — Space Grotesk, weight 600, letter-spacing -0.03em, line-height 1.1 */
h1:           2.5rem
h2:           1.875rem
h3:           1.25rem
h4:           1rem

/* Display (hero) */
.display:     clamp(2.5rem, 6vw, 4.5rem)  weight 600, letter-spacing -0.035em, line-height 1.04
.hero h1:     clamp(2.7rem, 6.6vw, 5rem)  letter-spacing -0.045em
.sec-title:   clamp(2rem, 4.4vw, 3.1rem)

/* Body */
body:         16px / 1.6
.lead:        1.125rem / 1.6
.sec-lede:    1.08rem / 1.62
.hero-lede:   1.12rem / 1.64
.muted:       var(--ink-3)

/* Mono labels */
.eyebrow:     0.7rem, weight 500, letter-spacing 0.2em, uppercase — JetBrains Mono
.chip:        0.6rem, weight 700, letter-spacing 0.1em, uppercase — JetBrains Mono
.sec-num:     0.74rem, letter-spacing 0.16em — JetBrains Mono
```

### Eyebrow pattern
```css
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--ink-3);
}
/* Amber variant: color → var(--rust), line → var(--rust) */
```

---

## 3. Spacing & Layout

### Radius tokens
```css
--r-s: 8px    /* small: nav items, icons */
--r-m: 16px   /* medium: cards, dropdowns */
--r-l: 26px   /* large: hero panels */
```

### Shadow tokens
```css
--shadow-s: 0 2px 8px rgba(24,21,16,0.06)
--shadow-m: 0 14px 34px -16px rgba(24,21,16,0.30)
--shadow-l: 0 40px 80px -32px rgba(24,21,16,0.42)
```

### Layout
```css
--maxw:     1200px   /* max content width */
--header-h: 72px

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;   /* 20px on mobile */
}

.pad    { padding: 120px 0 }   /* 76px on mobile */
.pad-sm { padding: 64px 0 }
```

### Section header pattern
```css
.sec-head {
  max-width: 680px;
  margin-bottom: 60px;
}
/* centered variant: .sec-head.center */
```

---

## 4. Components

### Buttons
```css
/* Base */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 99px;          /* pill shape */
  font-weight: 600;
  font-size: 0.92rem;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
  border: 1.5px solid transparent;
  transition: transform 0.25s, box-shadow 0.25s;
}

/* Primary (dark) */
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { box-shadow: var(--shadow-m); transform: translateY(-1px); }

/* Amber CTA */
.btn-amber { background: linear-gradient(120deg, var(--amber), var(--rust)); color: #fff; }
.btn-amber:hover { box-shadow: 0 16px 32px -12px rgba(217,61,4,0.6); transform: translateY(-1px); }

/* Ghost/outline */
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(24,21,16,0.04); }

/* Sizes */
.btn-sm { padding: 9px 16px; font-size: 0.84rem; }
.btn-lg { padding: 16px 28px; font-size: 1rem; }
```

### Cards
```css
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-m);  /* 16px */
  padding: 26px;
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-m);
  background: var(--card-raise);
  border-color: var(--ink);
}

/* Card icon */
.card-ico {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--paper-2);
  margin-bottom: 18px;
  color: var(--ink);
}
.card:hover .card-ico { background: var(--ink); color: var(--amber); }
```

### Chips / Badges
```css
.chip {
  display: inline-flex;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 99px;
  background: var(--paper-2); color: var(--ink-2);
}
/* Variants */
.chip-navy  { background: rgba(44,82,115,0.12);  color: #2C5273; }
.chip-amber { background: rgba(242,159,5,0.16);  color: #E08A00; }
.chip-rose  { background: rgba(199,84,122,0.14); color: #C7547A; }
.chip-mint  { background: rgba(31,138,99,0.13);  color: #1F8A63; }
.chip-lav   { background: rgba(102,97,201,0.14); color: #6661C9; }
```

### Header / Nav
```css
/* Sticky, frosted glass */
background: rgba(243,239,230, 0.82);
backdrop-filter: blur(14px);
border-bottom: 1px solid transparent;  /* shows on scroll */
height: 72px;
/* Scrolled state .hdr.stuck: border-color: var(--line-soft); opacity 0.94 */
```

### Gradient text
```css
.gradient-text {
  background: linear-gradient(135deg, var(--navy), var(--rust) 70%, var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

### Topbar announcement
```css
background: var(--ink);     /* dark bar */
color: var(--paper);
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem; letter-spacing: 0.04em;
/* live dot: background #5BD08A, pulse animation */
/* accent text: color var(--amber) */
```

---

## 5. Visual Motifs & Texture

### Background mesh (ambient glow)
Soft radial gradients fixed to viewport — amber top-left, rose top-right, mint bottom-center.
Overlaid with a subtle SVG fractal noise grain texture (opacity 0.4, mix-blend-mode: multiply).

### Grain overlay
```css
.grain {
  position: fixed; inset: 0;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml, ... feTurbulence baseFrequency='0.85' ...") 
}
```

### Scroll progress bar
```css
position: fixed; top: 0; left: 0; height: 3px;
background: linear-gradient(90deg, var(--amber), var(--rust));
width driven by JS scroll %
```

### Preloader
Dark background `#181510`, centered "Studio**Cut**" in Space Grotesk, amber highlighted,
3px gradient progress bar, JetBrains Mono label. Slides up `translateY(-101%)` on done.

---

## 6. Animation & Motion

```css
--ease: cubic-bezier(0.2, 0.7, 0.2, 1)   /* signature easing */

/* Reveal on scroll */
.rv { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .rv { opacity: 0; transform: translateY(28px); }
.rv.in  { opacity: 1; transform: none; }

/* Card hover lift */
transform: translateY(-5px);  transition: 0.35s var(--ease)

/* Button hover lift */
transform: translateY(-1px);  transition: 0.25s var(--ease)

/* Live pulse dot */
@keyframes livepulse { 70%,100% { box-shadow: 0 0 0 7px rgba(91,208,138,0) } }

/* Reduced motion: all durations → 0.01ms, no scroll-behavior */
```

---

## 7. Overall Aesthetic

**Warm Brutalist Editorial** — the palette is warm parchment (not pure white), dark espresso ink (not pure black), amber+rust CTA accents. Typography mixes Space Grotesk (geometric, confident headings) with Inter (clean readable body) and JetBrains Mono (technical labels/eyebrows). The grain texture + ambient mesh glows give it depth without relying on heavy photography. Cards are minimal — off-white with thin ink borders that flip dark on hover. Everything feels like a premium editorial tool for creators, not a generic SaaS dashboard.

**Key design rules to apply:**
1. Replace pure white `#fff` backgrounds with `#fffdfa` (--paper)
2. Replace pure black text with `#181510` (--ink)
3. All CTA buttons → amber-to-rust gradient pill, Space Grotesk font
4. Section labels → JetBrains Mono eyebrow with 22px line prefix
5. Cards → `#FBF9F3` bg, `rgba(24,21,16,0.14)` border, lift on hover
6. Headings → Space Grotesk, weight 600, letter-spacing -0.03em
7. Add grain + ambient mesh to page background
8. Scroll reveal: `opacity 0` + `translateY(28px)` → `.in` via IntersectionObserver
9. Gradient text spans: navy→rust→amber at 135deg
10. Section eyebrows use `--rust` color with mono font + horizontal rule prefix