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