--- version: alpha name: "situationnormal.co" description: "Design system extracted from https://www.situationnormal.co/ on 2026-10-28" colors: background: "#f4f4f4" surface: "#dcdcdc" foreground: "#050505" typography: headline-display: fontFamily: "EB Garamond" fontSize: "46px" fontWeight: 400 lineHeight: "55.2px" letterSpacing: "-1px" headline-lg: fontFamily: "EB Garamond" fontSize: "28px" fontWeight: 400 lineHeight: "33.6px" letterSpacing: "-0.28px" headline-md: fontFamily: "EB Garamond" fontSize: "24px" fontWeight: 400 lineHeight: "1.4" body-md: fontFamily: "EB Garamond" fontSize: "16px" fontWeight: 400 lineHeight: "22.4px" label-md: fontFamily: "EB Garamond" fontSize: "13px" fontWeight: 400 lineHeight: "1.4" button: fontFamily: "EB Garamond" fontSize: "14px" fontWeight: 400 lineHeight: "1.4" rounded: none: "0px" full: "9999px" lg: "12px" xl: "20px" spacing: unit: "5px" 1: "5px" 2: "10px" 3: "20px" 4: "25px" 5: "30px" 6: "40px" 7: "60px" 8: "100px" components: button-secondary: backgroundColor: "#a3a3a34d" textColor: "#0000ee" typography: "{typography.button}" rounded: "9999px" height: "42px" padding: "10px 10px" --- # situationnormal.co ## Overview Situation Normal | Brand & Shopify Studio, Los Angeles: Los Angeles design and commerce studio building brand identities and Shopify storefronts for premium DTC brands in fashion, beauty, food, and lifestyle. Pill-shaped controls, flat surfaces separated by hairlines, confident display type at 46px / 400, a monochrome palette. The site ships in light mode by default. Measured from 583 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/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/c-button-1--rest.png`: Button 1 ("See our work"), rest - `screenshots/c-button-1--hover.png`: Button 1 ("See our work"), hover - `screenshots/c-button-1--focus.png`: Button 1 ("See our work"), focus - `screenshots/c-button-1--active.png`: Button 1 ("See our work"), active - `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--active.png`: Icon button 1, active - `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Work with us"), rest - `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Work with us"), hover - `screenshots/c-card-1--rest.png`: Card 1, rest - `screenshots/c-video-1--rest.png`: Video / media embed 1, rest - `screenshots/c-button-2--rest.png`: Button 2, rest - `screenshots/c-button-2--focus.png`: Button 2, focus - `screenshots/c-button-2--disabled.png`: Button 2, disabled - `screenshots/c-link-2--rest.png`: Text link 2 ("Case Studies"), rest - `screenshots/c-link-2--hover.png`: Text link 2 ("Case Studies"), hover - `screenshots/c-link-2--focus.png`: Text link 2 ("Case Studies"), focus - `screenshots/c-image-2--rest.png`: Image / figure 2, rest - `screenshots/c-button-3--rest.png`: Button 3 ("Work with us"), rest - `screenshots/c-button-3--focus.png`: Button 3 ("Work with us"), focus - `screenshots/c-image-3--rest.png`: Image / figure 3, 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 | `#f4f4f4` | Page background | | surface | `#dcdcdc` | Cards, panels, raised or recessed surfaces | | foreground | `#050505` | Primary text | Full painted palette by area (largest first): `#f4f4f4`, `#dcdcdc`, `#000000`. ## Typography - **EB Garamond** for h1, h2, body: Google Fonts (EB Garamond). 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 | EB Garamond | 46px | 400 | 55.2px | -1px | | headline-lg | EB Garamond | 28px | 400 | 33.6px | -0.28px | | headline-md | EB Garamond | 24px | 400 | 1.4 | normal | | body-md | EB Garamond | 16px | 400 | 22.4px | normal | | label-md | EB Garamond | 13px | 400 | 1.4 | normal | | button | EB Garamond | 14px | 400 | 1.4 | normal | - headline-md: fallback (source h3); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. - label-md: fallback (source label); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. - button: fallback (source button); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. Type scale in use: 14px, 16px, 28px, 46px. Base body size 16px. The hero heading (h1) renders at 46px / 400, center aligned, up to 1020px wide, tracking -1px. Sample: "We design irresistible futuresfor ambitious brands.". 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: 5px. Scale in use: 5, 10, 20, 25, 30, 40, 60, 100 (px). - Flex and grid gaps: 10, 15, 20, 30, 40, 45, 50, 60 px. - Content max width: 1020px, centred. - Breakpoints: 809px, 810px, 1188px, 1199px, 1440px. - Header: 79px tall, fixed, background `rgba(0, 0, 0, 0)`; 1 nav links at 12px / 400. ## Elevation & Depth No box shadows in use; depth comes from hairline borders and surface tints (flat design). ## Shapes - Buttons: 9999px - Inputs: 9999px - Cards and panels: 0px - Images and media: 0px - Radius scale: none 0px, full 9999px, lg 12px, xl 20px ## Components ### Button, secondary Background `#a3a3a34d`, text `#0000ee`, border none, radius 9999px, height 42px, padding 10px 10px, 12px / 400. Sample label: "Home". ### Link Colour `#000000`, no underline at rest, weight 400. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (12 of 87 in the checklist, 17 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 11 state changes, 0 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 | secondary, ghost sm, ghost lg | hover, focus, active, disabled | "See our work" | | Icon button | secondary | focus, active | | | Text link | plain, plain | hover, focus | "Modernizing a brand carrying 2" | | Fieldset / form section | default | rest only | | | Footer | default | rest only | "Work with usInstagramLinkedIn" | | Footer link | plain | hover | "Work with us" | | Card | filled-with-media | rest only | | | Image / figure | aspect-1.33-rounded, aspect-2.71, aspect-1.83 | rest only | | | Video / media embed | default | 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, Text input, Search field, Textarea, Select (native), Combobox / custom select, 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, Header / navbar, Navigation link, Menu / dropdown trigger, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dropdown menu, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, 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, Carousel / slider, Logo strip, Icon, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Grid of items, 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 | 1020px | 1308px | 12px | 46px, 2 lines, center | 79px, 0 links | text only | 2→1 col; 2→1 col; 2→1 col | content-width | | laptop 1024px | 708px | 158px | 12px | 24px, 2 lines, center | 768px, 4 links, 4 CTA | text only | 2→1 col; 2→1 col; 2→1 col | content-width | | tablet 768px | 691px | 38px | 12px | 24px, 2 lines, center | 41px, 0 links | text only | 2→1 col; 2→1 col; 2→1 col | content-width | | phone 390px | 351px | 20px | 12px | 24px, 2 lines, center | 41px, 0 links | text only | 2→1 col; 2→1 col; 2→1 col | content-width | - H1 goes 46px → 24px (52%), 2 → 2 lines. - No navigation links or hamburger detected at 390px; mobile navigation behavior is unverified. - Card grids: 1 columns → 1 column on phones (gap 30px → 30px). - Body text is 12px at the sampled desktop and phone widths. - Phone side gutter 20px. ## Interaction & Motion 5 elements carry transitions; typical 0.4s with ease, mostly on opacity. No running keyframe animations at rest. - Hover on button-primary ("See our work"): background #a3a3a34d → #e3e3e3; cursor pointer. - Hover on button-secondary ("Home"): background #a3a3a34d → #e3e3e3, transforms; cursor pointer. - Focus on button-primary: outline 1px auto rgb(16, 16, 16), offset 1px. - No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding. - No dropdown menus found in the header. - No scroll-reveal: content is visible without scrolling into view. 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 5px 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 EB Garamond. - Do match corner radii per element class (buttons 9999px, 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: 1 background-image values exceeded the 4096-character export limit. Use region screenshots for those effects; omitted does not mean absent. - Note: Page background comes from body; large surface colors remain in the palette.