Identity / 2026

# Build with the PICKURPAGE design system

Reference:
PICKURPAGE — Identity System
https://pickurpage.com/identity

## Your task

Design and build an **original** website for my brand, using the design thinking below. The result should feel precise, architectural and restrained — related in spirit to the PICKURPAGE system, never a copy of it.

- **My brand, not theirs.** Use my name, content, imagery and mark. If I haven't given you these, ask me, or use clearly marked placeholders.
- **Nothing verbatim.** Do not reproduce the PICKURPAGE mark, wordmark, copy, page structure or website.
- **Your own implementation.** Use whatever stack this project already uses, and your own components.
- **System values — keep them exactly.** The three motion primitives with their curves and timings, the 4 / 8 / 12-column grid, the 45° angle, zero radius and the type relationships are the design system. Don't tune them.
- **Brand values — replace them only with mine.** The palette and the two typefaces are PICKURPAGE's. If I give you brand colours or fonts, map them onto the same roles. If I don't, use the documented ones as they are.

## Design direction

- **Technical and editorial.** Each page reads as a construction drawing that has resolved into a built thing.
- **Paper and ink.** A warm off-white canvas, near-black type, graphite annotation, and one accent colour used only as a shape.
- **Architectural grid.** Full-width, on a column grid that stays faintly visible on large screens. There is no centred max-width container.
- **Hierarchy through contrast.** Large, tight display type sits against small, tracked uppercase metadata.
- **Thin construction lines.** Hairlines divide, frame and connect. No cards, shadows, gradients or rounded corners.
- **Restraint.** Anything decorative must also be structure. Motion establishes the page, then stops.

## Typography

- **Two families.** A geometric grotesk for display, headings and navigation (PICKURPAGE uses Space Grotesk), and a neutral sans for body, interface and annotations (PICKURPAGE uses Inter). No monospace.
- **Display** is semibold, set tight (tracking around −0.03em), with a line height just under 1.
- **Annotations** are small (around 11px), medium weight, uppercase and tracked wide (around +0.1em). They label things the way a drawing does: `PROJECT / 001`.
- **Navigation** is in the display face: uppercase, medium weight, lightly tracked.
- **Sizes are fluid but capped.** Wide screens gain information, not bigger type.
- **Measure.** Body copy is held to a readable measure, around 65 characters.
- **Numerals** are tabular in metadata and tables.

## Grid & Layout

- **A full-width column grid:** 4 columns on phones, 8 on tablets, 12 on desktop. Gutters and gaps grow with the viewport. There is no max-width container.
- **Full-bleed sections.** Dividing rules reach the viewport edges; content stays on the columns.
- **Visible construction.** On large screens the column lines sit faintly behind the page. They DRAW in once on first load, then stay.
- **The header is part of the drawing.** It sits on the same grid as the page, not floating above it.
- **Boundaries sit on real column lines.** A rule never just hugs the content.
- **Section rails.** Sections open with a numbered rail: `04 / 09   LABEL ——————— ASIDE`.
- **Extra width carries metadata,** not larger elements.

## Color

The documented palette. If I've given you brand colours, map them onto these same roles; otherwise use these values as they are.

| Token | Light | Dark | Role |
|---|---|---|---|
| Paper | `#F7F7F5` | `#0B0D0F` | Canvas |
| Ink | `#111111` | `#F2F3F0` | Type, mark, focus |
| Graphite | `#5A5A5A` | `#9A9E9C` | Secondary text, annotation |
| Construction | `#D9D9D4` | `#2A2E31` | Grid, hairlines |
| Frame | `#B8BAB5` | `#3A3F42` | Frames, registration |
| Cyan | `#06B6D4` | `#22D3EE` | Nodes, points and status — never text |
| Technical | `#0B1220` | `#111820` | The single inverted surface |

- **Semantic tokens only.** Components use role names, never raw values, so a theme switch changes nothing else.
- **One accent, used as a shape.** Cyan marks nodes, points and live status — as a crosshair or a dot — and is never text. The shape carries the meaning, never the colour alone.
- **Focus is always ink.**
- **One inverted surface at most,** used for a single emphatic section.
- **Themes:** light, dark and system.

## Mark

Design your own mark with the same principles. **Do not reproduce the PICKURPAGE mark or wordmark.**

- **Few solid forms, one colour.**
- **One angle.** Every edge is horizontal, vertical or the system angle (45°).
- **Shared lines.** The forms share axes and meet at a deliberate point, rather than simply sitting near each other.
- **Legible small.** The geometry must hold from display size down to a favicon.
- **Lockup:** the mark, a hairline divider, then the wordmark in the display face.

## Geometry

- **One angle: 45°.** Every diagonal is exactly 45°, from cuts in the mark to the ↗ on onward links.
- **Construction lines extend real edges.** Nothing is placed for effect.
- **Crosshairs** mark only points that mean something — frame corners, process stages, intersections — and are never stamped across the whole grid.
- **Frames** are the only four-sided borders, used around visuals. Everything else is divided by single rules.
- **Zero radius everywhere,** including buttons, inputs, controls and focus rings.

## Motion

The language is **construction → wipe → resolution**: structure establishes the space, content wipes into it, and then everything stops.

There are three motion primitives, and no others: **DRAW**, **WIPE** and **NUDGE**. Every animated behaviour in this brief is one of them; anything that fits none of them doesn't animate.

- **DRAW** — lines and geometry, along their length.
  - `cubic-bezier(0.65, 0, 0.35, 1)`, 0.2–0.9s.
  - Rules, rails, guides and nodes draw along their length; nodes grow from their centre.
- **WIPE** — text, bottom to top.
  - `cubic-bezier(0.16, 1, 0.3, 1)`, 0.30 / 0.42 / 0.62s for metadata, supporting copy and headlines.
  - Text starts fully hidden and is revealed by a clip opening from its bottom edge. It doesn't move and it doesn't fade.
  - WIPE can also reveal an image, sweeping sideways across it. Text always wipes bottom to top.
- **NUDGE** — arrows, 2px along their direction.
  - `cubic-bezier(0.4, 0, 0.2, 1)`, 150ms.
  - NUDGE is every small interface response:
    - an arrow moving 2px the way it points, on hover or focus;
    - a colour or border change on hover;
    - a small toggle, such as a + turning 45° into an ×.

Rules:

- **Direction.** Text travels upward. Lines draw along their length. Arrows move only the way they point.
- **Nothing floats, scales, springs, bounces or loops,** and there are no opacity fades.
- **Entrances play once:** DRAW for structure, WIPE for text, as a section enters the viewport. After that the page is static.
- **Structure before content.** Structure establishes before the content that depends on it, and interactions respond immediately.
- **Reduced motion:** everything renders in its final state. Content must be fully visible even if scripts never run.

## Components & Interaction Principles

- **Buttons** are rectangular blocks set in navigation type.
  - The primary is an ink fill.
  - The secondary is a hairline border that firms to ink on hover (NUDGE).
  - Onward actions carry ↗, which moves on hover (NUDGE).
- **Navigation** is one bracketed zone, not a row of separate buttons. On hover, an underline draws in from the left (DRAW); the current page keeps its underline, static.
- **Hover is a line response.** Borders firm up, crosshairs take the accent, and colours shift (NUDGE). Nothing lifts, scales or casts a shadow.
- **Active** states are static: ink replaces graphite.
- **Images** can rest muted, then resolve to full colour on hover or focus as the muted layer sweeps sideways off the image (WIPE).
- **Mobile navigation** is a full-screen panel. The panel itself appears at once.
  - Opening: the menu icon turns into an × (NUDGE), and each row of text wipes up (WIPE).
  - Closing: the whole panel clears upward in one quick move (DRAW).
- **Disclosures** turn a + into an × (NUDGE).

## Responsive Behavior

- **Phones:** 4 columns, content stacked, no visible construction lines, navigation in the full-screen menu.
- **Tablets:** 8 columns, still with the full-screen menu.
- **Desktop:** 12 columns, full navigation, with the construction lines visible.
- **Wide screens:** type stops growing; the extra space carries metadata.
- **Hover effects** apply only on devices that can actually hover.

## Accessibility

- **Semantic landmarks.** One h1 per page, headings in order, labelled navigation, and a skip link.
- **Keyboard.** Every hover response also happens on keyboard focus. Focus rings are visible, square and ink.
- **Contrast.** Text meets WCAG AA at minimum. The accent is never text.
- **Reduced motion is respected.**
- **Decorative construction** is hidden from assistive technology. Whatever it marks also exists as text.
- **Accessible names and announcements.** Icon-only controls have accessible names, menus manage focus, and status changes are announced.
- **Touch targets** are at least 44px.

## Implementation Guidance

1. **Tokens first:** colour roles with light and dark values.
2. **The grid next:** align layout elements to the column lines. Overlays, full-screen panels and pointer-following treatments sit above the grid, not on it.
3. **Type and hairlines:** set the type roles and the rules. The page should already read as the system before any motion.
4. **Motion last:** only the three primitives — DRAW, WIPE and NUDGE — gated on motion being allowed.

Before you finish, check your work:

- [ ] It's my brand and my content, with nothing reproduced from PICKURPAGE.
- [ ] Layout elements align intentionally to the grid, full-bleed rules and structural elements respect the grid system, and there's no max-width container.
- [ ] There are no rounded corners, cards, shadows or gradients.
- [ ] The accent is never text.
- [ ] Only DRAW, WIPE and NUDGE are used, and nothing replays or loops.
- [ ] It works by keyboard, under reduced motion, and without scripts.

---

Design reference:
PICKURPAGE — Identity System
https://pickurpage.com/identity

Built by PICKURPAGE.