# Sem Codar — Brand Identity System (Unified Reference)

> **Purpose:** Single source of truth for AI agents reproducing the Sem Codar visual identity.
> All values are verified against the live codebase (`tokens.ts`, `tokens.css.ts`, `global.css`).
> Last verified: 2026-03-27.

---

## 1. Design Tokens (Fundamentals)

### 1.1 Colors

Source of truth: `src/tokens.ts`

| Variable | Hex | Role |
|----------|-----|------|
| `var(--c-blue)` | `#0058D4` | Primary accent — links, interactive elements, focus rings |
| `var(--c-blueLight)` | `#5B9BFF` | Dark-theme accent, sidebar active, lighter interactive states |
| `var(--c-purple)` | `#AF6DFF` | Secondary accent — badges, decorative highlights, gradients |
| `var(--c-red)` | `#F84F2E` | Error, alert, validation failure |
| `var(--c-green)` | `#63D059` | Success state, CTA gradient component |
| `var(--c-greenCta)` | `#84CC16` | CTA buttons — primary call-to-action green |
| `var(--c-yellow)` | `#FFB801` | Attention, rewards, decorative icons |
| `var(--c-yellowEm)` | `#FACC15` | Emphasis highlight, golden accents, certificates |
| `var(--c-black)` | `#1C1C1C` | Base dark — text on light backgrounds, dark fills |
| `var(--c-cream)` | `#FBF9F4` | Light text on dark, light backgrounds |
| `var(--c-creamAlt)` | `#F5F0E8` | Light mode background alternative |
| `var(--c-grayDark)` | `#27272A` | Borders, dividers, auxiliary backgrounds |

### 1.2 Typography

| Variable | Font Family | Default Weight | Role |
|----------|-------------|----------------|------|
| `var(--f-display)` | `Sora, sans-serif` | 800 | Titles, headings, hero text, CTA button labels |
| `var(--f-body)` | `Plus Jakarta Sans, sans-serif` | 400–600 | Body text, UI, descriptions, regular buttons |
| `var(--f-mono)` | `JetBrains Mono, monospace` | 500 | Hex codes, labels, code, badges, technical values |
| `var(--f-script)` | `Yellowtail, cursive` | 400 | Decorative accents only — signatures, special highlights |

> **Discontinued fonts:** Outfit and Albert Sans are deprecated. Never use them.

#### Type Scale

| Level | Font | Size | Weight | Letter-spacing | Line-height |
|-------|------|------|--------|----------------|-------------|
| Display (H1) | `var(--f-display)` | `clamp(34px, 4.4vw, 62px)` | 800 | `-0.028em` | 1.03–1.08 |
| H2 | `var(--f-display)` | 40px | 700 | `-0.02em` | 1.15 |
| H3 | `var(--f-body)` | 22px | 700 | normal | 1.3 |
| Body | `var(--f-body)` | 17px | 400 | normal | 1.78 |
| Label | `var(--f-mono)` | 11px | 500 | `0.2em` (uppercase) | normal |
| Mono | `var(--f-mono)` | 14px | 500 | `0.01em` | normal |

#### Section Title CSS (exact)

```css
.section__title {
  font-family: var(--f-display);
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.028em;
  background: linear-gradient(145deg,
    var(--text) 0%,
    color-mix(in srgb, var(--text) 82%, var(--text-2)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text); /* fallback */
}
```

#### Section Label CSS (mono badge with pulsing dot)

```css
.section__label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.section__label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 2px rgba(var(--accent-rgb), 0.6);
  animation: pulse-dot 2.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.7; }
}
```

### 1.3 Border Radius

| Variable | Value | Use |
|----------|-------|-----|
| `var(--r-xs)` | `4px` | Badges, small tags |
| `var(--r-sm)` | `8px` | Inputs, small buttons |
| `var(--r-md)` | `14px` | CTA buttons, inner cards |
| `var(--r-lg)` | `22px` | Main cards, glass panels, sections |

### 1.4 Transitions

| Variable | Value | Use |
|----------|-------|-----|
| `var(--t-fast)` | `200ms ease` | Buttons, inputs, micro-interactions |
| `var(--t-slow)` | `380ms cubic-bezier(0.4, 0, 0.2, 1)` | Cards, sections, color/background changes |

#### Named Easing Curves (used across the project)

| Name | Value | Use |
|------|-------|-----|
| Spring/bounce | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Card hover lifts, icon bounces, copy-hint reveals |
| Smooth elastic | `cubic-bezier(0.16, 1, 0.3, 1)` | Scroll reveals, section entrances, stagger items |
| Material standard | `cubic-bezier(0.4, 0, 0.2, 1)` | Palette strip expansion, smooth slides |

### 1.5 Layout

| Variable | Value |
|----------|-------|
| `var(--sidebar-w)` | `260px` |
| `var(--content-max)` | `1600px` |

---

## 2. Semantic Surfaces

### 2.1 Dark Theme (Default)

| Variable | Value | Role |
|----------|-------|------|
| `--bg` | `#1C1C1C` | Page background (semantic) |
| `--bg-2` | `#171717` | Secondary background |
| `--surface` | `#252525` | Card / panel surface |
| `--surface-2` | `#2E2E2E` | Elevated surface |
| `--border` | `#363636` | Border color |
| `--border-sub` | `#2C2C2C` | Subtle border |
| `--text` | `#FBF9F4` | Primary text |
| `--text-2` | `#B2B2B2` | Secondary text, descriptions |
| `--text-3` | `#8A8A8A` | Muted text, placeholders |
| `--accent` | `var(--c-blue-light)` | Primary interactive accent |
| `--accent-rgb` | `91, 155, 255` | Accent as RGB triplet (for rgba()) |
| `--accent-dim` | `rgba(91, 155, 255, 0.14)` | Accent-tinted background |
| `--accent-2` | `var(--c-purple)` | Secondary accent |
| `--accent-2-dim` | `rgba(175, 109, 255, 0.14)` | Secondary accent-tinted bg |
| `--section-a-bg` | `#1C1C1C` | Odd section background |
| `--section-b-bg` | `#171717` | Even section background |
| `--section-fg` | `#FBF9F4` | Section foreground text |
| `--mark-fill` | `#FBF9F4` | Logo / mark fill color |
| `--mark-bg` | `#1C1C1C` | Logo / mark background |
| `--rule-ok-bg` | `rgba(132, 204, 22, 0.07)` | "Do" rule card background |
| `--rule-ok-border` | `rgba(132, 204, 22, 0.22)` | "Do" rule card border |
| `--rule-ok-text` | `#AEDD8A` | "Do" rule text |
| `--rule-no-bg` | `rgba(248, 79, 46, 0.07)` | "Don't" rule card background |
| `--rule-no-border` | `rgba(248, 79, 46, 0.22)` | "Don't" rule card border |
| `--rule-no-text` | `#F4876E` | "Don't" rule text |

### 2.2 Light Theme

Applied via `html[data-theme="light"]`.

| Variable | Value | Role |
|----------|-------|------|
| `--bg` | `#FBF9F4` | |
| `--bg-2` | `#F3EFE8` | |
| `--surface` | `#FFFFFF` | |
| `--surface-2` | `#ECE9E3` | |
| `--border` | `#DDD9D1` | |
| `--border-sub` | `#E8E4DC` | |
| `--text` | `#1C1C1C` | |
| `--text-2` | `#6A6461` | |
| `--text-3` | `#A09C98` | |
| `--accent` | `var(--c-blue)` | Uses full blue (not blueLight) in light |
| `--accent-rgb` | `0, 88, 212` | |
| `--accent-dim` | `rgba(0, 88, 212, 0.08)` | |
| `--accent-2` | `var(--c-purple)` | |
| `--accent-2-dim` | `rgba(175, 109, 255, 0.10)` | |
| `--section-a-bg` | `#FBF9F4` | |
| `--section-b-bg` | `#F3EFE8` | |
| `--section-fg` | `#1C1C1C` | |
| `--mark-fill` | `#1C1C1C` | |
| `--mark-bg` | `#FBF9F4` | |
| `--rule-ok-bg` | `rgba(132, 204, 22, 0.08)` | |
| `--rule-ok-border` | `rgba(132, 204, 22, 0.28)` | |
| `--rule-ok-text` | `#3A7018` | |
| `--rule-no-bg` | `rgba(248, 79, 46, 0.07)` | |
| `--rule-no-border` | `rgba(248, 79, 46, 0.22)` | |
| `--rule-no-text` | `#C02E12` | |

---

## 3. Liquid Glass System

The Liquid Glass aesthetic is the visual core of this identity. Every glass/frosted surface **MUST** use these tokens. Never construct glass effects from scratch.

### 3.1 Glass Surface Tokens

| Token | Dark Value | Light Value | Use |
|-------|-----------|-------------|-----|
| `var(--g-1)` | `rgba(255,255,255, 0.055)` | `rgba(255,255,255, 0.62)` | Base panel / container |
| `var(--g-2)` | `rgba(255,255,255, 0.085)` | `rgba(255,255,255, 0.68)` | Card surface |
| `var(--g-3)` | `rgba(255,255,255, 0.125)` | `rgba(255,255,255, 0.78)` | Hover / elevated |

### 3.2 Glass Blur

| Token | Dark Value | Light Value |
|-------|-----------|-------------|
| `var(--g-blur)` | `blur(28px) saturate(200%) brightness(108%)` | `blur(28px) saturate(160%) brightness(103%)` |
| `var(--g-blur-heavy)` | `blur(48px) saturate(220%) brightness(112%)` | `blur(44px) saturate(170%) brightness(104%)` |

### 3.3 Glass Borders

| Token | Dark Value | Light Value |
|-------|-----------|-------------|
| `var(--g-border)` | `rgba(255,255,255, 0.16)` | `rgba(255,255,255, 0.92)` |
| `var(--g-border-dim)` | `rgba(255,255,255, 0.04)` | `rgba(0,0,0, 0.06)` |
| `var(--g-border-strong)` | `rgba(255,255,255, 0.28)` | `rgba(255,255,255, 0.98)` |

### 3.4 Glass Shadow Anatomy

Shadows are **always multi-layer** with blue-tinted depth (dark) or purple/indigo-tinted depth (light).

#### Dark Theme Shadows

```css
/* Panel / container — var(--g-shadow) */
box-shadow:
  inset 0 1.5px 0 rgba(255,255,255, 0.20),   /* 1. inner top highlight */
  inset 0 -1px  0 rgba(0,0,0, 0.25),          /* 2. inner bottom shadow */
  0 2px  4px  rgba(0,0,0, 0.18),              /* 3. near depth */
  0 8px  24px rgba(0,0,0, 0.36),              /* 4. mid depth */
  0 28px 72px rgba(0, 20, 60, 0.55);          /* 5. deep depth — BLUE TINTED */

/* Card — var(--g-shadow-card) */
box-shadow:
  inset 0 1px 0 rgba(255,255,255, 0.16),
  inset 0 -1px 0 rgba(0,0,0, 0.12),
  0 4px 12px rgba(0,0,0, 0.30),
  0 12px 36px rgba(0, 10, 40, 0.44);

/* Hover — var(--g-shadow-hover) */
box-shadow:
  inset 0 1px 0 rgba(255,255,255, 0.22),
  inset 0 -1px 0 rgba(0,0,0, 0.10),
  0 6px 18px rgba(0,0,0, 0.35),
  0 18px 52px rgba(0, 20, 80, 0.52),
  0 0 0 1px rgba(255,255,255, 0.08);
```

#### Light Theme Shadows (purple/indigo tint)

```css
/* Light --g-shadow */
box-shadow:
  inset 0 1.5px 0 rgba(255, 255, 255, 0.98),
  inset 0 -1px 0 rgba(0, 0, 0, 0.04),
  0 8px 32px rgba(80, 60, 160, 0.08),
  0 2px 8px rgba(0, 0, 0, 0.05);

/* Light --g-shadow-card */
box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.90),
  0 6px 24px rgba(80, 60, 160, 0.12),
  0 1px 4px rgba(0, 0, 0, 0.05);

/* Light --g-shadow-hover */
box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.96),
  0 14px 42px rgba(80, 60, 160, 0.16),
  0 3px 10px rgba(0, 0, 0, 0.07);
```

### 3.5 Prismatic Specular Highlight

Applied as `::after` pseudo-element on the top edge of glass elements. Creates a chromatic light-refraction line.

```css
/* Dark theme */
--g-specular: linear-gradient(
  90deg,
  transparent 0%,
  rgba(255, 255, 255, 0.0) 8%,
  rgba(80, 160, 255, 0.35) 22%,
  rgba(200, 180, 255, 0.45) 38%,
  rgba(255, 255, 255, 0.72) 50%,
  rgba(180, 140, 255, 0.45) 62%,
  rgba(100, 200, 255, 0.30) 78%,
  rgba(255, 255, 255, 0.0) 92%,
  transparent 100%
);

/* Light theme */
--g-specular: linear-gradient(
  90deg,
  transparent 0%,
  rgba(255, 255, 255, 0.0) 10%,
  rgba(80, 120, 255, 0.45) 25%,
  rgba(255, 255, 255, 1.0) 50%,
  rgba(150, 100, 255, 0.45) 75%,
  rgba(255, 255, 255, 0.0) 90%,
  transparent 100%
);
```

#### How to apply the specular highlight:

```css
.glass::after {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 1px;
  background: var(--g-specular);
  border-radius: 1px;
  pointer-events: none;
  z-index: 3;
}
```

### 3.6 Body & Navigation Background Tokens

| Token | Dark Value | Light Value | Role |
|-------|-----------|-------------|------|
| `--bg-body` | `#08080e` | `radial-gradient(ellipse 70% 50% at 0% 0%, rgba(0,88,212,0.05) 0%, transparent 60%), radial-gradient(ellipse 60% 45% at 100% 0%, rgba(175,109,255,0.04) 0%, transparent 55%), linear-gradient(160deg, #FFFFFF 0%, #FDFCFF 60%, #FAFBFF 100%)` | Page body background |
| `--sidebar-bg` | `rgba(8, 8, 14, 0.82)` | `rgba(255, 253, 250, 0.86)` | Sidebar glass surface |
| `--sidebar-border` | `rgba(255, 255, 255, 0.07)` | `rgba(0, 0, 0, 0.07)` | Sidebar border |
| `--sidebar-hover` | `rgba(255, 255, 255, 0.05)` | `rgba(0, 0, 0, 0.04)` | Sidebar link hover bg |
| `--footer-bg` | `rgba(6, 6, 10, 0.92)` | `rgba(253, 251, 247, 0.84)` | Footer glass surface |
| `--footer-border` | `rgba(255, 255, 255, 0.06)` | `rgba(0, 0, 0, 0.06)` | Footer border |

### 3.7 Glass Utility Classes

#### `.glass` — Base panel / container

```css
.glass {
  background: var(--g-1);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border-radius: var(--r-lg);
  border: 1px solid var(--g-border);
  border-bottom-color: var(--g-border-dim);
  border-right-color: var(--g-border-dim);
  box-shadow: var(--g-shadow);
  transition: background var(--t-slow), box-shadow var(--t-slow), border-color var(--t-slow);
  position: relative;
}
/* Specular highlight on top edge */
.glass::after {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 1px;
  background: var(--g-specular);
  border-radius: 1px;
  pointer-events: none;
  z-index: 3;
}
```

#### `.glass--card` — Card with shimmer on hover

```css
.glass--card {
  background: var(--g-2);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border-radius: var(--r-md);
  border: 1px solid var(--g-border);
  border-bottom-color: var(--g-border-dim);
  box-shadow: var(--g-shadow-card);
  transition: background var(--t-fast), box-shadow var(--t-fast),
              transform var(--t-fast), border-color var(--t-slow);
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep pseudo-element (hidden by default) */
.glass--card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.07) 40%,
    rgba(255, 255, 255, 0.13) 50%,
    rgba(255, 255, 255, 0.07) 60%,
    transparent 80%
  );
  transform: translateX(-120%) skewX(-15deg);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

/* Hover: shimmer sweeps across, card lifts and brightens */
.glass--card:hover {
  background: var(--g-3);
  box-shadow: var(--g-shadow-hover);
  transform: translateY(-3px) scale(1.005);
}
.glass--card:hover::before {
  animation: glass-shimmer 0.7s ease-out forwards;
}

/* Specular highlight on top edge */
.glass--card::after {
  content: '';
  position: absolute;
  top: 0; left: 4%; right: 4%;
  height: 1px;
  background: var(--g-specular);
  border-radius: 1px;
  pointer-events: none;
  z-index: 3;
}

/* Card children sit above shimmer + specular */
.glass--card > * { position: relative; z-index: 2; }

@keyframes glass-shimmer {
  0%   { transform: translateX(-120%) skewX(-15deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(260%) skewX(-15deg); opacity: 0; }
}
```

#### `.glass--nav` — Sidebar / navigation

```css
.glass--nav {
  background: var(--sidebar-bg);
  backdrop-filter: var(--g-blur-heavy);
  -webkit-backdrop-filter: var(--g-blur-heavy);
  border-right: 1px solid var(--sidebar-border);
}
```

#### `.glass--pill` — Pill / badge

```css
.glass--pill {
  background: var(--g-1);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border-radius: 100px;
  border: 1px solid var(--g-border);
  border-bottom-color: var(--g-border-dim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  position: relative;
}
```

#### `.glass--elevated` — Elevated state

```css
.glass--elevated {
  background: var(--g-3);
  backdrop-filter: var(--g-blur-heavy);
  -webkit-backdrop-filter: var(--g-blur-heavy);
  box-shadow: var(--g-shadow-hover);
}
```

---

## 4. Backgrounds & Page Layers

Every page **MUST** have all these layers in order. None can be omitted.

### Layer Stack (z-index order)

| Order | Layer | z-index | Description |
|-------|-------|---------|-------------|
| 1 | Body color | auto | `#08080e` deep abyss base (dark) or white gradient (light) |
| 2 | Animated blobs | 1 | 5 gradient blobs with blur(120px), animated drift |
| 3 | Grid overlay | 2 | 48px grid lines at 1.8% opacity |
| 4 | Noise texture | 3 | SVG fractal noise, opacity 0.028 (dark) / 0.018 (light) |
| 5 | Glow canvas | 4 | Cursor-following purple grid glow (canvas element) |
| 6 | Page content | 5+ | Actual page content |

### 4.1 Body Background

```css
body {
  background: var(--bg-body); /* #08080e (dark) or linear-gradient(160deg, #FFFFFF, #FDFCFF) (light) */
  color: var(--text);
  font-family: var(--f-body);
}
```

### 4.2 Animated Gradient Blobs

5 blobs with fixed palette. Each blob is `position: absolute` inside a `position: fixed; inset: 0` container.

**IMPORTANT:** Blobs have opacity baked into their `rgba()` values. Do NOT add an extra `opacity` property on the blob elements in dark mode — it will make them invisible. In light mode, add `opacity: 0.3` to soften them.

```css
.bg-blobs {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.bg-blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  filter: blur(120px);
}
html[data-theme="light"] .bg-blob { opacity: 0.3; }
```

#### Blob Palette (mandatory — never use other colors)

| Blob | Color | CSS | Position | Animation Duration |
|------|-------|-----|----------|--------------------|
| 1 — Teal | `rgba(0, 204, 177, 0.4)` | `radial-gradient(circle, rgba(0, 204, 177, 0.4) 0%, transparent 70%)` | top: -10%; left: -5% | 20s |
| 2 — Purple | `rgba(123, 97, 255, 0.35)` | `radial-gradient(circle, rgba(123, 97, 255, 0.35) 0%, transparent 70%)` | top: 20%; right: -8% | 25s |
| 3 — Blue | `rgba(28, 160, 251, 0.35)` | `radial-gradient(circle, rgba(28, 160, 251, 0.35) 0%, transparent 70%)` | bottom: 10%; left: 15% | 18s |
| 4 — Pink | `rgba(255, 73, 219, 0.3)` | `radial-gradient(circle, rgba(255, 73, 219, 0.3) 0%, transparent 70%)` | top: 55%; right: 20% | 22s |
| 5 — Dark Purple | `rgba(153, 69, 255, 0.3)` | `radial-gradient(circle, rgba(153, 69, 255, 0.3) 0%, transparent 70%)` | bottom: -5%; right: -10% | 24s |

All blobs: `width: min(50vw, 50vh); height: min(50vw, 50vh);`

#### Blob Drift Keyframes

Each blob has its own keyframe with `translate()` + `scale()` variations:

```css
@keyframes blob-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(80px, 60px) scale(1.1); }
  66%  { transform: translate(-40px, 90px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes blob-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-70px, 50px) scale(1.08); }
  66%  { transform: translate(50px, -60px) scale(0.92); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes blob-drift-3 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(60px, -70px) scale(1.05); }
  66%  { transform: translate(-80px, 40px) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes blob-drift-4 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-50px, -40px) scale(0.95); }
  66%  { transform: translate(70px, 60px) scale(1.08); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes blob-drift-5 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -80px) scale(1.12); }
  66%  { transform: translate(-60px, -30px) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}
```

### 4.3 Grid Overlay

```css
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 48px 48px;
}
html[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.018) 1px, transparent 1px);
}
```

### 4.4 Noise Texture Overlay

```css
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}
html[data-theme="light"] body::before { opacity: 0.018; }
```

### 4.5 Glow Canvas (Cursor-Following Grid) — MANDATORY

A `<canvas>` element (`position: fixed; inset: 0; z-index: 4; pointer-events: none`) that draws a grid of cells that glow purple around the cursor. **When the cursor enters a glass card, the grid dissolves into a smooth radial glow** — reinforcing the Liquid Glass aesthetic.

**Specifications — Grid Mode (background):**
| Parameter | Value |
|-----------|-------|
| Color | `[191, 90, 242]` (purple) — **NEVER teal/cyan/green** |
| Cell size | `48px` |
| Proximity radius | `180px` |
| Center cell alpha | `0.30` |
| Edge cell alpha | `proximity² × 0.18` |
| Center glow shadowBlur | `30` |
| Center glow alpha | `0.5` |
| Rendering | `requestAnimationFrame` + `devicePixelRatio` for crisp rendering |
| Mouse leave | Clear canvas (set mouse coords to -9999) |

**Specifications — Card Glow Mode (over glass elements):**
| Parameter | Value |
|-----------|-------|
| Trigger selectors | `.glass, .glass--card, .glass--nav, .glass--pill, .glass--elevated, .color-swatch, .mockup-card, .ps-slab` |
| Glow radius | `200px` radial gradient centered on cursor |
| Peak alpha | `0.32` at center |
| 25% stop | `0.192` (60% of peak) |
| 55% stop | `0.070` (22% of peak) |
| Edge | Fades to `0` at full radius |
| Clipping | Glow is clipped to the card bounding rect (with `roundRect` radius 16px) so it never bleeds outside |

**Behavior — Grid mode:** Only cells within `180px` of the cursor are drawn. The closest cell gets a full glow with `shadowBlur: 30`. Surrounding cells fade based on `(1 - distance/180)² * 0.18`. When the mouse leaves the viewport, the canvas clears.

**Behavior — Card glow mode:** When `document.elementFromPoint()` detects the cursor is over a glass element (via `.closest()`), the grid rendering is completely replaced by a single radial gradient glow clipped to the card bounds. This creates a smooth, frosted-glass spotlight effect that follows the cursor within the card. When the cursor exits the card, the grid cells resume.

### 4.6 Particle System (Starfield)

130 particles floating across the viewport. Purely decorative ambient effect.

| Parameter | Value |
|-----------|-------|
| Count | 130 particles |
| Size | 1–2.5px circles |
| Colors (dark) | 70% `#FBF9F4` (cream), 30% `#5B9BFF` (blueLight) |
| Colors (light) | 70% `#1C1C1C` (black), 30% `#7C3AED` (purple tone) |
| Velocity | 0.08–0.32 px/frame |
| Opacity | `base × (0.55 + 0.45 × sin(time × speed + offset))` — sine wave pulsing |
| Screen edges | Particles wrap around (exit right → enter left, etc.) |
| Theme change | Re-colors all particles via MutationObserver on `data-theme` |

---

## 5. Components

### 5.1 Glass Card

See Section 3.7 `.glass--card` for complete CSS including shimmer and specular.

**Hover interaction summary:**
1. Card lifts: `transform: translateY(-3px) scale(1.005)`
2. Background brightens: `var(--g-2)` → `var(--g-3)`
3. Shadow deepens: `var(--g-shadow-card)` → `var(--g-shadow-hover)`
4. Shimmer sweeps across: `translateX(-120%)` → `translateX(260%)`, skewed 15deg, 0.7s ease-out
5. All transitions: `var(--t-fast)` (200ms)

### 5.2 Color Swatch Cards

```css
/* Base */
transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 380ms ease;

/* Hover */
transform: translateY(-4px) scale(1.008);
/* Shadow: enhanced with glow */

/* Copy hint badge (appears on hover) */
.copy-hint {
  opacity: 0;
  transform: translateY(-6px) scale(0.88);
  transition: opacity 220ms ease,
              transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
:hover .copy-hint {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Copying state feedback */
.swatch--copying { opacity: 0.72; }
/* Label changes to "Copiado!" for 1500ms, then reverts */
/* On error: badge background changes to red tint */
```

### 5.3 Palette Strip (Color Bar)

```css
.ps-slab {
  transition: flex 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ps-slab:hover {
  flex: 2; /* doubles width */
}
```

### 5.4 Buttons

#### Base Button Structure

All buttons share this base. The `.sc-btn` prefix is the project's convention.

```css
.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast),
              transform var(--t-fast), opacity var(--t-fast);
}
.sc-btn:active:not(:disabled) {
  transform: scale(0.97) !important;
}
.sc-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.sc-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
```

#### Primary Button (Blue)

```css
.sc-btn--primary {
  background: var(--c-blue);
  color: #FBF9F4;
  border-color: var(--c-blue);
}
.sc-btn--primary:hover {
  background: #0048B0; /* darker blue */
  border-color: #0048B0;
  box-shadow: 0 4px 20px rgba(0, 88, 212, 0.38);
  transform: translateY(-1px);
}
```

#### Success / CTA Button (Green)

```css
.sc-btn--success {
  background: var(--c-greenCta);
  color: #1C1C1C;
  border-color: var(--c-greenCta);
}
.sc-btn--success:hover {
  background: #70B312; /* darker green */
  border-color: #70B312;
  box-shadow: 0 4px 20px rgba(132, 204, 22, 0.38);
  transform: translateY(-1px);
}
```

#### Secondary Button (Outline)

```css
.sc-btn--secondary {
  background: transparent;
  color: var(--c-blueLight);
  border-color: var(--c-blue);
}
.sc-btn--secondary:hover {
  background: var(--accent-dim);
  box-shadow: 0 4px 16px rgba(0, 88, 212, 0.15);
  transform: translateY(-1px);
}
```

#### Ghost Button

```css
.sc-btn--ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}
.sc-btn--ghost:hover {
  background: var(--surface);
  color: var(--text);
}
```

#### Danger Button

```css
.sc-btn--danger {
  background: var(--c-red);
  color: #FBF9F4;
  border-color: var(--c-red);
}
.sc-btn--danger:hover {
  background: #D8381C;
  box-shadow: 0 4px 20px rgba(248, 79, 46, 0.38);
  transform: translateY(-1px);
}
```

#### Button Sizes

| Size | Padding | Font-size | Radius |
|------|---------|-----------|--------|
| Small (`.sc-btn--sm`) | `6px 13px` | 12px | `var(--r-xs)` |
| Default | `10px 20px` | 14px | `var(--r-sm)` |
| Large (`.sc-btn--lg`) | `14px 28px` | 16px | `var(--r-md)` |

#### Loading State (Spinner)

```css
.btn--loading::after {
  /* 16px circle with transparent border + white top border */
  animation: btn-spin 0.65s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
```

### 5.5 Form Inputs

```css
.input {
  background: var(--g-1);
  border: 1px solid var(--g-border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast),
              background var(--t-slow);
}

/* Focus — blue ring */
.input:focus {
  border-color: var(--c-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 88, 212, 0.14);
}

/* Success state — green ring */
.input--success {
  border-color: var(--c-greenCta);
  box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.14);
}

/* Error state — red ring */
.input--error {
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(248, 79, 46, 0.14);
}

/* Placeholder */
.input::placeholder { color: var(--text-3); }

/* Checkbox & Radio — transition on check */
/* background var(--t-fast), border-color var(--t-fast) */
/* Checkmark/dot appears via ::after pseudo-element */
```

#### Form Link

```css
.form-link {
  text-decoration: underline transparent;
  transition: text-decoration-color var(--t-fast), color var(--t-fast);
}
.form-link:hover {
  text-decoration-color: currentColor;
  /* color lightens slightly */
}
```

### 5.6 Badges

```css
.badge {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-xs);
  border: 1px solid var(--g-border);
  background: var(--g-1);
}
```

### 5.7 Progress Bar

```css
.progress-bar {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--c-blue) 0%, var(--c-purple) 40%, #C49AFF 70%, var(--c-green) 100%
  );
  background-size: 200% 100%;
  animation: progress-shimmer 3s linear infinite;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--c-purple) 40%, transparent),
    0 0 4px color-mix(in srgb, var(--c-blue) 30%, transparent);
  transition: width 80ms linear;
}
@keyframes progress-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Leading dot with halo pulse */
.progress-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: white;
  box-shadow:
    0 0 6px 2px rgba(255,255,255, 0.5),
    0 0 16px 4px color-mix(in srgb, var(--c-purple) 40%, transparent);
}

/* Dot halo pulse animation */
@keyframes pb-halo-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.2); opacity: 0.3; }
}
/* Inner halo: 2s ease-in-out infinite */
/* Outer halo: 2s ease-in-out infinite, delay 0.4s, opacity 0.5 */
```

### 5.8 Scroll Progress Bar (top of page)

```css
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--c-blue), var(--c-purple), #C49AFF, var(--c-green));
  background-size: 200% 100%;
  animation: progress-shimmer 3s linear infinite;
  z-index: 9999;
  pointer-events: none;
  transition: width 80ms linear;
  box-shadow: 0 0 12px rgba(175, 109, 255, 0.55), 0 0 4px rgba(0, 88, 212, 0.4);
}

/* Leading orb at the tip */
.scroll-progress::after {
  content: '';
  position: absolute;
  right: -3px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, var(--c-purple) 60%);
  box-shadow: 0 0 12px 4px rgba(175, 109, 255, 0.85),
              0 0 24px 8px rgba(175, 109, 255, 0.35);
}
```

Width is calculated in JS: `(scrollTop / (scrollHeight - clientHeight)) * 100` via passive scroll listener.

### 5.9 Sidebar Navigation

```css
/* Link states */
.sidebar-link {
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

/* Active link indicator */
.sidebar-link--active {
  border-left-color: var(--c-blue);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 12%, transparent) 0%,
    transparent 100%
  );
}

/* Glowing dot on active link */
.sidebar-link--active::after {
  box-shadow:
    0 0 10px 2px color-mix(in srgb, var(--accent) 60%, transparent),
    0 0 4px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Sidebar action buttons (copy, theme, download) */
.sidebar-btn {
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast);
}

/* Copy success feedback */
.sidebar-btn--copied {
  background: color-mix(in srgb, var(--c-greenCta) 15%, transparent);
  border-color: color-mix(in srgb, var(--c-greenCta) 30%, transparent);
  color: var(--c-green);
}
```

### 5.10 Section Divider

```css
.gl-divider {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2),
    color-mix(in srgb, var(--c-purple) 30%, transparent));
  border-radius: 2px;
  margin-bottom: 52px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--c-purple) 20%, transparent);
  position: relative;
}
/* Glow halo behind divider */
.gl-divider::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: inherit;
  filter: blur(4px);
  opacity: 0.25;
  border-radius: inherit;
}
```

### 5.11 Social Mockup Cards (Examples section)

```css
/* Hover */
transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 380ms ease;
:hover {
  transform: translateY(-6px) scale(1.015);
  /* Shadow elevation with purple tint glow */
}
```

### 5.12 Vocabulary Columns (Voice section)

```css
/* Column hover */
transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 380ms ease, border-color 300ms ease, background 300ms ease;
:hover {
  transform: translateY(-5px);
  /* Colored shadow glow per column */
}

/* Icon rotation on hover */
.vocab-col__title i {
  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
:hover .vocab-col__title i {
  transform: scale(1.25) rotate(-8deg);
}

/* List item left-accent bar */
.vocab-item {
  transition: background 200ms ease, color 200ms ease,
              padding-left 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vocab-item::before { /* accent bar */
  transform: translateY(-50%) scaleY(0);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vocab-item:hover {
  padding-left: 26px;
}
.vocab-item:hover::before {
  transform: translateY(-50%) scaleY(1);
}
```

---

## 6. Animations & Micro-Interactions

### 6.1 Scroll Reveal

Elements enter the viewport with a slide-up fade. Triggered by IntersectionObserver (threshold: 0.08, rootMargin: `0px 0px -40px 0px`).

```css
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.99);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered delays for sequential reveals */
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }
.reveal--delay-4 { transition-delay: 0.32s; }
.reveal--delay-5 { transition-delay: 0.40s; }
```

### 6.2 Stagger Grid Items

Grid children animate in sequence when their container enters the viewport.

```css
.stagger-item {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 560ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--stagger-i, 0) * 70ms);
}
.stagger-item.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
```

JS sets `--stagger-i` on each item (0, 1, 2, ...) for cascading delay.

### 6.3 Section Heading Entrance

Triggered when section gets `.in-view` class (via IntersectionObserver, threshold: 0, rootMargin: `-40% 0px -40% 0px`).

```css
/* Label slides in from left */
.section__label {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.section.in-view .section__label {
  opacity: 1;
  transform: translateX(0);
}

/* Title slides up */
.section__title {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms 80ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms 80ms cubic-bezier(0.16, 1, 0.3, 1);
}
.section.in-view .section__title {
  opacity: 1;
  transform: translateY(0);
}

/* Description fades in */
.section__desc {
  opacity: 0;
  transition: opacity 500ms 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.section.in-view .section__desc {
  opacity: 1;
}
```

### 6.4 Divider Entrance

```css
.gl-divider {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 700ms 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.section.in-view .gl-divider {
  transform: scaleX(1);
}
```

### 6.5 Background Layer Item Stagger

```css
/* Initial state */
opacity: 0;
transform: translateX(-16px);
transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
            transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--layer-i) * 80ms + 100ms);

/* Visible state */
opacity: 1;
transform: translateX(0);
```

### 6.6 Hero Badge Float

```css
@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
/* Applied: animation: badge-float 4s ease-in-out infinite; */

/* Badge pulse dot */
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.65; }
}
/* Applied: animation: badge-pulse 2s ease-in-out infinite; */
```

### 6.7 Component Demo Hint Pulse

```css
@keyframes comp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
/* Applied: animation: comp-pulse 1.8s ease-in-out infinite; */
```

### 6.8 Reduced Motion

All animations are disabled when the user prefers reduced motion:

```css
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .stagger-item { opacity: 1; transform: none; transition: none; }
  .gl-divider { transform: scaleX(1); transition: none; }
  .section__label, .section__title, .section__desc {
    opacity: 1; transform: none; transition: none;
  }
  @keyframes glass-shimmer { 0%, 100% { opacity: 0; } }
  .bg-blob { animation: none !important; }
}
```

---

## 7. General Rules & Prohibitions

### 7.1 Absolute Rules

1. **Dark-first design.** Background `#08080e` (deep abyss). Never pure white (#FFFFFF) as a background in dark mode.
2. **Noise texture overlay** on `body::before` — opacity 0.028. **Never remove.**
3. **Glow canvas** — **mandatory on all pages.** Always purple `[191, 90, 242]`. **NEVER** teal/cyan/green.
4. **Never hardcode values.** Always use CSS custom properties (`var(--c-*)`, `var(--f-*)`, `var(--r-*)`, etc.).
5. **Blue-tinted deep shadows** in dark mode (`rgba(0, 20, 60, ...)`). Purple/indigo-tinted in light mode.
6. **Use `color-mix()` for derived states** — hover, active, dimmed backgrounds. Example: `color-mix(in srgb, var(--c-blue) 20%, transparent)`.
7. **Blob palette is fixed** — teal, purple, blue, pink, dark-purple. Minimum 3 blobs, maximum 5.
8. **Ambient orbs** at opacities 0.04–0.06 — barely-there color hints, never prominent.

### 7.2 Prohibited Patterns ("Vulgar Shadow" and others)

```css
/* NEVER do this — breaks the identity completely */

/* Vulgar shadow: pure black, high opacity, large spread, no inset highlights */
box-shadow: 0 20px 60px rgba(0,0,0, 0.7);
box-shadow: 0 10px 40px rgba(175,109,255, 0.6); /* saturated color glow */
box-shadow: 0 4px 20px black;

/* Wrong filter on glass elements */
filter: drop-shadow(...); /* use box-shadow, never drop-shadow on glass */

/* Hardcoded values */
color: #AF6DFF;           /* use var(--c-purple) */
font-family: 'Sora';     /* use var(--f-display) */
border-radius: 14px;     /* use var(--r-md) */
transition: 200ms ease;  /* use var(--t-fast) */
```

**Definition of vulgar shadow:** `rgba(0,0,0)` with opacity > 0.5 and large spread, no inset highlights, no blue/purple tint. It looks like 2012 UI and destroys the Liquid Glass identity.

### 7.3 Logo Rules

- **Min size:** 24px height
- **Clear space:** 1x mark height on all sides
- **Dark background:** Cream (`#FBF9F4`) fill
- **Light background:** Black (`#1C1C1C`) fill
- **Allowed variants:** cream/dark, light bg, purple bg, gradient (blue→purple)
- **Logo gradient:** `linear-gradient(135deg, var(--c-blue), var(--c-purple))`

### 7.4 Iconography

- **Library:** Lucide Icons (outline style, 1.5px stroke)
- **Sizes:** 16px (UI), 24px (highlight), 40px+ (decorative)
- **Colors:** `var(--c-blue)` primary, `var(--c-purple)` secondary, `var(--text-3)` muted
- **Rules:** Always outline, never filled. Brand palette only.

### 7.5 Photography

- **Approved:** Real community photos, tech environments, collaboration scenes
- **Avoid:** Generic stock, overly posed, low quality, unrelated
- **Treatment:** Color overlay at 40% opacity, `mix-blend-mode: multiply`
- **Treatment colors:** `var(--c-black)`, `var(--c-blue)`, `var(--c-purple)`, `var(--c-green)`, `var(--c-yellow)`

### 7.6 Voice & Tone

**Personality traits:** Direto, Ambicioso, Didático, Confiante, Bem-humorado

**Writing rules:**
- Use active voice, short sentences
- Avoid jargon, be accessible
- Lead with value, not features
- Use "você" (informal), never "senhor/senhora"

### 7.7 Responsive

- Sidebar collapses at `≤768px` breakpoint
- Mobile: `margin-left: 0; margin-top: 56px` (top header replaces sidebar)
- Section padding: `56px 24px 48px` on mobile (vs `80px 64px` on desktop)

---

## Quick Reference: Hover Transform Patterns

| Component | Transform | Duration | Easing |
|-----------|-----------|----------|--------|
| Glass card | `translateY(-3px) scale(1.005)` | 200ms | ease (t-fast) |
| Color swatch | `translateY(-4px) scale(1.008)` | 380ms | spring bounce |
| Logo card | `translateY(-3px)` | 380ms | spring bounce |
| Social mockup | `translateY(-6px) scale(1.015)` | 380ms | spring bounce |
| Vocab column | `translateY(-5px)` | 380ms | spring bounce |
| Icon rule card | `translateY(-2px)` | 380ms | spring bounce |
| Photo card | `translateY(-3px)` | 380ms | spring bounce |
| Button primary | `translateY(-1px)` | 200ms | ease (t-fast) |
| Button CTA | `translateY(-2px)` | 200ms | ease (t-fast) |
| Button active | `scale(0.97)` | 200ms | ease (t-fast) |
| Palette slab | `flex: 2` (width) | 420ms | material standard |