---
version: alpha
name: "allanpooley.com"
description: "Design system extracted from https://www.allanpooley.com/ on 2026-10-28"
colors:
  background: "#ffffff"
  foreground: "#000000"
  primary: "#f7d162"
  on-primary: "#111111"
  border: "#000000"
typography:
  headline-display:
    fontFamily: "fontNeueMontreal"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "19.2px"
  headline-lg:
    fontFamily: "fontNeueMontreal"
    fontSize: "32px"
    fontWeight: 400
    lineHeight: "1.4"
  headline-md:
    fontFamily: "fontNeueMontreal"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "1.4"
  body-md:
    fontFamily: "fontNeueMontreal"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "24px"
  label-md:
    fontFamily: "fontNeueMontreal"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: "1.4"
  button:
    fontFamily: "fontNeueMontreal"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "21px"
    letterSpacing: "1.4px"
rounded:
  none: "0px"
  xl: "24px"
  full: "9999px"
spacing:
  unit: "8px"
  1: "8px"
  2: "16px"
  3: "24px"
  4: "40px"
components:
  button-ghost:
    backgroundColor: "#ffffff"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "0px"
    height: "21px"
    padding: "0px 0px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "24px"
    height: "45px"
    padding: "12px 24px"
---

# allanpooley.com

## Overview

Allan Pooley | Freelance Web Developer: Allan Pooley is a design focused freelance developer. Building beautiful, performant and delightfully interactive things for the web.

Soft, well-rounded controls, flat surfaces separated by hairlines, restrained display type at 16px / 400, a single orange accent on neutrals. The site ships in light mode by default. Measured from 404 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-icon-1.png`: representative interface icon
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/brand-favicon-source.png`: Favicon source
- `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text
- `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-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png
- `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp
- `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png
- `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png
- `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png
- `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png
- `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png
- `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico
- `screenshots/c-button-1--rest.png`: Button 1 ("Play"), rest
- `screenshots/c-button-1--focus.png`: Button 1 ("Play"), focus
- `screenshots/c-button-1--disabled.png`: Button 1 ("Play"), disabled
- `screenshots/c-link-1--rest.png`: Text link 1 ("hello@allanpooley.com"), rest
- `screenshots/c-link-1--hover.png`: Text link 1 ("hello@allanpooley.com"), hover
- `screenshots/c-link-1--focus.png`: Text link 1 ("hello@allanpooley.com"), focus
- `screenshots/c-button-2--rest.png`: Button 2 ("The Pluriversity"), rest
- `screenshots/c-button-2--focus.png`: Button 2 ("The Pluriversity"), focus
- `screenshots/c-button-3--rest.png`: Button 3, rest
- `screenshots/c-button-3--focus.png`: Button 3, 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 |
| primary | `#f7d162` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#111111` | Text on the accent |
| border | `#000000` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#000000`, `#f7d162`, `#ffffff`, `#666666`.

The accent `#f7d162` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **fontNeueMontreal** for h1, 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 | fontNeueMontreal | 16px | 400 | 19.2px | normal |
| headline-lg | fontNeueMontreal | 32px | 400 | 1.4 | normal |
| headline-md | fontNeueMontreal | 24px | 400 | 1.4 | normal |
| body-md | fontNeueMontreal | 16px | 400 | 24px | normal |
| label-md | fontNeueMontreal | 13px | 400 | 1.4 | normal |
| button | fontNeueMontreal | 14px | 400 | 21px | 1.4px |
- 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, 16px. Base body size 16px.

The hero heading (h1) renders at 16px / 400, start aligned, up to 1px wide. Sample: "Home".

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: 8px. Scale in use: 8, 16, 24, 40 (px).
- Flex and grid gaps: 24 px.
- Content max width: not detected (fluid).
- Breakpoints: 600px, 768px, 1024px.
- Header: 1px tall, absolute, background `rgba(0, 0, 0, 0)`; 0 nav links at nullpx / null.

## Elevation & Depth

No box shadows in use; depth comes from hairline borders and surface tints (flat design).

## Shapes

- Buttons: 24px
- Inputs: 24px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, xl 24px, full 9999px

## Components

### Button, ghost

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#000000`, border none, radius 0px, height 21px, padding 0px 0px, 14px / 400, uppercase. Sample label: "Pause".

### Button, secondary

Background `#ffffff`, text `#000000`, border 1px solid #000000, radius 24px, height 45px, padding 12px 24px, 16px / 400. Sample label: "The Pluriversity".

### Link

Colour `#000000`, no underline at rest, weight 400.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (5 of 87 in the checklist, 7 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 6 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 sm, secondary, ghost lg | focus, disabled | "Play" |
| Text link | plain | hover, focus | "hello@allanpooley.com" |
| Skip link | default | rest only | "Skip To Content" |
| Image / figure | 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, 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, Fieldset / form section, Header / navbar, Navigation link, Menu / dropdown trigger, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Footer, Footer 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, Section band, 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 | fluid | -1px | 16px | 16px, 1 line, start | 1px, 0 links | text only | 2→2 col; 2→1 col; 2→1 col | content-width |
| laptop 1024px | fluid | -1px | 16px | 16px, 1 line, start | 1px, 0 links | text only | 2→2 col; 2→1 col; 2→1 col | content-width |
| tablet 768px | fluid | -1px | 16px | 16px, 1 line, start | 1px, 0 links | text only |  | content-width |
| phone 390px | fluid | -1px | 16px | 16px, 1 line, start | 1px, 0 links | text only |  | content-width |

- H1 goes 16px → 16px (100%), 1 → 1 lines.
- No navigation links or hamburger detected at 390px; mobile navigation behavior is unverified.
- Body text is 16px at the sampled desktop and phone widths.
- Phone side gutter -1px.

## Interaction & Motion

No CSS transitions on rendered elements: state changes are instant.

- Hover on button-primary ("The Pluriversity"): no visible change; cursor pointer.
- Hover on button-secondary ("Speculative digital story telling"): no visible change; cursor pointer.
- Hover on body-link ("hello@allanpooley.com"): underline appears; cursor pointer.
- Focus on button-primary: outline 1px solid rgb(16, 16, 16), offset 1px.
- Focus on body-link: outline 1px solid 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.
- 70 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 8px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#f7d162` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 16px in fontNeueMontreal.
- Do match corner radii per element class (buttons 24px, 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.