--- version: alpha name: "dmcg.co" description: "Design system extracted from https://dmcg.co/ on 2026-10-28" colors: background: "#ffffff" foreground: "#000000" typography: headline-display: fontFamily: "neueMontreal" fontSize: "48px" fontWeight: 500 lineHeight: "1.4" headline-lg: fontFamily: "neueMontreal" fontSize: "32px" fontWeight: 500 lineHeight: "1.4" headline-md: fontFamily: "neueMontreal" fontSize: "24px" fontWeight: 500 lineHeight: "1.4" body-md: fontFamily: "neueMontreal" fontSize: "14px" fontWeight: 500 lineHeight: "16px" letterSpacing: "0.56px" label-md: fontFamily: "neueMontreal" fontSize: "13px" fontWeight: 500 lineHeight: "1.4" button: fontFamily: "neueMontreal" fontSize: "14px" fontWeight: 500 lineHeight: "16px" letterSpacing: "0.56px" rounded: none: "0px" lg: "8px" full: "9999px" spacing: unit: "4px" components: --- # dmcg.co ## Overview The Design Office of David McGillivray: Brand and software design by David McGillivray. Sharp, squared-off controls, flat surfaces separated by hairlines, confident display type at 48px / 500, a monochrome palette. The site ships in light mode by default. Measured from 274 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/region-r1-context.jpg`: r1 context: page context - `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/phone-390-menu.png`: Phone 390, navigation menu open - `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png - `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png - `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp - `screenshots/c-button-1--rest.png`: Button 1 ("About"), rest - `screenshots/c-button-1--focus.png`: Button 1 ("About"), focus - `screenshots/c-toggle-button-1--rest.png`: Toggle / segmented control 1 ("Projects"), rest - `screenshots/c-toggle-button-1--focus.png`: Toggle / segmented control 1 ("Projects"), focus - `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("TheDesign Officeof David"), rest - `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("TheDesign Officeof David"), focus - `screenshots/c-toggle-button-2--rest.png`: Toggle / segmented control 2, rest - `screenshots/c-toggle-button-2--focus.png`: Toggle / segmented control 2, focus ## 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 | `#ffffff` | Page background | | foreground | `#000000` | Primary text | Full painted palette by area (largest first): `#ffffff`, `#000000`. Gradients in use: `linear-gradient(rgb(255, 255, 255) 0%, color(srgb 1 1 1 / 0.88) 22%, color(srgb 1 1 1 / 0.55) 52%, color(srgb 1 1 1 / 0.18) 80%, rgba(0, 0, 0, 0) 100%)`; `linear-gradient(to top, rgb(255, 255, 255) 0%, color(srgb 1 1 1 / 0.88) 22%, color(srgb 1 1 1 / 0.55) 52%, color(srgb 1 1 1 / 0.18) 80%, rgba(0, 0, 0, 0) 100%)`. ## Typography - **neueMontreal** for body, button: 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 | neueMontreal | 48px | 500 | 1.4 | normal | | headline-lg | neueMontreal | 32px | 500 | 1.4 | normal | | headline-md | neueMontreal | 24px | 500 | 1.4 | normal | | body-md | neueMontreal | 14px | 500 | 16px | 0.56px | | label-md | neueMontreal | 13px | 500 | 1.4 | normal | | button | neueMontreal | 14px | 500 | 16px | 0.56px | - headline-display: fallback (source h1); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. - headline-lg: fallback (source h2); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. - headline-md: fallback (source h3); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. - label-md: fallback (source label); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. Type scale in use: 14px. Base body size 14px. 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: (px). - Flex and grid gaps: 28, 32 px. - Content max width: 645px, centred. - Breakpoints: 900px, 901px. - Header: 0px tall, absolute, background `rgba(0, 0, 0, 0)`; 1 nav links at 14px / 500 (TheDesign Officeof David McGillivray). ## Elevation & Depth No box shadows in use; depth comes from hairline borders and surface tints (flat design). ## Shapes - Buttons: 0px - Inputs: 0px - Cards and panels: 0px - Images and media: 0px - Radius scale: none 0px, lg 8px, full 9999px ## Components ### Link Colour `#000000`, no underline at rest, weight 500. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (5 of 87 in the checklist, 8 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 4 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 | ghost | focus | "About" | | Toggle / segmented control | ghost, ghost | focus | "Projects" | | Navigation link | plain | focus | "TheDesign Officeof David McGil" | | Image / figure | aspect-1, aspect-1, aspect-1 | rest only | | Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Icon button, Button group, Text link, 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, Fieldset / form section, Header / navbar, Menu / dropdown trigger, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Footer, Footer link, 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, 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, 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 | 645px | 32px | 16px | | 0px, hamburger (Mute interaction sounds) | | | content-width | | laptop 1024px | 533px | 23px | 16px | | 0px, hamburger (Turn interaction sounds on) | | | content-width | | tablet 768px | 565px | 20px | 16px | | 0px, hamburger (Open menu) | | | content-width | | phone 390px | 358px | 20px | 16px | | 0px, hamburger (Open menu) | | | content-width | - Nav collapses to a hamburger by 390px (first seen at 1440px); header 0px → 0px. - Body text is 16px at the sampled desktop and phone widths. - Phone side gutter 20px. ## Interaction & Motion 55 elements carry transitions; typical 0.6s with cubic-bezier(0.4, 0, 0.2, 1), mostly on opacity, filter, transform. No running keyframe animations at rest. - 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. - 16 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 14px in neueMontreal. - Do match corner radii per element class (buttons 0px, 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.