MIT
A clean, accessible design system centred on Pinterest's signature red, featuring a light palette with custom CSS variables and Pin Sans typography for modern web applications
Published by Layout1 importsminimal tierLayout StudioImport this kit into a Studio project and start editing.
CLI installRun it in any project. No account needed.
npx @layoutdesign/context install pinterest# layout.md — Pinterest Design System
---
## 0. Quick Reference
**Stack:** Pinterest web app · Custom CSS variables (1865 tokens extracted) · "Pin Sans" brand typeface · Token source: extracted-css-vars (high confidence)
**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.
```css
:root {
/* Brand */
--base-color-pinterest: #e60023; /* Pinterest red — primary CTA bg */
--base-color-hover-pinterest: #cc001f; /* Pinterest red hover state */
--base-color-pressed-pinterest: #b2001b; /* Pinterest red pressed/active */
/* Backgrounds */
--base-color-grayscale-0: #fff; /* App/page background */
--base-color-grayscale-25: #fbfbf9; /* Surface background */
--base-color-grayscale-50: #f6f6f3; /* Elevated surface */
--base-color-grayscale-100: #e5e5e0; /* Selected / strong border */
/* Text */
--base-color-grayscale-500: #000; /* Primary text */
--base-color-grayscale-300: #62625b; /* Secondary / subtle text */
--base-color-grayscale-200: #91918c; /* Placeholder / disabled text */
/* Border */
--base-color-grayscale-200: #91918c; /* Default border (input) */
--base-color-grayscale-500: #000; /* Focus border */
/* Typography */
--base-font-family-default-latin: "Pin Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--base-font-weight-400: 400;
--base-font-weight-700: 700;
/* Spacing */
--pintrest-space-sm: 10px;
--pintrest-space-md: 14px;
--pintrest-space-lg: 16px;
--pintrest-space-xl: 24px;
--pintrest-space-2xl: 32px;
--pintrest-space-3xl: 48px;
/* Radius */
--pintrest-radius-sm: 2px;
--pintrest-radius-md: 12px;
--pintrest-radius-lg: 16px; /* Primary button & input radius */
--pintrest-radius-full: 999px;
/* Motion */
--pintrest-duration-fast: 0.085s;
--pintrest-ease-default: ease;
/* Elevation */
--sema-elevation-shadow-surface: 0px 0.5px 3px 0px rgba(0,0,0,.2);
--sema-elevation-shadow-raised: 0px 1.5px 6px 0px rgba(0,0,0,.2);
--sema-elevation-shadow-floating: 0px 3px 12px 0px rgba(0,0,0,.2);
}
```
```tsx
// Primary Button — Pinterest red, radius-lg, fast transform transition
<button
className="pinterest-btn-primary"
style={{
background: 'var(--base-color-pinterest)',
borderRadius: 'var(--pintrest-radius-lg)',
padding: '6px 14px',
color: '#fff',
fontFamily: 'var(--base-font-family-default-latin)',
fontWeight: 'var(--base-font-weight-700)',
fontSize: '16px',
transition: `transform var(--pintrest-duration-fast) var(--pintrest-ease-default)`,
border: '2px solid transparent',
}}
>
Log in
</button>
```
<!-- Quick Reference truncated to fit the 75-line cap. See later sections for the full design system. -->
## 1. Design Direction & Philosophy
### Character & Aesthetic Intent
Pinterest's visual language is **clean, content-first, and quietly systematic**. The UI deliberately recedes so that user-generated imagery — pins, boards, and collections — can dominate the viewport. Chrome is reduced to the minimum; surfaces are off-white rather than stark white, gradients are used only to darken imagery overlays, and the singular brand moment is the **Pinterest red (`#e60023`)** on CTA buttons and the logo.
The typographic voice is confident but not loud. The custom typeface "Pin Sans" is used exclusively throughout — it is the only brand typeface. Display sizes (60–72px) carry strong letterspacing compression (`-1px`) to create density at large scale. Body copy sits at 14px with `font-weight: 700` — heavier than convention, reflecting the bold editorial feel.
### What This Design Explicitly Rejects
- **No decorative illustration or heavy iconography** in structural UI — icons are utility-only
- **No warm or vibrant surface colours** — backgrounds stay in the warm-neutral grayscale family (`#fbfbf9` to `#fff`)
- **No rounded corners above 16px on standard UI** — pill shape (`999px`) is reserved for search chips and specific link badges only; it is not the default button shape
- **No gradient backgrounds on surfaces** — gradients are reserved for image overlays (`linear-gradient(180deg, transparent, rgba(0,0,0,.8))`)
- **No sharp (0px) corners on interactive controls** — all buttons and inputs use at minimum `--pintrest-radius-lg` (16px)
- **No system font fallbacks as first-choice** — "Pin Sans" must always lead the font stack
---
## 2. Colour System
### Tier 1 — Primitive Values
```css
/* ── Grayscale Primitives ── */
--base-color-grayscale-0: #fff;
--base-color-grayscale-25: #fbfbf9;
--base-color-grayscale-50: #f6f6f3;
--base-color-grayscale-100: #e5e5e0;
--base-color-grayscale-150: #c8c8c1;
--base-color-grayscale-200: #91918c;
--base-color-grayscale-250: #74746c;
--base-color-grayscale-300: #62625b;
--base-color-grayscale-350: #494943;
--base-color-grayscale-400: #33332e;
--base-color-grayscale-450: #242421;
--base-color-grayscale-500: #000;
/* ── Brand Primitives ── */
--base-color-pinterest: #e60023; /* Pinterest brand red */
--base-color-hover-pinterest: #cc001f; /* Red -1 stop, hover */
--base-color-pressed-pinterest: #b2001b; /* Red -2 stops, pressed/active */
/* ── Red Scale ── */
--base-color-red-50: #ffebeb;
--base-color-red-100: #ffd7d7;
--base-color-red-200: #ff8f8f;
--base-color-red-300: #f84f4f;
--base-color-red-400: #dd0e0e;
--base-color-red-500: #b60c0c;
--base-color-red-600: #900909;
--base-color-red-700: #6b0000;
/* ── Green Scale ── */
--base-color-green-50: #e3f7ec;
--base-color-green-100: #c7f0da;
--base-color-green-200: #83ddad;
--base-color-green-300: #2db46c;
--base-color-green-400: #068440;
--base-color-green-500: #097239;
--base-color-green-600: #07552b;
--base-color-green-700: #103c25;
/* ── Blue Scale ── */
--base-color-blue-50: #ebeeff;
--base-color-blue-100: #dbe1ff;
--base-color-blue-200: #92a4ff;
--base-color-blue-300: #677eee;
--base-color-blue-400: #435ee5;
--base-color-blue-500: #2b48d4;
--base-color-blue-600: #273eb0;
--base-color-blue-700: #17287d;
/* ── Orange Scale ── */
--base-color-orange-50: #ffede0;
--base-color-orange-100: #ffe0cc;
--base-color-orange-200: #ffb380;
--base-color-orange-300: #fe9752;
--base-color-orange-400: #db5b06;
--base-color-orange-500: #b24700;
--base-color-orange-600: #943b00;
--base-color-orange-700: #5c2500;
/* ── Purple Scale ── */
--base-color-purple-50: #fdebff;
--base-color-purple-100: #fbdfff;
--base-color-purple-200: #ef9ff9;
--base-color-purple-300: #d271df;
--base-color-purple-400: #b331c4;
--base-color-purple-500: #91289f;
--base-color-purple-600: #7a2286;
--base-color-purple-700: #51005c;
/* ── Transparent ── */
--base-color-transparent: hsla(0,0%,100%,0);
```
### Tier 2 — Semantic Aliases
```css
/* ── Background Semantic Tokens ── */
--sema-color-background-scrims-opaque: hsla(53,29%,95%,.8); /* Light scrim over imagery */
--sema-color-background-scrims-translucent: hsla(60,2%,45%,.4); /* Dark translucent scrim */
--sema-color-background-wash-image-tint: rgba(0,0,0,.04); /* Subtle image wash */
--sema-color-background-wash-70-light: hsla(60,20%,98%,.7); /* 70% light wash */
--sema-color-background-wash-70-dark: rgba(36,36,33,.7); /* 70% dark wash */
--sema-color-background-wash-50-light: hsla(60,20%,98%,.5); /* 50% light wash */
--sema-color-background-wash-50-dark: rgba(36,36,33,.5); /* 50% dark wash */
--sema-color-background-transparent: hsla(0,0%,100%,0); /* Fully transparent */
--sema-color-background-performance-plus-weak: #ebe2fd; /* Performance+ upsell bg */
--sema-color-background-performance-plus-default: #774fc4; /* Performance+ purple bg */
/* ── Background Gradient Tokens ── */
--sema-color-background-gradient-darken-top-strong: linear-gradient(0deg,transparent,rgba(0,0,0,.8));
--sema-color-background-gradient-darken-top-weak: linear-gradient(0deg,transparent,rgba(0,0,0,.4));
--sema-color-background-gradient-darken-bottom-strong: linear-gradient(180deg,transparent,rgba(0,0,0,.8));
--sema-color-background-gradient-darken-bottom-weak: linear-gradient(180deg,transparent,rgba(0,0,0,.4));
/* ── Hover State Backgrounds ── */
--sema-color-hover-background-scrims-opaque: hsla(60,6%,83%,.8);
--sema-color-hover-background-scrims-translucent: rgba(51,51,46,.4);
--sema-color-hover-background-wash-image-tint: rgba(36,36,35,.09);
--sema-color-hover-background-wash-70-light: hsla(60,14%,96%,.7);
--sema-color-hover-background-wash-70-dark: rgba(24,24,22,.7);
--sema-color-hover-background-performance-plus-weak: #dccdfa;
--sema-color-hover-background-performance-plus-default: #6845ab;
/* ── Pressed State Backgrounds ── */
--sema-color-pressed-background-scrims-opaque: hsla(60,3%,74%,.8);
--sema-color-pressed-background-scrims-translucent: rgba(29,29,27,.4);
--sema-color-pressed-background-wash-image-tint: rgba(57,57,55,.14);
--sema-color-pressed-background-wash-70-light: hsla(60,30%,91%,.7);
--sema-color-pressed-background-wash-70-dark: rgba(11,11,10,.7);
--sema-color-pressed-background-performance-plus-weak: #cbb5f5;
--sema-color-pressed-background-performance-plus-default: #583b91;
/* ── Status Semantic Tokens ── */
--sema-color-icon-performance-plus: #774fc4; /* Performance+ purple icon */
--sema-color-hover-icon-performance-plus: #6845ab; /* Hover state */
--sema-color-pressed-icon-performance-plus: #583b91; /* Pressed state */
--sema-color-text-performance-plus: #774fc4; /* Performance+ text */
--sema-color-hover-text-performance-plus: #6845ab; /* Hover text */
--sema-color-pressed-text-performance-plus: #583b91; /* Pressed text */
```
### Tier 2 — Status Tokens
```css
/* ── Status ── */
/* extracted: high confidence */
--pintrest-success: var(--base-color-pressed-green-400); /* Success icon/text — #045328 */
--pintrest-warning: var(--base-color-pressed-orange-400); /* Warning icon/text — #c45205 */
--pintrest-error: var(--base-color-pressed-red-400); /* Error icon/text — #ad0b0b */
--pintrest-info: var(--base-color-pressed-blue-400); /* Info icon/text — #1e3dd7 */
```
### Tier 3 — Component Tokens (selected key tokens)
```css
/* ── Button Component Colours ── */
/* Active/pressed states reference component tokens which resolve to pressed primitives */
/* comp-button-color-pressed-background-primary-default → resolves to pressed Pinterest red */
/* ── Spinner Colours ── */
--comp-spinner-color-background-1: #c85bd2; /* Spinner animation frame 1 */
--comp-spinner-color-background-2: #e57534; /* Spinner animation frame 2 */
--comp-spinner-color-background-3: #22a596; /* Spinner animation frame 3 */
/* ── Search Guide ── */
--comp-searchguide-color-background-rainbow-default: linear-gradient(-60deg,#d4b0ff,#90f0e1 37%,#c7f783 66%,#ffa570);
/* ── Social Button Colours ── */
--comp-iconbuttonsocial-color-background-container-instagram: #ff0076;
--comp-iconbuttonsocial-color-background-container-discord: #5865f2;
--comp-iconbuttonsocial-color-background-container-facebook: #0866ff;
--comp-iconbuttonsocial-color-background-container-whatsapp: #25d366;
--comp-iconbuttonsocial-color-background-container-x-social: #000;
--comp-iconbuttonsocial-color-background-container-threads: #000;
--comp-iconbuttonsocial-color-background-container-snap: #fffc00;
--comp-iconbuttonsocial-color-background-container-telegram: linear-gradient(180deg,#2aabee,#229ed9);
--comp-iconbuttonsocial-color-background-container-imessage: linear-gradient(180deg,#5bf675,#0cbd2a);
--comp-iconbuttonsocial-color-background-container-samsung-messages: linear-gradient(180deg,#4189ed,#376df6);
--comp-iconbuttonsocial-color-background-container-kakao-talk: #ffeb3b;
--comp-iconbuttonsocial-color-background-container-line: #06c755;
--comp-iconbuttonsocial-color-background-wash-container: transparent;
```
### Colour Role Summary Table
| Role | Token | Resolved Value |
|---|---|---|
| **Brand CTA background** | `--base-color-pinterest` | `#e60023` |
| **Brand CTA hover** | `--base-color-hover-pinterest` | `#cc001f` |
| **Brand CTA pressed** | `--base-color-pressed-pinterest` | `#b2001b` |
| Page background | `--base-color-grayscale-0` | `#fff` |
| Surface background | `--base-color-grayscale-25` | `#fbfbf9` |
| Elevated surface | `--base-color-grayscale-50` | `#f6f6f3` |
| Selected background | `--base-color-grayscale-100` | `#e5e5e0` |
| Primary text | `--base-color-grayscale-500` | `#000` |
| Secondary text | `--base-color-grayscale-300` | `#62625b` |
| Subtle / disabled text | `--base-color-grayscale-200` | `#91918c` |
| Default border | `--base-color-grayscale-200` | `#91918c` |
| Focus border | `--base-color-grayscale-500` | `#000` |
| Overlay scrim | `--sema-color-background-scrims-opaque` | `hsla(53,29%,95%,.8)` |
---
## 3. Typography System
### Font Stack
```css
/* ── Primary Font Family ── */
--base-font-family-default-latin: "Pin Sans", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
"Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo,
"ＭＳ Ｐゴシック", Arial, sans-serif;
/* extracted: high confidence — used on every computed element */
/* ── Japanese Font Family ── */
--base-font-family-default-japanese: "SF Pro JP", -apple-system,
"BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3",
"Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
"Arial", sans-serif;
/* ── Code Font Family ── */
--base-font-family-code: "SF Mono", "Segoe UI Mono", "Roboto Mono",
"Ubuntu Mono", "Menlo", "Consolas", "Courier", monospace;
```
### Font Weight Scale
```css
--base-font-weight-400: 400; /* Regular — body copy, labels, links */
--base-font-weight-500: 500; /* Medium — UI labels (sema-font-weight-ui) */
--base-font-weight-700: 700; /* Bold — body default, headings */
--base-font-weight-900: 900; /* Heavy — display 1000 only */
```
### Letter Spacing Scale
```css
--base-font-letterspacing-0: 0; /* Default — no tracking adjustment */
--base-font-letterspacing-05: 0.5px; /* Slight positive tracking */
--base-font-letterspacing-1: 1px; /* Positive tracking (labels) */
--base-font-letterspacing-negative-05: -0.5px; /* Compressed — heading 700 */
--base-font-letterspacing-negative-1: -1px; /* Tight — display sizes */
```
### Line Height Scale
```css
--base-font-lineheight-110: 1.1; /* Display / very tight */
--base-font-lineheight-120: 1.2; /* Headings */
--base-font-lineheight-130: 1.3; /* Sub-headings */
--base-font-lineheight-140: 1.4; /* Body (default) */
--base-font-lineheight-150: 1.5; /* Comfortable body */
--base-font-lineheight-160: 1.6; /* Relaxed */
--base-font-lineheight-170: 1.7; /* Wide */
--base-font-lineheight-180: 1.8; /* Maximum */
```
### Composite Typography Groups
| Group | Family | Size | Weight | Line Height | Letter Spacing | Usage |
|---|---|---|---|---|---|---|
| **display-1000** | Pin Sans | 72px (`--base-font-size-72`) | 900 | 1.1 | -1px | Hero display headline |
| **display-900** | Pin Sans | 60px (`--base-font-size-60`) | 900 | 1.1 | -1px | Large feature headline |
| **display-800** | Pin Sans | 48px (`--base-font-size-48`) | 700 | 1.2 | -0.5px | Section header |
| **heading-700** | Pin Sans | 36px (`--base-font-size-36`) | 700 | 1.2 | -0.5px | Page section title |
| **heading-600** | Pin Sans | 28px (`--base-font-size-28`) | 700 | 1.3 | 0 | Card heading / h1 on login |
| **heading-500** | Pin Sans | 24px (`--sema-font-size-heading-500`) | 700 | 1.3 | 0 | Sub-section title |
| **h2-hero** | Pin Sans | 70px (extracted) | 600 | normal | normal | Homepage hero h2 (extracted from computed) |
| **ui-400** | Pin Sans | 20px | 500 | 1.4 | 0 | Large UI label |
| **ui-300** | Pin Sans | 16px | 500 | 22.4px | 0 | Standard UI / input text |
| **ui-200** | Pin Sans | 14px | 400 | 1.4 | 0 | Secondary UI label |
| **ui-100** | Pin Sans | 12px | 400 | 18px | 0 | Caption, micro-label, button |
| **body-default** | Pin Sans | 14px (extracted) | 700 | normal | 0 | Body text (computed: bold) |
| **compact-100** | Pin Sans | 12px | 400 | 18px | 0 | Compact UI / legal text |
### Semantic Font Size Tokens
```css
--sema-font-size-display-1000: var(--base-font-size-72); /* 72px — largest display */
--sema-font-size-display-900: var(--base-font-size-60); /* 60px */
--sema-font-size-display-800: var(--base-font-size-48); /* 48px */
--sema-font-size-heading-700: var(--base-font-size-36); /* 36px */
--sema-font-size-heading-600: var(--base-font-size-28); /* 28px */
--sema-font-size-heading-500: var(--base-font-size-24); /* 24px */
--sema-font-size-ui-400: var(--base-font-size-20); /* 20px */
--sema-font-size-ui-300: var(--base-font-size-16); /* 16px */
--sema-font-size-ui-200: var(--base-font-size-14); /* 14px */
--sema-font-size-ui-100: var(--base-font-size-12); /* 12px */
```
### Text Decoration Tokens
```css
--base-font-textdecoration-default: none; /* No decoration — all non-link text */
--base-font-textdecoration-underline: underline; /* Links on hover/focus */
/* Semantic wrappers */
--sema-font-textdecoration-compact-100-default: var(--base-font-textdecoration-default);
--sema-font-textdecoration-compact-100-link: var(--base-font-textdecoration-underline);
--sema-font-textdecoration-compact-100-emphasis: var(--base-font-textdecoration-default);
--sema-font-textdecoration-body-100-default: var(--base-font-textdecoration-default);
--sema-font-textdecoration-body-100-link: var(--base-font-textdecoration-underline);
--sema-font-textdecoration-body-100-emphasis: var(--base-font-textdecoration-default);
--sema-font-textdecoration-ui-400: var(--base-font-textdecoration-default);
--sema-font-textdecoration-ui-300: var(--base-font-textdecoration-default);
--sema-font-textdecoration-ui-200: var(--base-font-textdecoration-default);
```
---
## 4. Spacing & Layout
### Spacing Scale
```css
/* ── Base: approximate 4px grid, with 10px and 14px as brand-specific values ── */
/* Note: 10px and 14px are intentional off-grid values in Pinterest's system */
--pintrest-space-sm: 10px; /* original: --sema-space-250 — tight internal padding */
--pintrest-space-md: 14px; /* original: --sema-space-350 — button vertical padding (6px) + context */
--pintrest-space-lg: 16px; /* original: --sema-space-400 — nav padding, standard internal gap */
--pintrest-space-xl: 24px; /* original: --sema-space-600 — section internal spacing */
--pintrest-space-2xl: 32px; /* original: --sema-space-800 — section separation */
--pintrest-space-3xl: 48px; /* original: --sema-space-1200 — large section gaps */
/* Note: --pintrest-space-xs maps to --sema-space-1600 (64px) which is a blur value,
not a spacing value. Treat 64px as an XL blur token, not layout spacing. */
```
### Semantic Space Tokens (from extracted system)
```css
--sema-space-0: 0px; /* Zero — focus outline offsets */
--sema-space-50: 2px; /* Micro — focus ring gap */
--sema-space-100: 4px; /* XS — icon internal padding */
--sema-space-200: 8px; /* SM — compact padding */
--sema-space-250: 10px; /* SM+ — tight component padding */
--sema-space-300: 12px; /* MD- — card internal */
--sema-space-350: 14px; /* MD — button padding */
--sema-space-400: 16px; /* MD+ — standard nav/section padding */
--sema-space-600: 24px; /* LG — section internal */
--sema-space-800: 32px; /* XL — between components */
--sema-space-1200: 48px; /* 2XL — section gap */
```
### Button & Input Padding (from computed styles)
```css
/* Button primary: padding 6px 14px */
/* Input: padding 11px 15px */
/* Navigation: padding 16px */
```
### Grid System & Breakpoints
```css
/* ── Responsive Breakpoints ── */
/* extracted: high confidence */
@custom-media --bp-sm (min-width: 576px); /* Small — compact mobile → standard mobile */
@custom-media --bp-md (min-width: 768px); /* Medium — tablet portrait */
@custom-media --bp-lg (min-width: 890px); /* Large — tablet landscape / small desktop */
@custom-media --bp-xl (min-width: 1312px); /* XL — standard desktop */
@custom-media --bp-2xl (min-width: 1440px); /* 2XL — wide desktop */
@custom-media --bp-3xl (min-width: 1680px); /* 3XL — ultrawide */
@custom-media --bp-4xl (min-width: 2048px); /* 4XL — retina/4K displays */
```
### Layout Rules
- **Navigation:** `display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 16px;` — full-width, white background
- **Modal/Sheet:** `display: flex; flex-direction: row; justify-content: center; align-items: center;` — centred overlay
- **Masonry grid (pin feed):** Multi-column masonry using CSS columns or JS masonry — column count responsive across breakpoints
- **Container:** Not a fixed max-width container — Pinterest uses edge-to-edge layouts at all breakpoints, with internal component padding providing breathing room
---
## 5. Page Structure & Layout Patterns
> **Note:** No screenshots provided. Section derived from LAYOUT DIGEST, computed styles, and component inventory. Rows marked **(inferred)** are probable but not visually confirmed.
### 5.1 Section Map
| # | Section | Layout Type | Approx. Height | Key Elements | Confidence |
|---|---|---|---|---|---|
| 1 | **Top Navigation** | Flex row, full-width | ~64px | Logo (Pinterest wordmark), Search bar, Nav links, Log in / Sign up buttons | extracted |
| 2 | **Hero / Signup Panel** | Flex column, centered | ~400–600px | h2 (70px, "Sign up to get your..."), CTA buttons (Log in, Sign up, Continue with Google/Facebook) | extracted |
| 3 | **Feature Imagery Grid** | Masonry / CSS columns | ~600–900px | Pin cards, overlapping visual mosaic | inferred |
| 4 | **Category / Interest Explorer** | Horizontal scroll or grid | ~200–300px | Interest chips with pill radius (`--pintrest-radius-full`), category labels | inferred |
| 5 | **Footer** | Flex row, full-width | ~100–160px | App store links (iOS/Android), Explore link, Terms of Service, Privacy Policy | extracted |
### 5.2 Layout Patterns
**Navigation (extracted):**
```
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 16px; /* --pintrest-space-lg */
background-color: #fff; /* --base-color-grayscale-0 */
width: 100%;
```
Logo anchored left, action buttons (Log in, Sign up) anchored right. Intermediate space-between places search or nav links in the centre.
**Hero / Auth Panel (extracted from computed styles):**
```
/* Centred column, text-align: center on h1 */
h2: font-size: 70px; font-weight: 600; color: #fff; text-align: start;
h1: font-size: 28px; font-weight: 700; color: #000; text-align: center; padding: 0 16px;
CTA buttons: inline-block; padding: 6px 14px; border-radius: 16px; background: #e60023;
```
**Modal / Sheet (extracted):**
```
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/* Scrim: --sema-color-background-scrims-opaque (hsla(53,29%,95%,.8)) */
```
**Pin Card Grid (inferred):**
- Masonry layout, variable card heights
- Cards use `border-radius: --pintrest-radius-lg` (16px)
- Image overlay gradients: `--sema-color-background-gradient-darken-bottom-weak`
- Card hover: scale transform or shadow elevation change with `--pintrest-duration-fast`
**Interest/Category Chips (inferred):**
- `border-radius: --pintrest-radius-full` (999px)
- Background: `--base-color-grayscale-50`
- Active/selected: `--base-color-grayscale-100` or Pinterest red tint
### 5.3 Visual Hierarchy
1. **Hero headline (70px, weight 600, white)** — most visually dominant element; placed over image background
2. **Pinterest red CTA buttons** — singular colour contrast moment; `background: #e60023`; all other buttons are secondary (neutral/transparent)
3. **Navigation bar** — white, slim, hugs top edge; logo (Pinterest red P) is the only persistent brand moment
4. **Pin imagery** — user content dominates below-the-fold; UI withdraws
5. **Footer links** — `font-size: 12px; color: rgb(33,25,34)` — deliberately low-contrast
**CTA placement:** Primary CTA ("Log in", "Sign up") in top-right nav AND in the hero panel. Both use `--base-color-pinterest` background.
**Whitespace rhythm:** `padding: 16px` on nav, `0 16px` on h1. Section gaps approximate `--pintrest-space-3xl` (48px) between major sections.
### 5.4 Content Patterns
**Auth Button Group (repeated in nav and hero):**
- "Log in" → secondary style (neutral background or outline)
- "Sign up" → primary style (`#e60023` background)
- "Continue with Google" / "Continue with Facebook" → transparent/ghost with social icon
**Legal Footer Links:**
- Pattern: `font-size: 12px; font-weight: 400; color: rgb(33,25,34); text-decoration: none;`
- On hover/focus: `text-decoration-line: underline` (from `.eTLu1g:focus, .eTLu1g:hover`)
**Pin Card Hover Overlay:**
- Dark bottom gradient (`--sema-color-background-gradient-darken-bottom-weak`) revealed on hover
- "Save" button appears — uses `--pintrest-radius-full` (pill shape)
---
## 6. Component Patterns
### 6.1 Primary Button
**Anatomy:** `[container] > [label]`
- Container: `inline-block`, `border-radius: 16px`, `padding: 6px 14px`, `background: #e60023`
- Label: `font-family: Pin Sans`, `font-size: 16px`, `font-weight: 700`, `color: #fff`
- Invisible focus border: `border: 2px solid transparent`
- Transition: `transform 0.085s ease`
**State Table:**
| State | Background | Text | Border | Transform |
|---|---|---|---|---|
| Default | `#e60023` | `#fff` | `2px solid transparent` | `scale(1)` |
| Hover | `#cc001f` | `#fff` | `2px solid transparent` | `scale(1)` |
| Active/Pressed | `#b2001b` | `#fff` | `2px solid transparent` | `scale(0.95)` |
| Focus | `#e60023` | `#fff` | `2px solid #000` (focus-visible) | `scale(1)` |
| Disabled | `#e5e5e0` | `#91918c` | `2px solid transparent` | `scale(1)` |
| Loading | `#e60023` | transparent (spinner) | `2px solid transparent` | `scale(1)` |
```tsx
// Pinterest Primary Button — complete state handling
import { useState } from 'react';
interface PinterestButtonProps {
children: React.ReactNode;
onClick?: () => void;
disabled?: boolean;
loading?: boolean;
type?: 'button' | 'submit';
}
export function PinterestButton({
children,
onClick,
disabled = false,
loading = false,
type = 'button',
}: PinterestButtonProps) {
const [pressed, setPressed] = useState(false);
return (
<button
type={type}
onClick={onClick}
disabled={disabled || loading}
onMouseDown={() => setPressed(true)}
onMouseUp={() => setPressed(false)}
onMouseLeave={() => setPressed(false)}
style={{
display: 'inline-block',
fontFamily: 'var(--base-font-family-default-latin)',
fontSize: '16px',
fontWeight: 'var(--base-font-weight-700)',
lineHeight: '22.4px',
letterSpacing: '0',
color: disabled ? 'var(--base-color-grayscale-200)' : 'var(--base-color-grayscale-0)',
backgroundColor: disabled
? 'var(--base-color-grayscale-100)'
: 'var(--base-color-pinterest)',
borderRadius: 'var(--pintrest-radius-lg)',
padding: '6px 14px',
border: '2px solid transparent',
cursor: disabled ? 'not-allowed' : 'pointer',
transition: `transform var(--pintrest-duration-fast) var(--pintrest-ease-default)`,
transform: pressed && !disabled ? 'scale(0.95)' : 'scale(1)',
opacity: loading ? 0.8 : 1,
textDecoration: 'none',
textAlign: 'center',
whiteSpace: 'nowrap',
userSelect: 'none',
}}
// Hover states handled via CSS class below
className="pinterest-btn-primary"
>
{loading ? (
<span aria-label="Loading" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
<svg width="16" height="16" viewBox="0 0 16 16" style={{ animation: 'spin 0.6s linear infinite' }}>
<circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="2" fill="none" strokeDasharray="20" strokeDashoffset="5" />
</svg>
</span>
) : (
children
)}
</button>
);
}
// Companion CSS (in global stylesheet or CSS module):
/*
.pinterest-btn-primary:hover:not(:disabled) {
background-color: var(--base-color-hover-pinterest);
}
.pinterest-btn-primary:active:not(:disabled) {
background-color: var(--base-color-pressed-pinterest);
}
.pinterest-btn-primary:focus-visible {
outline: 2px solid var(--base-color-grayscale-500);
outline-offset: var(--sema-space-50);
}
@keyframes spin { 100% { transform: rotate(360deg); } }
*/
```
---
### 6.2 Text Input
**Anatomy:** `[wrapper] > [label] + [input]`
- Input: `border-radius: 16px`, `padding: 11px 15px`, `border: 1px solid #91918c`
- Font: 16px / 400 weight / Pin Sans
- Background: transparent (sits on white surface)
**State Table:**
| State | Border | Background | Text | Label |
|---|---|---|---|---|
| Default | `1px solid #91918c` | transparent | `#000` | `#21191f` |
| Hover | `1px solid #62625b` (darker) | transparent | `#000` | `#21191f` |
| Focus | `2px solid #000` | transparent | `#000` | `#21191f` |
| Error | `1px solid #dd0e0e` | transparent | `#000` | `#dd0e0e` |
| Disabled | `1px solid #e5e5e0` | `#f6f6f3` | `#91918c` | `#91918c` |
```tsx
interface PinterestInputProps {
id: string;
label: string;
value: string;
onChange: (v: string) => void;
placeholder?: string;
error?: string;
disabled?: boolean;
type?: string;
}
export function PinterestInput({
id, label, value, onChange, placeholder, error, disabled = false, type = 'text',
}: PinterestInputProps) {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
<label
htmlFor={id}
style={{
fontFamily: 'var(--base-font-family-default-latin)',
fontSize: '12px',
fontWeight: 'var(--base-font-weight-400)',
color: error ? 'var(--base-color-red-400)' : 'rgb(33,25,34)',
lineHeight: 'normal',
}}
>
{label}
</label>
<input
id={id}
type={type}
value={value}
onChange={e => onChange(e.target.value)}
placeholder={placeholder}
disabled={disabled}
style={{
fontFamily: 'var(--base-font-family-default-latin)',
fontSize: '16px',
fontWeight: 'var(--base-font-weight-400)',
lineHeight: '22.4px',
color: disabled ? 'var(--base-color-grayscale-200)' : 'var(--base-color-grayscale-500)',
backgroundColor: disabled ? 'var(--base-color-grayscale-50)' : 'transparent',
borderRadius: 'var(--pintrest-radius-lg)',
padding: '11px 15px',
border: error
? `1px solid var(--base-color-red-400)`
: `1px solid var(--base-color-grayscale-200)`,
outline: 'none',
width: '100%',
boxSizing: 'border-box',
cursor: disabled ? 'not-allowed' : 'text',
}}
className="pinterest-input"
/>
{error && (
<span style={{
fontFamily: 'var(--base-font-family-default-latin)',
fontSize: '12px',
color: 'var(--base-color-red-400)',
lineHeight: 'normal',
}}>
{error}
</span>
)}
</div>
);
}
/*
.pinterest-input:hover:not(:disabled) {
border-color: var(--base-color-grayscale-300);
}
.pinterest-input:focus {
border: 2px solid var(--base-color-grayscale-500);
padding: 10px 14px; /* compensate for border-width increase */
}
*/
```
---
### 6.3 Navigation Bar
**Anatomy:** `[nav] > [logo] + [search] + [actions]`
- Layout: `flex; row; justify-content: space-between; align-items: center; padding: 16px`
- Background: `#fff`
- Height: ~64px
**State Table:**
| State | Background | Shadow | Border |
|---|---|---|---|
| Default | `#fff` | none | none |
| Scrolled (inferred) | `#fff` | `--sema-elevation-shadow-surface` | none |
```tsx
export function PinterestNav() {
return (
<nav
role="navigation"
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 'var(--pintrest-space-lg)', /* 16px */
backgroundColor: 'var(--base-color-grayscale-0)',
width: '100%',
boxSizing: 'border-box',
position: 'sticky',
top: 0,
zIndex: 100,
}}
>
{/* Logo */}
<a href="/" aria-label="Pinterest home" style={{ display: 'flex', alignItems: 'center' }}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="var(--base-color-pinterest)" aria-hidden="true">
{/* Pinterest P logo path */}
</svg>
</a>
{/* Actions */}
<div style={{ display: 'flex', gap: 'var(--pintrest-space-sm)', alignItems: 'center' }}>
<a
href="/login"
style={{
fontFamily: 'var(--base-font-family-default-latin)',
fontSize: '16px',
fontWeight: 'var(--base-font-weight-700)',
color: 'var(--base-color-grayscale-500)',
textDecoration: 'none',
padding: '6px 14px',
borderRadius: 'var(--pintrest-radius-lg)',
backgroundColor: 'var(--base-color-grayscale-100)',
}}
className="pinterest-nav-secondary"
>
Log in
</a>
<a
href="/signup"
style={{
fontFamily: 'var(--base-font-family-default-latin)',
fontSize: '16px',
fontWeight: 'var(--base-font-weight-700)',
color: 'var(--base-color-grayscale-0)',
textDecoration: 'none',
padding: '6px 14px',
borderRadius: 'var(--pintrest-radius-lg)',
backgroundColor: 'var(--base-color-pinterest)',
}}
className="pinterest-btn-primary"
>
Sign up
</a>
</div>
</nav>
);
}
```
---
### 6.4 Badge
**Anatomy:** `[badge-container] > [label]`
- `border-radius: --pintrest-radius-sm` (2px) — sharp badge
- `box-shadow: rgb(128,128,128) 0px 0px 5px 0px`
- `font-size: 12px; font-weight: 400`
**State Table:**
| Variant | Background | Hover Background | Text |
|---|---|---|---|
| Info | `--comp-badge-color-background-info` | `--comp-badge-color-hover-background-info` | semantic |
| Error | `--comp-badge-color-background-error` | `--comp-badge-color-hover-background-error` | semantic |
| Warning | `--comp-badge-color-background-warning` | `--comp-badge-color-hover-background-warning` | semantic |
| Success | `--comp-badge-color-background-success` | `--comp-badge-color-hover-background-success` | semantic |
| Neutral | `--comp-badge-color-background-neutral` | `--comp-badge-color-hover-background-neutral` | semantic |
```tsx
type BadgeVariant = 'info' | 'error' | 'warning' | 'success' | 'neutral';
export function PinterestBadge({ children, variant = 'neutral' }: { children: React.ReactNode; variant?: BadgeVariant }) {
return (
<span
className={`pinterest-badge pinterest-badge--${variant}`}
style={{
fontFamily: 'var(--base-font-family-default-latin)',
fontSize: '12px',
fontWeight: 'var(--base-font-weight-400)',
lineHeight: 'normal',
borderRadius: 'var(--pintrest-radius-sm)',
padding: '2px 6px',
display: 'inline-block',
boxShadow: 'rgb(128,128,128) 0px 0px 5px 0px',
transition: `right var(--pintrest-duration-fast)`,
}}
>
{children}
</span>
);
}
/*
.pinterest-badge--info { background: var(--comp-badge-color-background-info); }
.pinterest-badge--error { background: var(--comp-badge-color-background-error); }
.pinterest-badge--warning { background: var(--comp-badge-color-background-warning); }
.pinterest-badge--success { background: var(--comp-badge-color-background-success); }
.pinterest-badge--neutral { background: var(--comp-badge-color-background-neutral); }
.pinterest-badge--info:hover { background: var(--comp-badge-color-hover-background-info); }
.pinterest-badge--error:hover { background: var(--comp-badge-color-hover-background-error); }
.pinterest-badge--warning:hover { background: var(--comp-badge-color-hover-background-warning); }
.pinterest-badge--success:hover { background: var(--comp-badge-color-hover-background-success); }
.pinterest-badge--neutral:hover { background: var(--comp-badge-color-hover-background-neutral); }
*/
```
---
### 6.5 Toggle / Switch
**Anatomy:** `[track] > [handle]`
- Track: `border-radius: 8px` (from computed styles on toggle element)
- `transition: transform 0.085s ease-out`
- `border-width: 0px` in both on and off states (`--comp-switch-border-width-container-on/off: 0px`)
**State Table:**
| State | Track Background | Handle Position | Border |
|---|---|---|---|
| Off | `--base-color-grayscale-150` | Left | none (0px) |
| On | `--base-color-pinterest` | Right | none (0px) |
| Disabled Off | `--base-color-grayscale-100` | Left | none |
| Disabled On | `--base-color-grayscale-150` | Right | none |
```tsx
export function PinterestSwitch({
checked,
onChange,
disabled = false,
label,
}: {
checked: boolean;
onChange: (v: boolean) => void;
disabled?: boolean;
label: string;
}) {
return (
<label style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', cursor: disabled ? 'not-allowed' : 'pointer' }}>
<button
role="switch"
aria-checked={checked}
aria-label={label}
disabled={disabled}
onClick={() => !disabled && onChange(!checked)}
style={{
width: '44px',
height: '24px',
borderRadius: '8px', /* from computed toggle border-radius */
border: '0px none', /* --comp-switch-border-width-container: 0px */
backgroundColor: checked
? (disabled ? 'var(--base-color-grayscale-150)' : 'var(--base-color-pinterest)')
: (disabled ? 'var(--base-color-grayscale-100)' : 'var(--base-color-grayscale-150)'),
position: 'relative',
cursor: disabled ? 'not-allowed' : 'pointer',
transition: `background-color var(--pintrest-duration-fast) var(--pintrest-ease-default)`,
padding: 0,
}}
>
<span style={{
position: 'absolute',
top: '2px',
left: checked ? 'calc(100% - 22px)' : '2px',
width: '20px',
height: '20px',
borderRadius: '50%',
backgroundColor: 'var(--base-color-grayscale-0)',
transition: `left var(--pintrest-duration-fast) var(--pintrest-ease-default)`,
boxShadow: 'var(--sema-elevation-shadow-raised)',
}} />
</button>
<span style={{
fontFamily: 'var(--base-font-family-default-latin)',
fontSize: '12px',
fontWeight: 'var(--base-font-weight-400)',
color: disabled ? 'var(--base-color-grayscale-200)' : 'rgb(33,25,34)',
}}>
{label}
</span>
</label>
);
}
```
---
### 6.6 Checkbox
**Anatomy:** `[container] > [box] + [label]`
- Unchecked: `border: 1px solid` (default), `border-width: 2px` on hover/focus
- Checked: `border-width: 0px` (filled, no border)
- Focus ring: `outline: 2px solid outer` + `2px solid inner`
**State Table:**
| State | Checked | Border Width | Background |
|---|---|---|---|
| Default unchecked | false | 1px | transparent |
| Hover unchecked | false | 2px | transparent |
| Pressed unchecked | false | 2px | wash |
| Checked | true | 0px | `--base-color-pinterest` |
| Disabled unchecked | false | 0px | `--base-color-grayscale-100` |
| Disabled checked | true | 0px | `--base-color-grayscale-200` |
| Error unchecked | false | 2px | transparent |
| Error checked | true | 0px | `--base-color-red-400` |
| Focus | any | outer 2px / inner 2px | — |
---
### 6.7 Link
**Anatomy:** `<a>` inline element
- Default: `text-decoration: none; color: rgb(33,25,34);`
- Hover/Focus: `text-decoration-line: underline` (from `.eTLu1g:focus, .eTLu1g:hover`)
- Link variant: `color: var(--sema-color-text-link)` with `var(--sema-color-hover-text-link)` on hover
**State Table:**
| State | Color | Decoration |
|---|---|---|
| Default | `rgb(33,25,34)` | none |
| Hover | `var(--sema-color-hover-text-link)` | underline |
| Active | `var(--sema-color-pressed-text-link)` | underline |
| Focus | `rgb(33,25,34)` | underline |
---
## 7. Elevation & Depth
### Shadow Tokens
```css
/* ── Elevation Shadows ── */
/* extracted: high confidence */
--sema-elevation-shadow-surface: 0px 0.5px 3px 0px rgba(0,0,0,.2); /* Lowest — cards on surface */
--sema-elevation-shadow-raised: 0px 1.5px 6px 0px rgba(0,0,0,.2); /* Raised — dropdowns, popovers */
--sema-elevation-shadow-floating: 0px 3px 12px 0px rgba(0,0,0,.2); /* Floating — modals, tooltips */
```
### Blur Tokens (Backdrop Filter)
```css
/* ── Background Blur ── */
--sema-elevation-background-blur-weak: 8px; /* Subtle glass effect */
--sema-elevation-background-blur-default: 24px; /* Standard backdrop blur */
--sema-elevation-background-blur-strong: 64px; /* Heavy blur — strong glass overlays */
```
### Z-Index Scale (inferred from layering needs)
```css
/* reconstructed: moderate confidence, inferred from component types */
--z-base: 0; /* Standard document flow */
--z-raised: 10; /* Cards, raised surfaces */
--z-dropdown: 100; /* Dropdown menus, popovers */
--z-sticky: 200; /* Sticky navigation */
--z-overlay: 300; /* Overlay / scrim layer */
--z-modal: 400; /* Modal dialogs, sheets */
--z-toast: 500; /* Toast notifications */
--z-tooltip: 600; /* Tooltips (highest) */
```
### Scrim Tokens
```css
--sema-color-background-scrims-opaque: hsla(53,29%,95%,.8); /* Light scrim — auth sheets */
--sema-color-background-scrims-translucent: hsla(60,2%,45%,.4); /* Dark translucent scrim */
/* Hover states */
--sema-color-hover-background-scrims-opaque: hsla(60,6%,83%,.8);
--sema-color-hover-background-scrims-translucent: rgba(51,51,46,.4);
/* Pressed states */
--sema-color-pressed-background-scrims-opaque: hsla(60,3%,74%,.8);
--sema-color-pressed-background-scrims-translucent: rgba(29,29,27,.4);
```
### Border Tokens
```css
/* ── Focus Ring ── */
/* Outer ring: 2px solid var(--sema-color-border-focus-outer-default) */
/* Inner ring: 2px solid var(--sema-color-border-focus-inner-dark) [= #000] */
/* Focus offset: var(--sema-space-0) to var(--sema-space-50) */
/* ── Component Border Widths ── */
--comp-checkbox-border-width-container-default-unchecked: 1px;
--comp-radiobutton-border-width-container-default-deselected: 1px;
--comp-avatar-border-width-container: 1px;
--comp-avatargroup-border-width-container: 1px;
--comp-slider-border-width-handle: 2px;
/* Focus rings */
--comp-checkbox-border-width-focus-outer: 2px;
--comp-checkbox-border-width-focus-inner: 2px;
--comp-buttontoggle-border-width-focus-outer: 2px;
--comp-buttontoggle-border-width-focus-inner: 2px;
```
### Layering Principles
- **Surface shadow** (`--sema-elevation-shadow-surface`): pin cards, form containers sitting on page
- **Raised shadow** (`--sema-elevation-shadow-raised`): dropdowns, context menus, hover-revealed action panels
- **Floating shadow** (`--sema-elevation-shadow-floating`): modals, sheets, tooltip bubbles
- **Scrim**: always placed below the modal/sheet z-layer but above content; opaque variant for light mode auth flows
---
## 8. Motion
### Timing & Easing Tokens
```css
/* ── Durations ── */
/* extracted: high confidence */
--pintrest-duration-fast: 0.085s; /* Primary — button press, micro-interactions */
/* ── Easing ── */
/* extracted: high confidence */
--pintrest-ease-default: ease; /* Default curve — universal */
/* ── Bezier Easings (semantic) ── */
--sema-motion-bezier-easing-ease-in: cubic-bezier(0.3, 0, 0.8, 0.15); /* Accelerate out */
--sema-motion-bezier-easing-ease-out: cubic-bezier(0.05, 0.7, 0.1, 1); /* Decelerate in — most common for enters */
--sema-motion-bezier-easing-ease-in-out: cubic-bezier(0.8, 0, 0.2, 1); /* Symmetric — modal open/close */
--sema-motion-bezier-easing-linear: cubic-bezier(0, 0, 1, 1); /* Spinner rotation */
/* ── Spring Easings (semantic) ── */
--sema-motion-spring-spatial-fast: linear(/* ... */); /* Fast spring — quick snaps */
--sema-motion-spring-spatial-medium: linear(/* ... */); /* Medium spring — cards, sheets */
--sema-motion-spring-spatial-slow: linear(/* ... */); /* Slow spring — large spatial transitions */
/* Note: Full spring values are complex linear() functions. See token reference or Pinterest's CSS for full values. */
```
### Named Keyframe Animations
```css
/* ── Spinner ── */
@keyframes rotateSpinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ── Colour-cycling spinner (Pinterest branded) ── */
@keyframes DCHi_A {
0% { fill: var(--comp-spinner-color-background-1); } /* #c85bd2 — purple */
33.333% { fill: var(--comp-spinner-color-background-2); } /* #e57534 — orange */
66.666% { fill: var(--comp-spinner-color-background-3); } /* #22a596 — teal */
100% { fill: var(--comp-spinner-color-background-1); }
}
/* ── Scale enter (popup/modal) ── */
@keyframes fb_transform {
0% { opacity: 0; transform: scale(0.95); }
100% { opacity: 1; transform: scale(1); }
}
/* ── Slide in from right ── */
@keyframes zNpIyo {
0% { transform: translateX(100%); }
100% { transform: translateX(0px); }
}
/* ── Slide in from left ── */
@keyframes qFRhHc {
0% { transform: translateX(-100%); }
100% { transform: translateX(0px); }
}
/* ── Slide up from bottom ── */
@keyframes J7O_A1 {
0% { transform: translateY(100%); }
100% { transform: translateY(0px); }
}
/* ── Fade in ── */
@keyframes BjOJeB {
0% { opacity: var(--sema-opacity-0); }
100% { opacity: var(--sema-opacity-100); }
}
/* ── Scale press (button active) ── */
@keyframes asdu8F {
0% { transform: scale(1); }
100% { transform: scale(0.95); }
}
/* ── Scale release (button release) ── */
@keyframes umZQnX {
0% { transform: scale(0.95); }
100% { transform: scale(1); }
}
/* ── Skeleton shimmer ── */
@keyframes M_GEGK {
0%, 23.0769%, 100% { background-color: var(--comp-skeleton-color-background-default); }
11.5385% { background-color: var(--comp-skeleton-color-background-highlight); }
}
```
### Motion Usage Rules
- **Micro-interactions** (button press, toggle flip): `0.085s ease` — never longer
- **Enter transitions** (modal, sheet, dropdown): slide + fade, `ease-out` curve, 150–200ms
- **Exit transitions**: slide out or fade out, `ease-in` curve, same duration
- **Skeleton shimmer**: 1.3s cycle via `M_GEGK`
- **Spinner**: continuous `rotate(360deg)` linear
- **NEVER animate** `width`, `height`, or `top/left` for layout — use `transform` only
- **Respect** `prefers-reduced-motion`: disable springs and slides, keep only opacity fades at ≤100ms
---
## 9. Anti-Patterns & Constraints
1. **Using system fonts as the primary typeface → Why it fails:** AI agents default to `font-family: Inter, sans-serif` or `font-family: -apple-system, sans-serif` without explicit instruction. This produces output that looks like a generic dashboard, not Pinterest. The entire UI hierarchy depends on "Pin Sans" as the lead family. → **What to do instead:** Always write `font-family: var(--base-font-family-default-latin)` which resolves to `"Pin Sans", -apple-system, ...`. Never write `font-family: Inter` or `font-family: system-ui` on any Pinterest component.
2. **Hardcoding colour hex values → Why it fails:** AI agents frequently inline `#e60023` or `#cc001f` directly in JSX `style` objects. This bypasses the token system — if the brand red shifts, every hardcoded value breaks silently while token-referenced elements update correctly. → **What to do instead:** Always write `var(--base-color-pinterest)` for the brand red, `var(--base-color-hover-pinterest)` for hover, `var(--base-color-pressed-pinterest)` for active. Never hardcode any hex value that has a named token.
3. **Applying arbitrary spacing values → Why it fails:** AI agents generate `padding: 20px` or `gap: 15px` because those feel "round". Pinterest's spacing system includes intentional off-grid values (10px, 14px) that reflect its token scale — substituting them with 8px/16px nearest-neighbours changes the visual density and breaks the system's internal consistency. → **What to do instead:** Use only the 7-token spacing scale (`--pintrest-space-sm` through `--pintrest-space-3xl`). For button padding use the computed value `6px 14px` exactly; for input padding use `11px 15px` exactly.
4. **Constructing Tailwind class names dynamically → Why it fails:** Tailwind's JIT compiler scans source code for complete class strings at build time. Writing `` `bg-[var(--${token})]` `` or `bg-[var(--base-color-${variant})]` produces classes that never appear in the compiled CSS, resulting in unstyled elements at runtime. → **What to do instead:** Write complete, static class names: `bg-[var(--base-color-pinterest)]`. Or use CSS custom properties in `style` props directly for dynamic values.
5. **Missing the three-state colour pattern on interactive elements → Why it fails:** Pinterest defines separate colour tokens for `default`, `hover`, and `pressed` states for every interactive surface. AI agents commonly implement only default + hover, skipping the `pressed/active` state. Users notice the missing press feedback immediately. → **What to do instead:** Every button, link, and interactive control must implement all three: default (`--base-color-pinterest`), hover (`:hover` → `--base-color-hover-pinterest`), and active (`:active` → `--base-color-pressed-pinterest`).
6. **Using border-radius values outside the defined scale → Why it fails:** AI agents generate `border-radius: 8px` because it's common, or `border-radius: 50%` for circles. Pinterest's radius scale is specific: 2px (badge), 12px (chips/some CTAs), 16px (primary buttons and inputs), 999px (pill chips). Using 8px on a button makes it look like a generic SaaS UI, not Pinterest. → **What to do instead:** Reference `var(--pintrest-radius-sm/md/lg/full)` for every rounded element. Primary buttons and inputs are always `var(--pintrest-radius-lg)` (16px). Pill chips are always `var(--pintrest-radius-full)`.
7. **Applying gradient backgrounds to UI surfaces → Why it fails:** Pinterest's dark-overlay gradients (`--sema-color-background-gradient-darken-bottom-*`) exist exclusively to darken imagery for text legibility. AI agents misread these as brand surface gradients and apply them to card backgrounds, nav bars, or hero sections, producing a "photo app" look that conflicts with Pinterest's clean-surface philosophy. → **What to do instead:** Surface backgrounds are always flat values from the grayscale scale. Gradients only go on top of photographic images as overlay layers, never on UI surfaces.
8. **Using `position: absolute` for primary layout → Why it fails:** AI agents reach for `position: absolute` when positioning elements within cards or navigation, which breaks at different viewport widths and causes overflow clipping on the masonry grid. → **What to do instead:** Use `display: flex` with `justify-content: space-between` for navigation, and CSS columns/grid for pin layouts. Reserve `position: absolute` only for overlays placed on top of images (save buttons, overlay gradients).
9. **Omitting focus-visible states → Why it fails:** Pinterest's system uses a two-ring focus indicator (outer ring + inner ring, each 2px). AI agents commonly set `outline: none` to avoid the browser default ring without replacing it with the Pinterest ring pattern, making the UI inaccessible. → **What to do instead:** All focusable elements must have `:focus-visible { outline: 2px solid var(--sema-color-border-focus-outer-default); outline-offset: var(--sema-space-50); }`. Interactive components that need the inner ring must also apply the inner border with `box-shadow` inset.
10. **Applying `!important` overrides to theme tokens → Why it fails:** Pinterest's system relies on the cascade of `base → semantic → component` tokens. Overriding with `!important` at the component level breaks state-dependent token resolution (hover/pressed states stop working because the default value is locked). → **What to do instead:** Override by increasing specificity with a parent selector, or by redefining the semantic token at the component scope with `:root [data-component="x"] { --sema-token: new-value; }`.
11. **Placeholder content in production components → Why it fails:** AI agents fill in `Lorem ipsum` text, placeholder image URLs (`https://via.placeholder.com/...`), and generic icon paths. Pinterest's UI is content-driven; using placeholders hides layout issues (especially in the masonry grid where variable image heights are fundamental). → **What to do instead:** Use realistic variable-height content in development. For image placeholders, use `background-color: var(--base-color-grayscale-100)` with aspect ratios, not external placeholder services.
---
## Appendix A: Complete Token Reference
Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.
```css
/* Colours (542) */
--sema-elevation-background-blur-strong: 64px;
--sema-elevation-background-blur-default: 24px;
--sema-elevation-background-blur-weak: 8px;
--sema-color-pressed-icon-performance-plus: #583b91;
--sema-color-pressed-background-scrims-opaque: hsla(60,3%,74%,.8);
--sema-color-pressed-background-scrims-translucent: rgba(29,29,27,.4);
--sema-color-pressed-background-wash-image-tint: rgba(57,57,55,.14);
--sema-color-pressed-background-wash-70-light: hsla(60,30%,91%,.7);
--sema-color-pressed-background-wash-70-dark: rgba(11,11,10,.7);
--sema-color-pressed-background-wash-50-light: hsla(60,30%,91%,.5);
--sema-color-pressed-background-wash-50-dark: rgba(11,11,10,.5);
--sema-color-pressed-background-performance-plus-weak: #cbb5f5;
--sema-color-hover-icon-performance-plus: #6845ab;
--sema-color-hover-background-scrims-opaque: hsla(60,6%,83%,.8);
--sema-color-hover-background-scrims-translucent: rgba(51,51,46,.4);
--sema-color-hover-background-wash-image-tint: rgba(36,36,35,.09);
--sema-color-hover-background-wash-70-light: hsla(60,14%,96%,.7);
--sema-color-hover-background-wash-70-dark: rgba(24,24,22,.7);
--sema-color-hover-background-wash-50-light: hsla(60,14%,96%,.5);
--sema-color-hover-background-wash-50-dark: rgba(24,24,22,.5);
--sema-color-hover-background-performance-plus-weak: #dccdfa;
--sema-color-dataviz-neutral: #767676;
--sema-color-dataviz-09: #f2681f;
--sema-color-dataviz-08: #400387;
--sema-color-dataviz-07: #00ab55;
--sema-color-dataviz-06: #ff5383;
--sema-color-dataviz-05: #0081fe;
--sema-color-dataviz-04: #d17711;
--sema-color-dataviz-03: #924af7;
--sema-color-dataviz-02: #11a69c;
--sema-color-dataviz-01: #003c96;
--sema-color-dataviz-12: #660e00;
--sema-color-dataviz-11: #de2c62;
--sema-color-dataviz-10: #005062;
--sema-color-icon-performance-plus: #774fc4;
--sema-color-background-gradient-darken-top-strong: linear-gradient(0deg,transparent,rgba(0,0,0,.8));
--sema-color-background-gradient-darken-top-weak: linear-gradient(0deg,transparent,rgba(0,0,0,.4));
--sema-color-background-gradient-darken-bottom-strong: linear-gradient(180deg,transparent,rgba(0,0,0,.8));
--sema-color-background-gradient-darken-bottom-weak: linear-gradient(180deg,transparent,rgba(0,0,0,.4));
--sema-color-background-scrims-opaque: hsla(53,29%,95%,.8);
--sema-color-background-scrims-translucent: hsla(60,2%,45%,.4);
--sema-color-background-wash-image-tint: rgba(0,0,0,.04);
--sema-color-background-wash-70-dark: rgba(36,36,33,.7);
--sema-color-background-wash-70-light: hsla(60,20%,98%,.7);
--sema-color-background-wash-50-dark: rgba(36,36,33,.5);
--sema-color-background-wash-50-light: hsla(60,20%,98%,.5);
--sema-color-background-performance-plus-weak: #ebe2fd;
--sema-color-background-transparent: hsla(0,0%,100%,0);
--comp-spinner-color-background-3: #22a596;
--comp-spinner-color-background-2: #e57534;
--comp-spinner-color-background-1: #c85bd2;
--comp-searchguide-color-background-rainbow-default: linear-gradient(-60deg,#d4b0ff,#90f0e1 37%,#c7f783 66%,#ffa570);
--comp-iconbuttonsocial-color-background-wash-container: transparent;
--comp-iconbuttonsocial-color-background-container-samsung-messages: linear-gradient(180deg,#4189ed,#376df6);
--comp-iconbuttonsocial-color-background-container-discord: #5865f2;
--comp-iconbuttonsocial-color-background-container-instagram: #ff0076;
--facebook-background-color: #0866ff;
--viber-background-color: #7360f2;
--x-background-color: #000;
--wechat-background-color: linear-gradient(180deg,#05d50b,#02b70e);
--telegram-background-color: linear-gradient(180deg,#2aabee,#229ed9);
--kakao-background-color: #ffeb3b;
--comp-iconbuttonsocial-color-background-container-imessage: linear-gradient(180deg,#5bf675,#0cbd2a);
--line-background-color: #06c755;
--snap-background-color: #fffc00;
--whatsapp-background-color: #25d366;
--comp-iconbuttonsocial-color-icon-snap: #fff;
--comp-iconbuttonsocial-color-icon-discord: #e0e3ff;
--comp-iconbuttonsocial-color-icon-google-messages: #0057cc;
--comp-iconbuttonsocial-color-icon-gmail: #64656c;
--comp-iconbuttonsocial-color-icon-reddit: #ff4500;
--comp-iconbuttonsocial-color-icon-kakao-talk: #3e2723;
--base-color-pressed-orange-700: #291000;
--base-color-pressed-orange-600: #612700;
--base-color-pressed-orange-500: #803300;
--base-color-pressed-orange-400: #c45205;
--base-color-pressed-orange-300: #fe7920;
--base-color-pressed-orange-200: #ff944d;
--base-color-pressed-orange-100: #ffc199;
--base-color-pressed-orange-50: #ffd0ad;
--base-color-pressed-green-700: #05140c;
--base-color-pressed-green-600: #032613;
--base-color-pressed-green-500: #054221;
--base-color-pressed-green-400: #045328;
--base-color-pressed-green-300: #238b53;
--base-color-pressed-green-200: #5bd292;
--base-color-pressed-green-100: #9ee5bf;
--base-color-pressed-green-50: #bcecd1;
--base-color-pressed-blue-700: #0f1a52;
--base-color-pressed-blue-600: #1d2f86;
--base-color-pressed-blue-500: #223aaa;
--base-color-pressed-blue-400: #1e3dd7;
--base-color-pressed-blue-300: #5069e8;
--base-color-pressed-blue-200: #617bff;
--base-color-pressed-blue-100: #a8b7ff;
--base-color-pressed-blue-50: #b8c2ff;
--base-color-pressed-purple-700: #240029;
--base-color-pressed-purple-600: #55185e;
--base-color-pressed-purple-500: #6c1e76;
--base-color-pressed-purple-400: #8e279b;
--base-color-pressed-purple-300: #c548d6;
--base-color-pressed-purple-200: #e76ff6;
--base-color-pressed-purple-100: #f5adff;
--base-color-pressed-purple-50: #f8b8ff;
--base-color-pressed-red-700: #380000;
--base-color-pressed-red-600: #600606;
--base-color-pressed-red-500: #860909;
--base-color-pressed-red-400: #ad0b0b;
--base-color-pressed-red-300: #f50a0a;
--base-color-pressed-red-200: #ff5c5c;
--base-color-pressed-red-100: #ffa3a3;
--base-color-pressed-red-50: #ffb8b8;
--base-color-grayscale-450: #242421;
--base-color-pressed-grayscale-450: #0b0b0a;
--base-color-hover-grayscale-500: #181816;
--base-color-pressed-grayscale-350: #2d2d29;
--base-color-pressed-grayscale-300: #474742;
--base-color-pressed-grayscale-250: #5a5a54;
--base-color-pressed-grayscale-200: #787873;
--base-color-pressed-grayscale-150: #b0b0a6;
--base-color-pressed-grayscale-100: #cecec5;
--base-color-pressed-grayscale-50: #e0e0d6;
--base-color-pressed-grayscale-25: #efefeb;
--base-color-pressed-pinterest: #b2001b;
--base-color-hover-orange-700: #421b00;
--base-color-hover-orange-600: #7a3100;
--base-color-hover-orange-500: #993d00;
--base-color-hover-orange-400: #cf5606;
--base-color-hover-orange-300: #fe8839;
--base-color-hover-orange-200: #ffa366;
--base-color-hover-orange-100: #ffd0b2;
--base-color-hover-orange-50: #ffdec7;
--base-color-hover-green-700: #0b2819;
--base-color-hover-green-600: #053d1f;
--base-color-hover-green-500: #075a2d;
--base-color-hover-green-400: #056b34;
--base-color-hover-green-300: #289f5f;
--base-color-hover-green-200: #6fd7a0;
--base-color-hover-green-100: #b3ebcd;
--base-color-hover-green-50: #cff1df;
--base-color-hover-blue-700: #132167;
--base-color-hover-blue-600: #22379b;
--base-color-hover-blue-500: #2741bf;
--base-color-hover-blue-400: #2c4be2;
--base-color-hover-blue-300: #5b74f0;
--base-color-hover-blue-200: #7a90ff;
--base-color-hover-blue-100: #c2ccff;
--base-color-hover-blue-50: #d1d8ff;
--base-color-hover-purple-700: #3a0042;
--base-color-hover-purple-600: #681d72;
--base-color-hover-purple-500: #7e238b;
--base-color-hover-purple-400: #a02caf;
--base-color-hover-purple-300: #cc5dda;
--base-color-hover-purple-200: #eb87f7;
--base-color-hover-purple-100: #f8c7ff;
--base-color-hover-purple-50: #fad1ff;
--base-color-hover-red-700: #520000;
--base-color-hover-red-600: #780808;
--base-color-hover-red-500: #9e0a0a;
--base-color-hover-red-400: #c50c0c;
--base-color-hover-red-300: #f72c2c;
--base-color-hover-red-200: #ff7575;
--base-color-hover-red-100: #ffbdbd;
--base-color-hover-red-50: #ffd1d1;
--base-color-hover-grayscale-400: #262622;
--base-color-hover-grayscale-350: #3b3b36;
--base-color-hover-grayscale-300: #55554f;
--base-color-hover-grayscale-250: #676760;
--base-color-hover-grayscale-200: #85857f;
--base-color-hover-grayscale-150: #bcbcb3;
--base-color-hover-grayscale-100: #dadad3;
--base-color-hover-grayscale-50: #ebebe5;
--base-color-hover-grayscale-25: #f6f6f3;
--base-color-hover-pinterest: #cc001f;
--base-color-orange-700: #5c2500;
--base-color-orange-600: #943b00;
--base-color-orange-500: #b24700;
--base-color-orange-400: #db5b06;
--base-color-orange-300: #fe9752;
--base-color-orange-200: #ffb380;
--base-color-orange-100: #ffe0cc;
--base-color-orange-50: #ffede0;
--base-color-green-700: #103c25;
--base-color-green-600: #07552b;
--base-color-green-500: #097239;
--base-color-green-400: #068440;
--base-color-green-300: #2db46c;
--base-color-green-200: #83ddad;
--base-color-green-100: #c7f0da;
--base-color-green-50: #e3f7ec;
--base-color-blue-700: #17287d;
--base-color-blue-600: #273eb0;
--base-color-blue-500: #2b48d4;
--base-color-blue-400: #435ee5;
--base-color-blue-300: #677eee;
--base-color-blue-200: #92a4ff;
--base-color-blue-100: #dbe1ff;
--base-color-blue-50: #ebeeff;
--base-color-purple-700: #51005c;
--base-color-purple-600: #7a2286;
--base-color-purple-500: #91289f;
--base-color-purple-400: #b331c4;
--base-color-purple-300: #d271df;
--base-color-purple-200: #ef9ff9;
--base-color-purple-100: #fbdfff;
--base-color-purple-50: #fdebff;
--base-color-red-700: #6b0000;
--base-color-red-600: #900909;
--base-color-red-500: #b60c0c;
--base-color-red-400: #dd0e0e;
--base-color-red-300: #f84f4f;
--base-color-red-200: #ff8f8f;
--base-color-red-100: #ffd7d7;
--base-color-red-50: #ffebeb;
--base-color-grayscale-400: #33332e;
--base-color-grayscale-350: #494943;
--base-color-grayscale-300: #62625b;
--base-color-grayscale-250: #74746c;
--base-color-grayscale-200: #91918c;
--base-color-grayscale-150: #c8c8c1;
--base-color-grayscale-100: #e5e5e0;
--base-color-grayscale-25: #fbfbf9;
--base-color-pinterest: #e60023;
--sema-color-pressed-background-info-default: var(
--base-color-pressed-blue-400
);
--sema-color-pressed-icon-verified-pinner: var(
--base-color-pressed-pinterest
);
--sema-color-pressed-icon-dark: var(--base-color-pressed-grayscale-500);
--sema-color-pressed-icon-light: var(--base-color-pressed-grayscale-0);
--sema-color-pressed-icon-error: var(--base-color-pressed-red-400);
--sema-color-pressed-icon-warning: var(--base-color-pressed-orange-400);
--sema-color-pressed-icon-success: var(--base-color-pressed-green-400);
--sema-color-pressed-icon-recommendation: var(
--base-color-pressed-purple-400
);
--sema-color-pressed-icon-info: var(--base-color-pressed-blue-400);
--sema-color-pressed-icon-primary: var(--base-color-pressed-pinterest);
--sema-color-pressed-text-info: var(--base-color-pressed-blue-500);
--sema-color-pressed-icon-subtle: var(--base-color-pressed-grayscale-300);
--sema-color-pressed-text-error: var(--base-color-pressed-red-500);
--sema-color-pressed-text-warning: var(--base-color-pressed-orange-500);
--sema-color-pressed-text-success: var(--base-color-pressed-green-500);
--sema-color-pressed-background-recommendation-default: var(
--base-color-pressed-purple-500
);
--sema-color-pressed-text-neutral: var(--base-color-pressed-grayscale-350);
--sema-color-pressed-border-interactive: var(
--base-color-pressed-grayscale-200
);
--sema-color-pressed-border-dark-decorative: var(
--base-color-pressed-grayscale-350
);
--sema-color-pressed-border-decorative: var(
--base-color-pressed-grayscale-150
);
--sema-color-pressed-border-selected: var(--base-color-pressed-grayscale-400);
--sema-color-pressed-background-error-weak: var(--base-color-pressed-red-50);
--sema-color-pressed-background-error-default: var(
--base-color-pressed-red-500
);
--sema-color-pressed-background-warning-weak: var(
--base-color-pressed-orange-50
);
--sema-color-pressed-background-warning-default: var(
--base-color-pressed-orange-500
);
--sema-color-pressed-background-success-weak: var(
--base-color-pressed-green-50
);
--sema-color-pressed-background-success-default: var(
--base-color-pressed-green-500
);
--sema-color-pressed-background-recommendation-weak: var(
--base-color-pressed-purple-50
);
--sema-color-pressed-background-subtle: var(
--base-color-pressed-grayscale-50
);
--sema-color-pressed-background-info-weak: var(--base-color-pressed-blue-50);
--sema-color-pressed-background-inverse: var(
--base-color-pressed-grayscale-500
);
--sema-color-pressed-background-default: var(
--base-color-pressed-grayscale-0
);
--sema-color-pressed-background-selected: var(
--base-color-pressed-grayscale-400
);
--sema-color-pressed-background-tertiary: var(
--base-color-pressed-grayscale-250
);
--sema-color-pressed-background-secondary: var(
--base-color-pressed-grayscale-100
);
--sema-color-hover-icon-info: var(--base-color-hover-blue-400);
--sema-color-hover-icon-primary: var(--base-color-hover-pinterest);
--sema-color-hover-icon-dark: var(--base-color-hover-grayscale-500);
--sema-color-hover-icon-light: var(--base-color-hover-grayscale-0);
--sema-color-hover-icon-error: var(--base-color-hover-red-400);
--sema-color-hover-icon-warning: var(--base-color-hover-orange-400);
--sema-color-hover-icon-success: var(--base-color-hover-green-400);
--sema-color-hover-icon-recommendation: var(--base-color-hover-purple-400);
--sema-color-hover-text-info: var(--base-color-hover-blue-500);
--sema-color-hover-icon-subtle: var(--base-color-hover-grayscale-300);
--sema-color-hover-text-error: var(--base-color-hover-red-500);
--sema-color-hover-text-warning: var(--base-color-hover-orange-500);
--sema-color-hover-text-success: var(--base-color-hover-green-500);
--sema-color-hover-text-recommendation: var(--base-color-hover-purple-500);
--sema-color-hover-text-neutral: var(--base-color-hover-grayscale-350);
--sema-color-hover-border-dark-interactive: var(
--base-color-hover-grayscale-200
);
--sema-color-hover-border-dark-decorative: var(
--base-color-hover-grayscale-350
);
--sema-color-hover-border-light-decorative: var(
--base-color-hover-grayscale-150
);
--sema-color-hover-border-selected: var(--base-color-hover-grayscale-400);
--sema-color-hover-border-interactive: var(--base-color-hover-grayscale-200);
--sema-color-hover-border-decorative: var(--base-color-hover-grayscale-150);
--sema-color-hover-background-error-weak: var(--base-color-hover-red-50);
--sema-color-hover-background-warning-weak: var(--base-color-hover-orange-50);
--sema-color-hover-background-warning-default: var(
--base-color-hover-orange-500
);
--sema-color-hover-background-success-weak: var(--base-color-hover-green-50);
--sema-color-hover-background-success-default: var(
--base-color-hover-green-500
);
--sema-color-hover-background-recommendation-weak: var(
--base-color-hover-purple-50
);
--sema-color-hover-background-recommendation-default: var(
--base-color-hover-purple-500
);
--sema-color-hover-background-neutral-weak: var(
--base-color-hover-grayscale-50
);
--sema-color-hover-background-info-weak: var(--base-color-hover-blue-50);
--sema-color-hover-background-subtle: var(--base-color-hover-grayscale-50);
--sema-color-hover-background-tertiary: var(--base-color-hover-grayscale-250);
--sema-color-hover-background-secondary: var(
--base-color-hover-grayscale-100
);
--sema-color-icon-info: var(--base-color-blue-400);
--sema-color-icon-primary: var(--base-color-pinterest);
--sema-color-icon-disabled: var(--base-color-grayscale-200);
--sema-color-border-focus-inner-dark: var(--base-color-grayscale-500);
--sema-color-border-focus-inner-light: var(--base-color-grayscale-0);
--sema-color-icon-error: var(--base-color-red-400);
--sema-color-icon-warning: var(--base-color-orange-400);
--sema-color-icon-success: var(--base-color-green-400);
--sema-color-icon-recommendation: var(--base-color-purple-400);
--sema-color-text-info: var(--base-color-blue-500);
--sema-color-icon-subtle: var(--base-color-grayscale-300);
--sema-color-text-error: var(--base-color-red-500);
--sema-color-text-warning: var(--base-color-orange-500);
--sema-color-text-success: var(--base-color-green-500);
--sema-color-background-recommendation-default: var(--base-color-purple-500);
--sema-color-text-neutral: var(--base-color-grayscale-350);
--sema-color-border-focus-outer-light: var(--base-color-blue-200);
--sema-color-border-disabled: var(--base-color-grayscale-150);
--sema-color-border-transparent: var(--base-color-transparent);
--sema-color-border-selected: var(--base-color-grayscale-400);
--sema-color-background-error-weak: var(--base-color-red-50);
--sema-color-background-warning-weak: var(--base-color-orange-50);
--sema-color-background-success-weak: var(--base-color-green-50);
--sema-color-background-recommendation-weak: var(--base-color-purple-50);
--sema-color-background-subtle: var(--base-color-grayscale-50);
--sema-color-background-info-weak: var(--base-color-blue-50);
--sema-color-background-disabled: var(--base-color-grayscale-100);
--sema-color-background-tertiary: var(--base-color-grayscale-250);
--comp-infobutton-color-hover-background-default: var(
--sema-color-background-transparent
);
--comp-switch-color-hover-background-container-enabled-on: var(
--base-color-hover-blue-400
);
--comp-switch-color-background-container-enabled-on: var(
--base-color-blue-400
);
--comp-switch-color-background-container-enabled-off: var(
--base-color-grayscale-200
);
--comp-sheet-color-background-scrim-opaque: var(
--sema-color-background-scrims-opaque
);
--comp-sheet-color-background-scrim-default: var(
--sema-color-background-scrims-translucent
);
--comp-avatar-color-pressed-background-default: var(
--sema-color-pressed-background-wash-image-tint
);
--comp-avatar-color-pressed-background-purple-weak: var(
--base-color-pressed-purple-100
);
--comp-searchguide-color-pressed-background-purple-strong-default: var(
--base-color-pressed-purple-200
);
--comp-avatar-color-pressed-background-red-weak: var(
--base-color-pressed-red-100
);
--comp-searchguide-color-pressed-background-red-strong-default: var(
--base-color-pressed-red-200
);
--comp-avatar-color-pressed-background-orange-weak: var(
--base-color-pressed-orange-100
);
--comp-searchguide-color-pressed-background-orange-strong-default: var(
--base-color-pressed-orange-200
);
--comp-avatar-color-pressed-background-green-weak: var(
--base-color-pressed-green-100
);
--comp-searchguide-color-pressed-background-green-strong-default: var(
--base-color-pressed-green-200
);
--comp-avatar-color-pressed-background-blue-weak: var(
--base-color-pressed-blue-100
);
--comp-searchguide-color-pressed-background-blue-strong-default: var(
--base-color-pressed-blue-200
);
--comp-avatar-color-hover-background-default: var(
--sema-color-hover-background-wash-image-tint
);
--comp-avatar-color-hover-background-purple-weak: var(
--base-color-hover-purple-100
);
--comp-searchguide-color-hover-background-purple-strong-default: var(
--base-color-hover-purple-200
);
--comp-avatar-color-hover-background-red-weak: var(
--base-color-hover-red-100
);
--comp-searchguide-color-hover-background-red-strong-default: var(
--base-color-hover-red-200
);
--comp-avatar-color-hover-background-orange-weak: var(
--base-color-hover-orange-100
);
--comp-searchguide-color-hover-background-orange-strong-default: var(
--base-color-hover-orange-200
);
--comp-avatar-color-hover-background-green-weak: var(
--base-color-hover-green-100
);
--comp-searchguide-color-hover-background-green-strong-default: var(
--base-color-hover-green-200
);
--comp-avatar-color-hover-background-blue-weak: var(
--base-color-hover-blue-100
);
--comp-searchguide-color-hover-background-blue-strong-default: var(
--base-color-hover-blue-200
);
--comp-searchguide-color-background-purple-weak-default: var(
--base-color-purple-100
);
--comp-searchguide-color-background-purple-strong-default: var(
--base-color-purple-200
);
--comp-searchguide-color-background-red-weak-default: var(
--base-color-red-100
);
--comp-searchguide-color-background-red-strong-default: var(
--base-color-red-200
);
--comp-searchguide-color-background-orange-weak-default: var(
--base-color-orange-100
);
--comp-searchguide-color-background-orange-strong-default: var(
--base-color-orange-200
);
--comp-searchguide-color-background-green-weak-default: var(
--base-color-green-100
);
--comp-searchguide-color-background-green-strong-default: var(
--base-color-green-200
);
--comp-searchguide-color-background-blue-weak-default: var(
--base-color-blue-100
);
--comp-searchguide-color-background-blue-strong-default: var(
--base-color-blue-200
);
--comp-progressbar-color-background-bar-default: var(--base-color-blue-300);
--comp-checkbox-motion-background-colorchange-duration: var(
--sema-motion-bezier-duration-150
);
--comp-checkbox-motion-background-colorchange-easing: var(
--sema-motion-bezier-easing-linear
);
--comp-button-color-pressed-background-transparent-inverse-default: var(
--sema-color-pressed-background-wash-50-inverse
);
--comp-button-color-pressed-background-transparent-default: var(
--sema-color-pressed-background-wash-50-default
);
--comp-button-color-hover-background-transparent-inverse-default: var(
--sema-color-hover-background-wash-50-inverse
);
--comp-button-color-hover-background-transparent-default: var(
--sema-color-hover-background-wash-50-default
);
--comp-button-color-background-tertiary-semi-transparent-disabled: var(
--sema-color-background-wash-50-light
);
--comp-button-color-background-tertiary-semi-transparent-default: var(
--sema-color-background-wash-50-default
);
--comp-badge-color-hover-background-wash-light: var(
--sema-color-hover-background-wash-50-light
);
--comp-badge-color-hover-background-wash-dark: var(
--sema-color-hover-background-wash-50-dark
);
--comp-badge-color-background-wash-dark: var(
--sema-color-background-wash-50-dark
);
--comp-avatar-color-background-orange-default: var(--base-color-orange-200);
--comp-avatar-color-background-orange-weak: var(--base-color-orange-100);
--comp-avatar-color-background-green-default: var(--base-color-green-200);
--comp-avatar-color-background-green-weak: var(--base-color-green-100);
--comp-avatar-color-background-blue-weak: var(--base-color-blue-100);
--comp-avatar-color-background-purple-default: var(--base-color-purple-200);
--comp-avatar-color-background-purple-weak: var(--base-color-purple-100);
--comp-avatar-color-background-red-default: var(--base-color-red-200);
--comp-avatar-color-background-red-weak: var(--base-color-red-100);
--comp-avatar-color-background-default: var(
--sema-color-background-wash-image-tint
);
--comp-button-color-text-secondary-selected: var(--sema-color-text-inverse);
--comp-tooltip-color-background-default: var(--sema-color-background-inverse);
--comp-infobutton-color-border-focus-outer-background-default: var(
--sema-color-border-focus-outer-default
);
--comp-infobutton-color-border-focus-inner-background-default: var(
--sema-color-border-focus-inner-default
);
--comp-button-color-text-secondary-default: var(--sema-color-text-default);
--comp-infobutton-color-icon-default: var(--sema-color-icon-default);
--comp-toast-color-icon-error: var(--sema-color-icon-inverse);
--comp-button-color-background-secondary-default: var(
--sema-color-background-secondary
);
--comp-buttontoggle-color-border-save-disabled-subtle: var(
--sema-color-border-transparent
);
--comp-bannerupsell-color-icon-logo: var(--sema-color-icon-primary);
--comp-bannerupsell-color-icon-recommendation: var(
--sema-color-icon-recommendation
);
--comp-radiogroup-color-icon-error-text-default: var(--sema-color-icon-error);
--comp-badge-color-icon-warning: var(--sema-color-icon-warning);
--comp-badge-color-icon-success: var(--sema-color-icon-success);
--comp-badge-color-icon-info: var(--sema-color-icon-info);
--comp-bannerupsell-color-icon-neutral: var(--sema-color-icon-neutral);
--comp-badge-color-background-neutral: var(
--sema-color-background-neutral-weak
);
--comp-buttontoggle-color-hover-text-graphic-enabled-subtle: var(
--sema-color-text-default
);
--comp-bannerslim-color-background-recommendation-expanded: var(
--sema-color-background-recommendation-weak
);
--comp-bannercallout-color-background-error: var(
--sema-color-background-error-weak
);
--comp-badge-color-background-warning: var(
--sema-color-background-warning-weak
);
--comp-badge-color-background-success: var(
--sema-color-background-success-weak
);
--comp-bannercallout-color-background-info: var(
--sema-color-background-info-weak
);
--comp-bannercallout-color-border-error: var(--sema-color-border-transparent);
--comp-toast-color-background-error: var(
--sema-color-background-error-default
);
--comp-toast-color-background-success: var(
--sema-color-background-neutral-default
);
--comp-button-color-pressed-background-tertiary-default: var(
--sema-color-pressed-background-default
);
--comp-button-color-hover-background-tertiary-default: var(
--sema-color-hover-background-default
);
--comp-button-color-text-secondary-disabled: var(--sema-color-text-disabled);
--comp-button-color-icon-secondary-disabled: var(--sema-color-icon-disabled);
--comp-buttontoggle-color-border-image-outer-disabled-subtle: var(
--sema-color-border-disabled
);
--comp-radiobutton-color-hover-background-dot-default: var(
--sema-color-background-default
);
--comp-button-color-background-dark-selected: var(
--sema-color-background-light
);
--comp-button-color-background-primary-disabled: var(
--sema-color-background-disabled
);
--comp-slider-color-pressed-border-handle: var(
--sema-color-pressed-border-inverse
);
--comp-radiobutton-color-pressed-background-container-default-selected: var(
--sema-color-pressed-background-checked
);
--comp-slider-color-hover-border-handle: var(
--sema-color-hover-border-inverse
);
--comp-radiobutton-color-hover-background-container-default-selected: var(
--sema-color-hover-background-checked
);
--comp-slider-color-border-handle: var(--sema-color-border-inverse);
--comp-slider-color-background-accessibility-indicator: var(
--sema-color-background-tertiary
);
--comp-slider-color-background-handle: var(--sema-color-background-checked);
--comp-slider-color-background-track: var(--sema-color-background-secondary);
--comp-slider-color-background-range: var(--sema-color-background-tertiary);
--comp-radiogroup-color-text-helper-text-error: var(--sema-color-text-subtle);
--comp-sheet-color-background-footer: var(--sema-color-background-elevation);
--comp-button-color-pressed-background-primary-selected: var(
--sema-color-pressed-background-selected
);
--comp-button-color-pressed-background-secondary-default: var(
--sema-color-pressed-background-secondary
);
--comp-button-color-hover-background-secondary-selected: var(
--sema-color-hover-background-selected
);
--comp-button-color-hover-background-secondary-default: var(
--sema-color-hover-background-secondary
);
--comp-badge-color-hover-icon-wash-light: var(--sema-color-icon-dark);
--comp-button-color-text-dark-selected: var(--sema-color-text-dark);
--comp-button-color-background-primary-selected: var(
--sema-color-background-selected
);
--comp-checkbox-color-text-error-text-disabled: var(
--sema-color-text-disabled
);
--comp-badge-color-text-error: var(--sema-color-text-error);
--comp-radiobutton-color-text-helper-text-default: var(
--sema-color-text-subtle
);
--comp-checkbox-color-icon-error-text-disabled: var(
--sema-color-icon-disabled
);
--comp-buttontoggle-color-hover-border-graphic-enabled-subtle: var(
--sema-color-hover-border-interactive
);
--comp-buttontoggle-color-border-graphic-enabled-subtle: var(
--sema-color-border-interactive
);
--comp-radiobutton-color-background-container-default-selected: var(
--sema-color-background-checked
);
--comp-progressbar-color-background-bar-unfilled: var(
--sema-color-background-subtle
);
--comp-buttontoggle-color-hover-text-graphic-enabled-strong: var(
--sema-color-text-inverse
);
--comp-popovermessage-color-background-education: var(
--sema-color-background-education
);
--comp-popover-color-background-container: var(
--sema-color-background-elevation
);
--comp-infobutton-color-pressed-icon-default: var(
--sema-color-pressed-icon-default
);
--comp-infobutton-color-hover-icon-default: var(
--sema-color-hover-icon-default
);
--comp-button-color-text-primary-default: var(--sema-color-text-light);
--comp-button-color-background-primary-default: var(
--sema-color-background-primary
);
--comp-iconbuttonsocial-color-pressed-border-container-reddit: var(
--sema-color-pressed-border-decorative
);
--comp-iconbuttonsocial-color-hover-border-container-reddit: var(
--sema-color-hover-border-decorative
);
--comp-iconbuttonsocial-color-border-container-reddit: var(
--sema-color-border-decorative
);
--comp-buttontoggle-color-hover-icon-save-enabled-deselected: var(
--sema-color-icon-light
);
--comp-badge-color-hover-icon-wash-dark: var(--sema-color-icon-light);
--comp-checkbox-color-pressed-border-container-error-unchecked: var(
--sema-color-pressed-border-error
);
--comp-buttontoggle-color-pressed-border-graphic-enabled-subtle: var(
--sema-color-pressed-border-interactive
);
--comp-checkbox-color-pressed-background-container-error-checked: var(
--sema-color-pressed-background-error-default
);
--comp-checkbox-color-hover-border-container-error-unchecked: var(
--sema-color-hover-border-error
);
--comp-checkbox-color-hover-background-container-error-checked: var(
--sema-color-hover-background-error-default
);
--comp-checkbox-color-border-container-error-unchecked: var(
--sema-color-border-error
);
--comp-buttontoggle-color-hover-icon-graphic-enabled-subtle: var(
--sema-color-icon-default
);
--comp-buttontoggle-color-hover-icon-graphic-enabled-strong: var(
--sema-color-icon-inverse
);
--comp-buttontoggle-color-hover-text-save-enabled-deselected: var(
--sema-color-text-light
);
--comp-buttontoggle-color-pressed-border-image-outer-enabled-subtle: var(
--sema-color-pressed-border-selected
);
--comp-buttontoggle-color-border-image-inner-disabled-subtle: var(
--sema-color-border-inverse
);
--comp-button-color-pressed-background-primary-default: var(
--sema-color-pressed-background-primary
);
--comp-buttontoggle-color-hover-border-image-outer-enabled-subtle: var(
--sema-color-hover-border-selected
);
--comp-button-color-hover-background-primary-default: var(
--sema-color-hover-background-primary
);
--comp-buttontoggle-color-border-image-outer-enabled-subtle: var(
--sema-color-border-selected
);
--comp-button-color-border-focus-outer-dark: var(
--sema-color-border-focus-outer-light
);
--comp-button-color-border-focus-outer-transparent-inverse: var(
--sema-color-border-focus-outer-inverse
);
--comp-button-color-border-focus-inner-dark: var(
--sema-color-border-focus-inner-dark
);
--comp-button-color-border-focus-inner-transparent-inverse: var(
--sema-color-border-focus-inner-inverse
);
--comp-button-color-pressed-background-dark-selected: var(
--sema-color-pressed-background-light
);
--comp-button-color-pressed-background-dark-default: var(
--sema-color-pressed-background-dark
);
--comp-button-color-hover-background-dark-selected: var(
--sema-color-hover-background-light
);
--comp-button-color-hover-background-dark-default: var(
--sema-color-hover-background-dark
);
--comp-button-color-background-dark-default: var(
--sema-color-background-dark
);
--comp-badge-color-hover-text-recommendation: var(
--sema-color-hover-text-recommendation
);
--comp-badge-color-hover-text-success: var(--sema-color-hover-text-success);
--comp-badge-color-hover-text-warning: var(--sema-color-hover-text-warning);
--comp-badge-color-hover-text-error: var(--sema-color-hover-text-error);
--comp-badge-color-hover-text-info: var(--sema-color-hover-text-info);
--comp-badge-color-hover-icon-recommendation: var(
--sema-color-hover-icon-recommendation
);
--comp-badge-color-hover-icon-success: var(--sema-color-hover-icon-success);
--comp-badge-color-hover-icon-warning: var(--sema-color-hover-icon-warning);
--comp-badge-color-hover-icon-error: var(--sema-color-hover-icon-error);
--comp-badge-color-hover-icon-info: var(--sema-color-hover-icon-info);
--comp-badge-color-hover-background-neutral: var(
--sema-color-hover-background-neutral-weak
);
--comp-badge-color-hover-background-recommendation: var(
--sema-color-hover-background-recommendation-weak
);
--comp-badge-color-hover-background-success: var(
--sema-color-hover-background-success-weak
);
--comp-badge-color-hover-background-warning: var(
--sema-color-hover-background-warning-weak
);
--comp-badge-color-hover-background-error: var(
--sema-color-hover-background-error-weak
);
--comp-badge-color-hover-background-info: var(
--sema-color-hover-background-info-weak
);
--comp-badge-color-text-recommendation: var(--sema-color-text-recommendation);
--comp-badge-color-text-success: var(--sema-color-text-success);
--comp-badge-color-text-warning: var(--sema-color-text-warning);
--comp-badge-color-text-info: var(--sema-color-text-info);
--comp-badge-color-icon-recommendation: var(--sema-color-icon-recommendation);
--comp-badge-color-background-error: var(--sema-color-background-error-weak);
--comp-badge-color-background-info: var(--sema-color-background-info-weak);
--comp-attribution-color-pressed-icon-sponsored-label: var(
--sema-color-pressed-icon-subtle
);
--comp-attribution-color-pressed-icon-verified-badge-merchant: var(
--sema-color-pressed-icon-verified-merchant
);
--comp-attribution-color-pressed-icon-verified-badge-pinner: var(
--sema-color-pressed-icon-verified-pinner
);
--comp-attribution-color-pressed-text-sponsored-label: var(
--sema-color-pressed-text-subtle
);
--comp-attribution-color-pressed-text-name-sponsored: var(
--sema-color-pressed-text-default
);
--comp-attribution-color-hover-icon-sponsored-label: var(
--sema-color-hover-icon-subtle
);
--comp-attribution-color-hover-icon-verified-badge-merchant: var(
--sema-color-hover-icon-verified-merchant
);
--comp-attribution-color-hover-icon-verified-badge-pinner: var(
--sema-color-hover-icon-verified-pinner
);
--comp-attribution-color-hover-text-sponsored-label: var(
--sema-color-hover-text-subtle
);
--comp-attribution-color-hover-text-name-sponsored: var(
--sema-color-hover-text-default
);
--comp-attribution-color-icon-sponsored-label: var(--sema-color-icon-subtle);
--comp-attribution-color-icon-verified-badge-merchant: var(
--sema-color-icon-verified-merchant
);
--comp-attribution-color-icon-verified-badge-pinner: var(
--sema-color-icon-verified-pinner
);
--imessage-background-color: linear-gradient(180deg,#5bf675,#0cbe2a);
--instagram-background-url: url(https://i.pinimg.com/originals/d5/3b/01/d53b014d86a6b6761bf649a0ed813c2b.png);
--gestalt-color-scheme: lightMode;
--brand-primary-cta: rgb(230, 0, 35); /* Primary CTA background, dominant on 3 buttons — e.g. "Log in" /* mined from computed styles */ */
--base-color-grayscale-0: #fff;
--base-color-grayscale-50: #f6f6f3;
--base-color-grayscale-500: #000;
--base-color-transparent: hsla(0,0%,100%,0);
--sema-color-background-performance-plus-default: #774fc4;
--sema-color-hover-background-performance-plus-default: #6845ab;
--sema-color-pressed-background-performance-plus-default: #583b91;
--sema-color-text-performance-plus: #774fc4;
--sema-color-hover-text-performance-plus: #6845ab;
--sema-color-pressed-text-performance-plus: #583b91;
--comp-iconbuttonsocial-color-background-container-facebook: #0866ff;
--comp-iconbuttonsocial-color-background-container-whatsapp: #25d366;
--comp-iconbuttonsocial-color-background-container-x-social: #000;
--comp-iconbuttonsocial-color-background-container-threads: #000;
--comp-iconbuttonsocial-color-background-container-snap: #fffc00;
--comp-iconbuttonsocial-color-background-container-telegram: linear-gradient(180deg,#2aabee,#229ed9);
--comp-iconbuttonsocial-color-background-container-kakao-talk: #ffeb3b;
--comp-iconbuttonsocial-color-background-container-line: #06c755;
--comp-checkbox-border-width-container-default-unchecked: 1px;
--comp-radiobutton-border-width-container-default-deselected: 1px;
--comp-avatar-border-width-container: 1px;
--comp-avatargroup-border-width-container: 1px;
--comp-slider-border-width-handle: 2px;
--comp-checkbox-border-width-focus-outer: 2px;
--comp-checkbox-border-width-focus-inner: 2px;
--comp-buttontoggle-border-width-focus-outer: 2px;
--comp-buttontoggle-border-width-focus-inner: 2px;
/* Typography (77) */
--sema-motion-spring-spatial-fast: linear(0 0%,1.171 2%,1.775 4%,0.592 6%,0.493 8%,1.513 10%,1.247 12%,0.488 14%,0.… <0.5KB elided>;
--sema-motion-spring-spatial-medium: linear(0 0%,0.333 2%,0.947 4%,1.488 6%,1.695 8%,1.518 10%,1.11 12%,0.713 14%,0.5… <0.5KB elided>;
--sema-motion-spring-spatial-slow: linear(0 0%,0.18 2%,0.487 4%,0.84 6%,1.163 8%,1.4 10%,1.521 12%,1.521 14%,1.422… <0.5KB elided>;
--sema-motion-bezier-easing-ease-in-out: cubic-bezier(0.8,0,0.2,1);
--sema-motion-bezier-easing-ease-out: cubic-bezier(0.05,0.7,0.1,1);
--sema-motion-bezier-easing-ease-in: cubic-bezier(0.3,0,0.8,0.15);
--sema-motion-bezier-easing-linear: cubic-bezier(0,0,1,1);
--sema-elevation-shadow-floating: 0px 3px 12px 0px rgba(0,0,0,.2);
--sema-elevation-shadow-raised: 0px 1.5px 6px 0px rgba(0,0,0,.2);
--sema-elevation-shadow-surface: 0px 0.5px 3px 0px rgba(0,0,0,.2);
--comp-switch-size-width-handle-disabled-on: 20px;
--comp-switch-size-width-handle-disabled-off: 22px;
--comp-icon-size-compact-16: 16px;
--comp-icon-size-compact-14: 14px;
--comp-icon-size-compact-12: 12px;
--comp-icon-size-compact-10: 10px;
--comp-icon-size-default-32: 32px;
--comp-icon-size-default-24: 24px;
--base-font-textdecoration-underline: underline;
--base-font-textdecoration-default: none;
--base-font-letterspacing-negative-05: -0.5px;
--base-font-letterspacing-negative-1: -1px;
--base-font-letterspacing-05: 0.5px;
--base-font-letterspacing-1: 1px;
--base-font-letterspacing-0: 0;
--base-font-family-code: "SF Mono", "Segoe UI Mono", ...;
--base-font-family-default-japanese: "SF Pro JP", ...;
--base-font-family-default-latin: "Pin Sans", -apple-system, ...;
--base-font-size-72: 72px;
--base-font-size-60: 60px;
--base-font-size-48: 48px;
--base-font-size-36: 36px;
--base-font-size-28: 28px;
--base-font-weight-900: 900;
--base-font-weight-700: 700;
--base-font-weight-500: 500;
--base-font-weight-400: 400;
--base-font-lineheight-180: 1.8;
--base-font-lineheight-170: 1.7;
--base-font-lineheight-160: 1.6;
--base-font-lineheight-150: 1.5;
--base-font-lineheight-140: 1.4;
--base-font-lineheight-130: 1.3;
--base-font-lineheight-120: 1.2;
--base-font-lineheight-110: 1.1;
--sema-font-textdecoration-compact-100-emphasis: var(--base-font-textdecoration-default);
--sema-font-textdecoration-compact-100-link: var(--base-font-textdecoration-underline);
--sema-font-textdecoration-ui-400: var(--base-font-textdecoration-default);
--sema-font-letterspacing-compact-100: var(--base-font-letterspacing-0);
--sema-font-letterspacing-heading-700: var(
--base-font-letterspacing-negative-05
);
--sema-font-letterspacing-display-1000: var(
--base-font-letterspacing-negative-1
);
--font-family-default-latin: var(--base-font-family-default-latin);
--sema-font-size-ui-100: var(--base-font-size-12);
--sema-font-size-ui-400: var(--base-font-size-20);
--sema-font-size-ui-300: var(--base-font-size-16);
--sema-font-size-ui-200: var(--base-font-size-14);
--sema-font-size-heading-700: var(--base-font-size-36);
--sema-font-size-heading-600: var(--base-font-size-28);
--sema-font-size-heading-500: var(--base-font-size-24);
--sema-font-size-display-1000: var(--base-font-size-72);
--sema-font-size-display-900: var(--base-font-size-60);
--sema-font-size-display-800: var(--base-font-size-48);
--sema-font-weight-compact-100-emphasis: var(--base-font-weight-700);
--sema-font-weight-compact-100-default: var(--base-font-weight-400);
--sema-font-weight-ui-400: var(--base-font-weight-500);
--sema-font-weight-display-1000: var(--base-font-weight-900);
--gestalt-line-height: defaultMode;
--font-size-xl: 70px; /* 1 element — e.g. h2 "Sign up to get your " /* mined from computed styles */ */
--font-weight-medium: 600; /* 1 element — e.g. h2 "Sign up to get your " /* mined from computed styles */ */
--line-height-tight: 18px; /* 4 elements — e.g. span "By continuing, you a", a "Terms of Service", a "Privacy Policy" /* mined from computed styles */ */
--line-height-normal: 22.4px; /* 11 elements — e.g. a "iOS", a "Android", a "Explore" /* mined from computed styles */ */
--sema-font-textdecoration-compact-100-default: var(--base-font-textdecoration-default);
--sema-font-textdecoration-body-100-default: var(--base-font-textdecoration-default);
--sema-font-textdecoration-body-100-link: var(--base-font-textdecoration-underline);
--sema-font-textdecoration-body-100-emphasis: var(--base-font-textdecoration-default);
--sema-font-textdecoration-ui-300: var(--base-font-textdecoration-default);
--sema-font-textdecoration-ui-200: var(--base-font-textdecoration-default);
/* Spacing (60) */
--sema-space-negative-1600: -64px;
--sema-space-negative-1500: -60px;
--sema-space-negative-1400: -56px;
--sema-space-negative-1300: -52px;
--sema-space-negative-1200: -48px;
--sema-space-negative-1100: -44px;
--sema-space-negative-1000: -40px;
--sema-space-negative-900: -36px;
--sema-space-negative-800: -32px;
--sema-space-negative-700: -28px;
--sema-space-negative-600: -24px;
--sema-space-negative-500: -20px;
--sema-space-negative-400: -16px;
--sema-space-negative-350: -14px;
--sema-space-negative-300: -12px;
--sema-space-negative-250: -10px;
--sema-space-negative-200: -8px;
--sema-space-negative-150: -6px;
--sema-space-negative-100: -4px;
--sema-space-negative-50: -2px;
--sema-space-negative-25: -1px;
--sema-space-1600: 64px;
--sema-space-1500: 60px;
--sema-space-1400: 56px;
--sema-space-1300: 52px;
--sema-space-1200: 48px;
--sema-space-1100: 44px;
--sema-space-1000: 40px;
--sema-space-900: 36px;
--sema-space-800: 32px;
--sema-space-700: 28px;
--sema-space-600: 24px;
--sema-space-500: 20px;
--sema-space-400: 16px;
--sema-space-350: 14px;
--sema-space-300: 12px;
--sema-space-250: 10px;
--sema-space-200: 8px;
--sema-space-150: 6px;
--base-space-unit: 4px;
--comp-radiobutton-border-width-focus-outer: 2px;
--comp-buttontoggle-border-width-hover-graphic-enabled-subtle: 1px;
--comp-radiobutton-border-width-hover-container-disabled-selected: 0px;
--sema-rounding-circle: 50%;
--sema-rounding-pill: 999px;
--comp-searchguide-border-width-focus-outer: 2;
--comp-bannerslim-border-width-container-error-compact: var(--sema-space-0);
--comp-bannerslim-border-width-container-recommendation-compact: var(
--sema-space-0
);
--comp-radiogroupbutton-motion-border-fade-duration: var(
--sema-motion-bezier-duration-150
);
--comp-radiogroupbutton-motion-border-fade-easing: var(
--sema-motion-bezier-easing-ease-in
);
--comp-radiogroupbutton-motion-border-scale-easing: var(
--sema-motion-bezier-easing-ease-out
);
--pintrest-space-sm: 10px;
--pintrest-space-md: 14px;
--pintrest-space-lg: 16px;
--pintrest-space-xl: 24px;
--pintrest-space-2xl: 32px;
--pintrest-space-3xl: 48px;
--sema-space-0: 0px;
--sema-space-50: 2px;
--sema-space-100: 4px;
/* Radius (8) */
--radius-sm: 2px; /* 1 element — e.g. div .grecaptcha-badge /* mined from computed styles */ */
--radius-md: 12px; /* 2 elements — e.g. button .G0yGFD "Continue", a .etmDmh "Password tips" /* mined from computed styles */ */
--radius-lg: 16px; /* 18 elements — e.g. button .G0yGFD "Log in", button .G0yGFD "Sign up", button .G0yGFD "Join Pinterest for f" /* mined from computed styles */ */
--radius-full: 999px; /* 1 element — e.g. a .etmDmh /* mined from computed styles */ */
--pintrest-radius-sm: 2px;
--pintrest-radius-md: 12px;
--pintrest-radius-lg: 16px;
--pintrest-radius-full: 999px;
/* Effects (37) */
--sema-motion-bezier-duration-1000: 1000ms;
--sema-motion-bezier-duration-900: 900ms;
--sema-motion-bezier-duration-800: 800ms;
--sema-motion-bezier-duration-700: 700ms;
--sema-motion-bezier-duration-600: 600ms;
--sema-motion-bezier-duration-500: 500ms;
--sema-motion-bezier-duration-400: 400ms;
--sema-motion-bezier-duration-300: 300ms;
--sema-motion-bezier-duration-200: 200ms;
--sema-motion-bezier-duration-150: 150ms;
--sema-motion-bezier-duration-100: 100ms;
--sema-motion-bezier-duration-50: 50ms;
--sema-motion-bezier-duration-0: 0ms;
--sema-opacity-100: 1;
--sema-opacity-90: 0.9;
--sema-opacity-80: 0.8;
--sema-opacity-60: 0.6;
--sema-opacity-40: 0.4;
--sema-opacity-20: 0.2;
--sema-opacity-4: 0.04;
--sema-opacity-0: 0;
--comp-spinner-motion-exit-easing: var(--sema-motion-bezier-easing-ease-out);
--comp-spinner-motion-exit-duration: var(--sema-motion-bezier-duration-150);
--comp-spinner-motion-enter-duration: var(--sema-motion-bezier-duration-300);
--comp-checkbox-icon-motion-collapse-out-easing: var(
--sema-motion-bezier-easing-ease-in
);
--comp-checkbox-icon-motion-collapse-in-easing: var(
--sema-motion-bezier-easing-ease-in-out
);
--comp-checkbox-motion-icon-collapse-out-duration: var(
--sema-motion-bezier-duration-150
);
--comp-checkbox-motion-icon-collapse-in-duration: var(
--sema-motion-bezier-duration-200
);
--comp-checkbox-icon-motion-collapse-out-duration: var(
--comp-checkbox-motion-icon-collapse-out-duration
);
--comp-checkbox-icon-motion-collapse-in-duration: var(
--comp-checkbox-motion-icon-collapse-in-duration
);
--gestalt-theme: calico;
--sema-elevation-shadow-surface: 0px 0.5px 3px 0px rgba(0,0,0,.2);
--sema-elevation-shadow-raised: 0px 1.5px 6px 0px rgba(0,0,0,.2);
--sema-elevation-shadow-floating: 0px 3px 12px 0px rgba(0,0,0,.2);
--sema-elevation-background-blur-weak: 8px;
--sema-elevation-background-blur-default: 24px;
--sema-elevation-background-blur-strong: 64px;
/* Motion (26) */
----motion-T4amGY: @keyframes T4amGY {
0% { transform: translate(var(--g-start-x),var(--g-start-y)) scale(0); }
100% { transform: translate(0px) scale(1); }
}; /* @keyframes T4amGY */
----motion-HCzQKi: @keyframes HCzQKi {
100% { transform: scale(0); }
}; /* @keyframes HCzQKi */
----motion-sJ7f1O: @keyframes sJ7f1O {
100% { transform: rotate(1turn); }
}; /* @keyframes sJ7f1O */
----motion-rJbwXM: @keyframes rJbwXM {
50% { transform: scale(0.666); }
100% { transform: scale(1); }
}; /* @keyframes rJbwXM */
----motion-DCHi_A: @keyframes DCHi_A {
0% { fill: var(--comp-spinner-color-background-1); }
33… <0.2KB elided>; /* @keyframes DCHi_A */
----motion-asdu8F: @keyframes asdu8F {
0% { transform: scale(1); }
100% { transform: scale(0.95); }
}; /* @keyframes asdu8F */
----motion-umZQnX: @keyframes umZQnX {
0% { transform: scale(0.95); }
100% { transform: scale(1); }
}; /* @keyframes umZQnX */
----motion-zNpIyo: @keyframes zNpIyo {
0% { transform: translateX(100%); }
100% { transform: translateX(0px); }
}; /* @keyframes zNpIyo */
----motion-qFRhHc: @keyframes qFRhHc {
0% { transform: translateX(-100%); }
100% { transform: translateX(0px); }
}; /* @keyframes qFRhHc */
----motion-JuxfVf: @keyframes JuxfVf {
0% { transform: translateX(0px); }
100% { transform: translateX(100%); }
}; /* @keyframes JuxfVf */
----motion-oHhWtg: @keyframes oHhWtg {
0% { transform: translateX(0px); }
100% { transform: translateX(-100%); }
}; /* @keyframes oHhWtg */
----motion-J7O_A1: @keyframes J7O_A1 {
0% { transform: translateY(100%); }
100% { transform: translateY(0px); }
}; /* @keyframes J7O_A1 */
----motion-cRyT1Y: @keyframes cRyT1Y {
0% { transform: translateY(0px); }
100% { transform: translateY(100%); }
}; /* @keyframes cRyT1Y */
----motion-tgyUpz: @keyframes tgyUpz {
0% { opacity: var(--sema-opacity-0); }
100% { opacity: var(--sema-opacity-90); }
}; /* @keyframes tgyUpz */
----motion-_wm52s: @keyframes _wm52s {
0% { opacity: var(--sema-opacity-90); }
100% { opacity: var(--sema-opacity-0); }
}; /* @keyframes _wm52s */
----motion-BjOJeB: @keyframes BjOJeB {
0% { opacity: var(--sema-opacity-0); }
100% { opacity: var(--sema-opacity-100); }
}; /* @keyframes BjOJeB */
----motion-i6Yx4F: @keyframes i6Yx4F {
0% { opacity: var(--sema-opacity-0); transform: scale(0.8… <0.4KB elided>; /* @keyframes i6Yx4F */
----motion-M_GEGK: @keyframes M_GEGK {
0% { background-color: var(--comp-skeleton-color-backgrou… <0.3KB elided>; /* @keyframes M_GEGK */
----motion-hLjhEE: @keyframes hLjhEE {
100% { opacity: var(--sema-opacity-100); padding: var(--sema-space-200); transform: translateY(-8px) translateX(-8px); }
}; /* @keyframes hLjhEE */
----motion-KGoiZm: @keyframes KGoiZm {
100% { opacity: var(--sema-opacity-100); padding: var(--sema-space-200); transform: translateY(-8px) translateX(8px); }
}; /* @keyframes KGoiZm */
----motion-rotater: @keyframes rotater {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(1turn) scale(2); }
100% { transform: rotate(2turn) scale(1); }
}; /* @keyframes rotater */
----motion-spin: @keyframes spin {
100% { transform: rotate(1turn); }
}; /* @keyframes spin */
----motion-fb_transform: @keyframes fb_transform {
0% { opacity: 0; transform: scale(0.95); }
100% { opacity: 1; transform: scale(1); }
}; /* @keyframes fb_transform */
----motion-rotateSpinner: @keyframes rotateSpinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}; /* @keyframes rotateSpinner */
--duration-fast: 0.085s; /* 34 elements — e.g. button, button, button /* mined from computed styles */ */
--ease-default: ease; /* 58 elements — e.g. button, button, button /* mined from computed styles */ */
```
## Appendix B: Token Source Metadata
```
tokenSource: extracted-css-vars
sourceURL: pinterest.com (pinterest.com — Note: "pintrest" is a typo in the kit prefix)
totalExtracted: 1865 CSS custom properties
curatedCount: 38 tokens mapped to standard roles
confidenceLevel: high
extractionDate: [TBD - confirm extraction date]
curatedTokenPrefix: --pintrest-* (synthetic aliases for curated set)
originalNamesPreserved: YES — all --base-*, --sema-*, --comp-* names used verbatim
noteOnOffGridSpacing:
Pinterest's spacing system includes intentional off-grid values:
10px (--sema-space-250) and 14px (--sema-space-350) appear in button padding
and component contexts. These are NOT errors — they are deliberate brand values.
The auto-detected anti-pattern warning about off-grid spacing should be interpreted
as a caution against ADDING new off-grid values, not removing existing ones.
noteOnColourBloat:
857 near-duplicate colour pairs exist in the full token set. The curated
17-token colour set is the canonical working set. The full primitive scales
(base-color-*-50 through -700 for each hue) exist for state derivation in
component tokens, not for direct use in new components.
noteOnFontWeightMapping:
--pintrest-font-weight-medium maps to 600 in the curated set, but
--base-font-weight-500 (500) is the system's true "medium" weight.
The 600 value was extracted from the h2 computed style (font-weight: 600)
which is a display-specific weight, not the semantic medium weight.
USE --base-font-weight-500 (500) for UI medium; use 600 only for display headings.
noteOnSpaceXs:
--pintrest-space-xs is incorrectly mapped to 64px (--sema-space-1600) in the
curated token set. 64px is a backdrop-filter blur value, not a spacing value.
DO NOT USE --pintrest-space-xs for layout spacing. Use --pintrest-space-lg (16px)
as the minimum meaningful layout spacing token.
brandTypefaceHosting:
"Pin Sans" is served from https://s.pinimg.com/webapp/Pin-Sans-MacOS-*.woff2
Weights available: 400 (Regular), 500 (Medium), 700 (Bold), 800 (Heavy)
display: auto — browser decides swap strategy
This font is NOT available on Google Fonts or system. Must be loaded from
Pinterest CDN or a locally hosted copy for any production implementation.
```More from the gallery
Browse all kits →You may also like
Contra
MITPlayful yet professional design system with teal and purple accents, bold typography, and vibrant accent surfaces—built for modern SaaS platforms and landing pages
Layout03
lightboldsaaslanding-page
DoorDash
MITClean, accessible food-delivery system with DoorDash's signature red accent, light neutral palette, and system-font typography—built for rapid product development
Layout03
lightecommsaasmobile
Wise
MITClean, accessible financial design system with lime-green accents and Swiss typography, built for fintech products that prioritise clarity and trust
Layout05
lightfintechminimalsaas