# Shapeshyft — Design Language

## 1. Visual Theme & Atmosphere
Shapeshyft is a UK creative agency whose site blends editorial warmth with bold graphic confidence. The paired typefaces — Inter for utility and Instrument Serif for editorial personality — create a classic dual-register hierarchy. The palette is primarily white and near-black with two vivid signal colours: a traffic-light red and a golden yellow that appear as dot indicators — a macOS window metaphor. Generous border-radius variety (from 6px to 10000px) signals a flexible, playful design system. Tight negative letter-spacing on headings creates premium compression.

## 2. Color Palette & Roles
- **Background** — `rgb(255, 255, 255)` (white): primary canvas
- **Primary text** — `rgb(0, 0, 0)` (black): headings and primary content
- **Secondary text** — `rgb(51, 51, 51)` (dark grey): body copy
- **Medium grey** — `rgb(88, 88, 88)`: link borders, tertiary elements
- **Signal red** — `rgb(240, 29, 29)`: dot indicator — decorative, window-metaphor detail
- **Signal yellow** — `rgb(255, 198, 26)`: dot indicator — paired with red for the visual motif
- **Button surface** — transparent with white text on dark backgrounds

## 3. Typography Rules
- **Instrument Serif** (weight 300–400): display headings and editorial voice
- **Inter** (weight 300–400): body and UI — lightweight, airy
- Display range: 28–34px — editorial scale, emphasis through spacing not scale
- Extreme negative letter-spacing: `−2px` on hero, `−1.4px` on sub-display — very tight headlines
- Fine positive tracking (`0.1px`) on body text for openness
- Weight 300 is unusually light — the design trusts whitespace and letterform over mass

## 4. Component Stylings
- Rich radius vocabulary: 6px, 8px, 10px, 12px, 16px, 20px, 10000px (full pill)
- Inner shadow: `rgba(0,0,0,0.2) 0px 6px 9px -1px, rgb(59,59,59) 0px 3px 3px 0px inset` — dramatic card lift with inner edge
- Decorative colour dots (red + yellow) as graphic accent elements
- Buttons: transparent on dark, standard weight

## 5. Layout Principles
- Section gap at 8px — tight component grouping within sections
- Likely a full-bleed hero with dramatic headline compression
- Content sections alternate between light and dark backgrounds
- Standard grid blocks with customised visual personality

## 6. Depth & Elevation
- One distinctive shadow: outer soft combined with inner edge — creates a card that feels physically printed
- The inset shadow component gives cards a premium "label" quality
- Dot decorations provide graphic depth without dimensional shadow

## 7. Do's and Don'ts
**Do:** Use tight negative letter-spacing (`−1.4px` to `−2px`) on all display headings.
**Do:** Pair Instrument Serif (300 weight) with Inter 300 — the lightness is the design.
**Do:** Use the inner+outer combined shadow for any featured card component.
**Don't:** Use the signal red or yellow for functional affordances — they're decorative only.
**Don't:** Mix radius values beyond the defined 6/8/10/12/16/20px/pill scale.
**Don't:** Increase font weights above 400 — the design is intentionally featherweight.

## 8. Responsive Behavior
- 28–34px display text reduces to ~22–26px on mobile
- Section gap of 8px maintained
- Radius system maintained across viewports
- Decorative dot motif may be simplified or hidden on small screens

## 9. Agent Prompt Guide
> Design like Shapeshyft: white background, Instrument Serif 300 for display headings with extreme negative letter-spacing (-1.4px to -2px), Inter 300 for body. Black/near-black text. Signal red and yellow dots as graphic decoration only. Rich radius scale (6–20px + pill). Combined inner+outer card shadow. Light, editorial, design-forward agency aesthetic.

*Generated by Sparkbites — extracted from live CSS analysis*