--- version: alpha name: "how.studio" description: "Design system extracted from https://how.studio/ on 2026-10-28" colors: background: "#f9f8f2" surface: "#edebe2" foreground: "#333333" muted-foreground: "#666666" typography: headline-display: fontFamily: "Azeret Mono" fontSize: "12px" fontWeight: 360 lineHeight: "13.8px" headline-lg: fontFamily: "wagram" fontSize: "60px" fontWeight: 300 lineHeight: "51px" letterSpacing: "-3px" headline-md: fontFamily: "wagram" fontSize: "24px" fontWeight: 400 lineHeight: "1.4" body-md: fontFamily: "wagram" fontSize: "16px" fontWeight: 400 lineHeight: "24px" label-md: fontFamily: "Azeret Mono" fontSize: "12px" fontWeight: 360 lineHeight: "1.15" button: fontFamily: "Azeret Mono" fontSize: "12px" fontWeight: 360 lineHeight: "13.8px" rounded: none: "0px" md: "6px" sm: "4px" full: "9999px" spacing: unit: "4px" 1: "4px" 2: "8px" 3: "12px" 4: "16px" 5: "24px" 6: "32px" 7: "48px" 8: "80px" components: button-ghost: backgroundColor: "#e0ddd280" textColor: "#333333" typography: "{typography.button}" rounded: "6px" height: "40px" padding: "0px 16px" button-secondary: backgroundColor: "#ecffb4" textColor: "#333333" typography: "{typography.button}" rounded: "6px" height: "40px" padding: "13px 16px" --- # how.studio ## Overview Branding & Digital Agency in London & Los Angeles | HOW+HOW: HOW+HOW is a London and LA branding agency. We find the truth only your brand can own, then turn it up across strategy, verbal and visual identity and web. Gently rounded controls, flat surfaces separated by hairlines, restrained display type at 12px / 360, a monochrome palette. The site ships in light mode by default. Measured from 825 rendered elements at 1440px wide on 2026-10-28. Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot: - `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold - `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page - `screenshots/brand-logo.png`: primary logo lockup - `screenshots/brand-icon-1.png`: representative interface icon - `screenshots/brand-icon-2.png`: representative interface icon - `screenshots/brand-icon-3.png`: representative interface icon - `screenshots/brand-icon-4.png`: representative interface icon - `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture - `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/region-r1-context.jpg`: r1 context: page context - `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail - `screenshots/region-r2-context.jpg`: r2 context: page context - `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail - `screenshots/region-r3-context.jpg`: r3 context: page context - `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail - `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold - `screenshots/tablet-768-fold.png`: Tablet 768, above the fold - `screenshots/phone-390-fold.png`: Phone 390, above the fold - `screenshots/phone-390-full.jpg`: Phone 390, full page - `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png - `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp - `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp - `screenshots/c-button-1--rest.png`: Button 1 ("Explore"), rest - `screenshots/c-button-1--focus.png`: Button 1 ("Explore"), focus - `screenshots/c-button-1--disabled.png`: Button 1 ("Explore"), disabled - `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest - `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus - `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled - `screenshots/c-combobox-1--rest.png`: Combobox / custom select 1 ("All Projects"), rest - `screenshots/c-combobox-1--focus.png`: Combobox / custom select 1 ("All Projects"), focus - `screenshots/c-overlay-dropdown-menu-1--open.png`: Dropdown menu 1 opened by combobox "All Projects" - `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Work"), rest - `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Work"), focus - `screenshots/c-badge-1--rest.png`: Badge / pill / tag 1 ("Pet Care"), rest - `screenshots/c-button-2--rest.png`: Button 2 ("Awards03.11.25Most Admir"), rest - `screenshots/c-button-2--focus.png`: Button 2 ("Awards03.11.25Most Admir"), focus - `screenshots/c-image-2--rest.png`: Image / figure 2, rest - `screenshots/c-button-3--rest.png`: Button 3 ("Send us your brief"), rest - `screenshots/c-button-3--hover.png`: Button 3 ("Send us your brief"), hover - `screenshots/c-button-3--focus.png`: Button 3 ("Send us your brief"), focus - `screenshots/c-image-3--rest.png`: Image / figure 3, rest - `screenshots/c-button-4--rest.png`: Button 4 ("Services"), rest - `screenshots/c-button-4--hover.png`: Button 4 ("Services"), hover - `screenshots/c-button-4--focus.png`: Button 4 ("Services"), focus - `screenshots/c-button-4--disabled.png`: Button 4 ("Services"), disabled - `screenshots/c-button-5--rest.png`: Button 5 ("Start a project"), rest ## Logo and icon references Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional. ## Colors | Token | Value | Use | | --- | --- | --- | | background | `#f9f8f2` | Page background | | surface | `#edebe2` | Cards, panels, raised or recessed surfaces | | foreground | `#333333` | Primary text | | muted-foreground | `#666666` | Secondary text, captions | Full painted palette by area (largest first): `#f9f8f2`, `#edebe2`, `#ecffb4`. ## Typography - **Azeret Mono** for h1, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. - **wagram** for h2, body: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias. | Role | Family | Size | Weight | Line height | Tracking | | --- | --- | --- | --- | --- | --- | | headline-display | Azeret Mono | 12px | 360 | 13.8px | normal | | headline-lg | wagram | 60px | 300 | 51px | -3px | | headline-md | wagram | 24px | 400 | 1.4 | normal | | body-md | wagram | 16px | 400 | 24px | normal | | label-md | Azeret Mono | 12px | 360 | 1.15 | normal | | button | Azeret Mono | 12px | 360 | 13.8px | normal | - headline-md: fallback (source h3); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. Type scale in use: 10px, 12px, 16px, 32px, 40px, 60px, 72px. Base body size 16px. The hero heading (h1) renders at 12px / 360, start aligned, up to 389px wide. Sample: "A branding agency in London & Los Angeles". See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages. ## Layout - Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 24, 32, 48, 80 (px). - Flex and grid gaps: 4, 8, 12, 16 px. - Content max width: 1171px, centred. - Breakpoints: 400px, 768px, 1024px, 1152px, 1536px. - Header: 48px tall, static, backdrop blur, background `rgba(224, 221, 210, 0.5)`; 3 nav links at 12px / 360 (Work · Careers · Start a project). ## Elevation & Depth No box shadows in use; depth comes from hairline borders and surface tints (flat design). ## Shapes - Buttons: 6px - Inputs: 0px - Cards and panels: 0px - Images and media: 8px - Radius scale: none 0px, md 6px, sm 4px, full 9999px ## Components ### Button, ghost Background transparent (it sits on `#e0ddd280`, so place it on that colour), text `#333333`, border none, radius 6px, height 40px, padding 0px 16px, 12px / 360. Sample label: "Services". ### Button, secondary Background `#ecffb4`, text `#333333`, border none, radius 6px, height 40px, padding 13px 16px, 12px / 360. Sample label: "Start a project". ### Link Colour `#333333`, no underline at rest, weight 360. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (12 of 87 in the checklist, 21 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 13 state changes, 1 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary: | Component | Variants | States measured | Sample | | --- | --- | --- | --- | | Button | ghost-icon-right sm, secondary-with-icon lg, success-icon-right sm, ghost-icon-right sm, success sm, secondary-with-icon, secondary lg, secondary lg | focus, disabled, hover | "Explore" | | Icon button | ghost | focus, disabled | | | Text link | plain | rest only | "PetsFlexing the UK’s biggest p" | | Text input | outlined-icon-right | rest only | | | Combobox / custom select | outlined lg | focus, open | "All Projects" | | Navigation link | plain | focus | "Work" | | Footer | default | rest only | "The truth is in thereLet’s rev" | | Badge / pill / tag | subtle-square | rest only | "Pet Care" | | Image / figure | aspect-1.78-rounded, aspect-1-rounded, aspect-1.78-rounded | rest only | | Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Search field, Textarea, Select (native), Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Header / navbar, Menu / dropdown trigger, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Footer link, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Card, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, Styled list, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Video / media embed, Carousel / slider, Logo strip, Icon, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Hero, Content container, Sticky bar. ## Dark Mode No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute. ## Responsive Behavior | Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | desktop 1440px | 1408px | 16px | 16px | 12px, 1 line, start | 48px, 3 links, 1 CTA | media behind/overlapping text | 2→2 col; 2→1 col; 6→2 col | content-width | | laptop 1024px | 992px | 16px | 16px | 12px, 1 line, start | 48px, 3 links, 1 CTA | media behind/overlapping text | 2→2 col; 2→1 col; 6→2 col | content-width | | tablet 768px | 736px | 16px | 16px | 12px, 1 line, start | 46px, hamburger (icon), 1 CTA | media behind/overlapping text | | 5 full-width | | phone 390px | 358px | 16px | 16px | 12px, 1 line, start | 46px, hamburger (icon), 1 CTA | media behind/overlapping text | | 5 full-width | - H1 goes 12px → 12px (100%), 1 → 1 lines. - Nav collapses to a hamburger by 390px (first seen at 768px); header 48px → 46px. - Body text is 16px at the sampled desktop and phone widths. - Phone side gutter 16px. - 5 buttons stretch full-width on phones. - Section top padding 32px → 16px. ## Interaction & Motion 91 elements carry transitions; typical 0.15s with cubic-bezier(0.4, 0, 0.2, 1), mostly on opacity, color, background-color. 1 running keyframe animations (marquee 17s infinite). - Hover on button-primary ("Start a project"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events | 0.15s | cubic-bezier(0.4, 0, 0.2, 1). - Hover on nav-link ("Work"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events | 0.15s | cubic-bezier(0.4, 0, 0.2, 1). - Focus on button-primary: outline 1px auto rgb(17, 17, 17), offset 1px. - Tooltip triggers exist (10 × aria-describedby, 3 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip. - Hover/click menus: below the trigger, 10px gap, right edges aligned; #e0ddd280, radius 4px, padding 0px 0px, shadow none; appears instantly (no fade); stays open after the pointer leaves (click-away or hover-intent grace). - 9 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe). Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`. ## Do's and Don'ts - Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale. - Do keep body text at 16px in wagram and headings in Azeret Mono. - Do match corner radii per element class (buttons 6px, cards 0px); do not pick one radius for everything. - No global shadow was sampled. Inspect regional/component recipes and screenshots before treating a local surface as flat. - Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels. - Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment. - Note: Page background comes from body; large surface colors remain in the palette.