# Luis Sejer — brand kit

> The Drawing Set: every page is a numbered sheet in an architect's archive. Paper, ink, 1px hairlines, one grotesk, bracket notation. Human version: https://luissejer.dk/brand/ · Tokens: https://luissejer.dk/brand.json

## Colour
| Token | Name | Hex | RGB | Night | Role |
|---|---|---|---|---|---|
| `--paper` | Drafting Paper | `#e7e4df` | 231 228 223 | `#141414` | The ground: every background, the header, reversed text on ink fills. On the night sheet the ground is ink. |
| `--ink` | Drawing Ink | `#141414` | 20 20 20 | `#e7e4df` | All text, every hairline, the wordmark, every graphic and chart mark, hover fills. On the night sheet the ink is sand. |
| `--ink-2` | Graphite | `#4a4744` | 74 71 68 | `#a8a49e` | Secondary text: labels, field names, axis ticks, separators. 7:1 on paper; night graphite 7.4:1 on ink. |
| `--red` | Contact Red | `#b3261b` | 179 38 27 | `#f0695f` | Only the way to write to Luis (mailto), the focus ring and the text caret. Nothing else. On the night sheet the same red, lifted for contrast on ink (6:1, 4.8:1 for protanopes). |

## Typography
**Clash Grotesk** (200–700 (variable). In use: 420, 460, 500, 560, 600.), fallback 'Helvetica Neue', Arial, sans-serif. Fontshare Free Font Licence (FFL). Free for commercial use; get it from Fontshare rather than redistributing the file. Source: https://www.fontshare.com/fonts/clash-grotesk

| Style | Use | Size | Weight | Leading | Tracking |
|---|---|---|---|---|---|
| Display | Page H1, stacked lines | `clamp(3rem, 8vw, 6rem)` | 600 | 0.9 | -0.03em |
| Headline | Statements, big numbers | `clamp(1.75rem, 3.9vw, 3.75rem)` | 500 | 1.02 | -0.025em |
| Title | Section heads, list items | `clamp(1.5rem, 2.4vw, 2.25rem)` | 560 | 1 | -0.02em |
| Body | Running text, max 38em | `1.0625rem` | 420 | 1.4 | 0 |
| Label | Meta, numbers, title blocks. Tabular figures, sentence case. | `0.8125rem` | 460 | 1.2 | 0.005em |

## Rules
- **The One Red Rule.** Red marks the way to write to Luis (mailto) plus the focus ring and caret. If it is not the contact action or a focus indicator, it is ink.
- **The Ink Only Rule.** Every graphic is ink on paper: blocks, dots, hairlines. No greys of their own outside graphite (or night graphite), no second accent, no gradients.
- **The Flat Sheet Rule.** Nothing floats. No shadows, no glow, no blur, no radius. Structure is 1px ink hairlines; emphasis is a full ink fill. The only texture is the paper grain: static ink specks at 12% (sand specks at 11% on the night sheet), on the ground only, never on fills, type or images.
- **The Night Sheet.** An inverted sheet, sand ink on ink paper, opt-in only through the header switch ([■] Nat / Night / Noche) and remembered per browser. Paper is the brand default and never follows the OS dark-mode setting. Print is always the paper sheet. The grain is off in print and under reduced transparency, more contrast and forced colours.
- **The One Family Rule.** Clash Grotesk is the only face, from 13px labels to full-bleed display. Weight and size carry hierarchy.
- **The Bracket Rule.** References, numbers and status read in square brackets: [01], [Sheet 02 — Analytics], [Denmark]. Brackets are notation, not decoration.
- **The Title Block.** A sheet closes on ruled cells: Project · Sheet · Drawn by · Rev. Graphite field names over ink values.

## Do
- Separate bands with full-width 1px ink hairlines.
- Number and annotate in square brackets, label size, tabular figures.
- Use ink fills (ink background, paper text) for hover and selected states; the night switch swatch fills with ink when on.
- Keep corners square and the page flat.
- Let motion draw: hairlines drawing in, type rising from masks. Respect reduced motion.

## Don't
- Round a corner, cast a shadow, add glow or blur.
- Add a second typeface, a second accent colour, or greys outside graphite and night graphite.
- Add texture beyond the paper grain, or put grain on ink fills, type or images.
- Use red for anything but the contact action, focus and caret.
- Use the night sheet as the default, or switch it on from the OS dark-mode setting.
- Use stock imagery, illustration or generated faces.
- Use glyph or icon-font arrows; use the authored arrow.

## Applying it
- **Charts:** One series = ink bars or lines on paper; square marks with a 2px paper gap; hairline grid at ink 12%; graphite tick labels in label type. Several categories: ink, graphite and hatched/outlined fills, always with a legend or direct labels — never extra hues. Heatmaps: one ink ramp by opacity. Tooltips: paper box, 1px ink border, value first.
- **Diagrams:** Paper ground, ink text and 1px ink strokes, square nodes, the key node as an ink fill with paper text. Framed as a sheet: a header bar "[D01] Title" and a title block underneath.
- **Maps:** Paper land, water and parks as faint ink fills, roads as ink lines by importance, labels in graphite. The data on top in solid ink: tracks as lines, places as ink squares with [nn] labels.
- **Graphs / networks:** Ink dots sized by degree, graphite hairline links, the core as the one ink square. Clusters labelled in brackets. Still: no glow, no idle animation.

## Assets
- [Wordmark, ink](https://luissejer.dk/brand/sejer-wordmark.svg): On paper or any light ground.
- [Wordmark, paper](https://luissejer.dk/brand/sejer-wordmark-paper.svg): On an ink fill.
- [Mark](https://luissejer.dk/brand/sejer-mark.svg): Square icon / favicon: the S in paper on ink.
- [Mark, PNG 512](https://luissejer.dk/icon-512.png): For places that need a bitmap.

## CSS
```css
:root {
  --paper: #e7e4df;
  --ink: #141414;
  --ink-2: #4a4744;
  --red: #b3261b; /* contact action, focus ring, caret only */
  --m: clamp(12px, 1.1vw, 20px); /* margin and gutter */
  --font: 'Clash Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .078 0 0 0 0 .078 0 0 0 0 .078 1.7 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); /* body and header: background: var(--grain) var(--paper) */
}
/* The night sheet: opt-in via <html data-theme="dark">, screen only, so print stays paper */
@media screen {
  :root[data-theme='dark'] {
    --paper: #141414;
    --ink: #e7e4df;
    --ink-2: #a8a49e;
    --red: #f0695f;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .906 0 0 0 0 .894 0 0 0 0 .875 2 0 0 0 -1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
  }
}
@media print, (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  :root { --grain: none !important; }
}
```

## Mermaid theme
```
%%{init: {"theme": "base", "themeVariables": {
  "background": "#e7e4df", "primaryColor": "#e7e4df", "primaryTextColor": "#141414",
  "primaryBorderColor": "#141414", "lineColor": "#141414", "secondaryColor": "#e7e4df",
  "tertiaryColor": "#e7e4df", "clusterBkg": "#e7e4df", "clusterBorder": "#4a4744",
  "fontFamily": "Clash Grotesk, Helvetica Neue, Arial, sans-serif"}}}%%
classDef ink fill:#141414,color:#e7e4df,stroke:#141414
```

---

# Full design system (DESIGN.md)


# Design System: Luis Sejer

## Overview

**Creative North Star: "The Drawing Set"**

Every page is a numbered sheet (Ark 01 to 04) in an architect's archive. Drafting paper, drawing ink, 1px ink hairlines, one grotesk from 13px labels to full-bleed display, and bracket notation ([01], [Ark 01 — Index], [*]) carry the whole world. The only graphic material is solid ink: the rectangle wordmark, the plotter and contour drawings and the halftone portrait are all ink on paper. One red exists, and it means "write to Luis".

The page is a ruled sheet, not a stack of cards. Content sits on a four-column grid with hairlines drawn edge to edge between bands; every page closes on the same title block (project, sheet, drawn by, language, revision). Density is generous vertically and tight horizontally: big clamp-driven gaps between sections, a narrow fluid margin at the sheet edge.

Motion is drafting, not decoration: hairlines draw themselves across the sheet, lines of type rise out of masks with expo easing, and the SEJER wordmark morphs from plain rectangles into letters. Everything is visible without JS, and reduced motion shows the final state.

**Key Characteristics:**
- Paper and ink only, plus one rationed red for the contact action. The paper carries a faint static ink grain.
- An opt-in night sheet swaps the two: sand ink on ink paper. Paper is always the default.
- 1px ink hairlines as the sole structural device; no radius, no shadow, no fills except ink.
- Bracket notation and sheet numbering as the labelling system.
- One variable grotesk (Clash Grotesk) across all sizes, weight carries hierarchy.
- Signature: the rectangle-morph SEJER wordmark at the top and close of the site.

## Colors

A two-tone drafting palette with one red reserved for action.

### Primary
- **Contact Red** (red): the live contact action and nothing else: the email in the header, the close-of-page email, the Contact page address, the focus ring and the text caret. Never a heading, a decoration or a state colour for anything else.

### Neutral
- **Drafting Paper** (paper): the page, the fixed header, the reversed text on hovered register rows, and the selection text.
- **Drawing Ink** (ink): all text, every hairline, the wordmark, the line drawings, the portrait dots, the hover fill of register rows and the selection background.
- **Graphite** (ink-2): secondary text (muted labels, register lines, column heads, title-block field names, tool separators). Holds 7:1 on paper.

### Night
The night sheet swaps the token values, not the roles: paper #141414, ink #e7e4df, graphite #a8a49e (7.4:1 on ink) and red #f0695f. The red is the same accent lifted for contrast on ink (6.05:1, and 4.77:1 for protanopes, where the brand red would fall to 2.8:1).

### Named Rules
**The One Red Rule.** Red marks the way to write to Luis (mailto) plus the focus ring and caret. If it is not the contact action or a focus indicator, it is ink.

**The Ink Only Rule.** Every graphic is ink on paper: blocks, dots, hairlines. Canvas drawings read the ink colour from the token (and repaint on a theme change). They never introduce greys of their own outside graphite or night graphite.

**The Night Sheet Rule.** The night sheet is opt-in only, through the header switch ([■] Nat / Night / Noche), and the choice is remembered in localStorage. It never follows the OS dark-mode setting, and paper is the brand default. It is set on `<html data-theme="dark">` before first paint. Print is always the paper sheet: the night tokens are screen-only, and on beforeprint the attribute is dropped so the canvases repaint in ink. The brand kit and the business card are pinned to paper. On the night sheet the halftone portrait sizes its dots by lightness, so it never reads as a negative.

## Typography

**Display Font:** Clash Grotesk (variable, 200 to 700, self-hosted woff2) with Helvetica Neue, Arial, sans-serif
**Body Font:** the same
**Label Font:** the same, with tabular numerals

**Character:** One grotesk does every job. Hierarchy comes from size and fine variable weights (420, 460, 500, 560, 600), with tightening tracking as size grows.

### Hierarchy
- **Display** (600, clamp(3rem, 8vw, 6rem), 0.9, -0.03em): each page's H1, set as stacked lines that reveal one by one. Also the Contact page email.
- **Headline** (500, clamp(1.75rem, 3.9vw, 3.75rem), 1.02, -0.025em, balanced): the home statement and the close-of-page email.
- **Title** (560, clamp(1.5rem, 2.4vw, 2.25rem), 1, -0.02em): section heads, service and process step titles, contact list items. Register project names scale it up to clamp(1.9rem, 4.2vw, 4rem) at 0.95.
- **Body** (420, 1.0625rem, 1.4): running text, prose capped at 38em with pretty wrapping.
- **Label** (460, 0.8125rem, 1.2, 0.005em, tabular numerals): header, meta rows, register numbers and disciplines, title block, references. Sentence case, never uppercase.

### Named Rules
**The One Family Rule.** Clash Grotesk is the only face. The font is licensed under the Fontshare FFL and must be swappable by changing the single @font-face declaration.

**The Bracket Rule.** References, numbers and status read in square brackets ([01], [S01], [Ark 01 — Index], [*], [Åben for nye projekter]). Brackets are notation, not decoration; use them where the drawing set would number or annotate.

## Layout

A four-column grid (two columns at 760px and below) with column gap and side padding both equal to the fluid page margin (clamp(12px, 1.1vw, 20px)). A fixed header bar sits on top (2.6rem, growing to 4.6rem on mobile as it wraps to two rows). Pages are stacked horizontal bands separated by full-width 1px ink hairlines; the hero uses a 1:3 split with a vertical hairline between the services register and the display H1. Vertical rhythm uses large clamps between sections (top padding up to 14rem, section heads up to 8rem) and small fixed paddings inside ruled rows (about 1rem top, 1.4rem bottom). Every page ends with the close: the contact prompt, the scroll-scrubbed wordmark at full width, and the five-cell title block. On a sheet shorter than the window the main band grows, so the title block still sits at the foot of the window.

## Elevation & Depth

Flat. There are no shadows and no layered surfaces; depth is never implied. The only texture is the paper grain, a single `--grain` token. It is a 160px tiled SVG noise: static ink specks at 12% on paper, or sand specks at 11% on the night sheet, painted under the body and the header. It sits on the ground only, never on ink fills, type or images. Drawing faces cut through to the paper (canvas destination-out) instead of filling with a flat sand. The grain is off in print and under reduced transparency, more contrast and forced colours. Separation comes from 1px ink hairlines and, on interaction, a full ink fill (register rows invert to ink on paper text). The only overlapping element is the cursor-follow preview over the register, which is a plain ink-backed image with no shadow.

### Named Rules
**The Flat Sheet Rule.** Nothing floats. Structure is drawn with hairlines; emphasis is drawn with ink fill. The paper grain is the only texture.

## Shapes

Square corners everywhere (no radius anywhere in the build). Form language is the rectangle: hairline rules, ruled rows, the title-block cells and the wordmark, whose letters are unions of rectangles on a 9x10 cell (51x10 viewBox; R carries one diagonal leg). The only round forms are the dots of the halftone portrait and the soft round edge of the contour patch, which read as ink texture, not shape.

## Components

### Header
Fixed paper bar with a 1px ink bottom rule, set in label type on the four-column grid: small wordmark plus "Luis Sejer [Danmark]", the nav (sheets separated by " / "), DA | EN | ES, and the red email with an arrow at the right edge. Current page and hover get a 1px underline at 0.2em offset. After the languages sits the night switch: a real `<button aria-pressed>` labelled Nat / Night / Noche. Its 0.7em hairline square fills with ink when the switch is on, following the ink-fill-equals-selected rule. The switch is hidden without JS and on sheets pinned to paper. On mobile the header wraps to two rows.

### Register (work list)
The sheet register: one ruled row per project, linking out to the live site in a new tab. Columns: [nn] year, project name (title scale up to 4rem) with a graphite one-line description, discipline and type, then host with an arrow. Hover and focus invert the row to ink with paper text (0.35s ease) and turn the arrow 45 degrees.

Two other row states. Work with no public link opens its case sheet in the same tab: the host column reads [Privat] with an east arrow, which nudges 0.25em on hover instead of turning (an arrow that stays on the site points on, not out). Unannounced work is a plain row: the name is two ink bars on the baseline (the wordmark's material), read out as "a game that hasn't been announced yet", the status reads [Snart], and there is no link, no hover invert and no preview, because a row that does nothing doesn't pretend to. On hover-capable screens a 16:10 preview of the live site follows the cursor, revealed by a bottom-up clip-path wipe (0.6s expo.out in, 0.4s expo.in out). On mobile the preview sits inline under the description with a 1px ink frame.

### Links
- **Drawn underline:** a 1px currentColor underline that retracts to the right on hover (0.5s, expo ease). The Contact address scales the line with the type (0.06em).
- **Action link:** red, always a mailto, always followed by the authored arrow, which rotates 45 degrees on hover.
- **Arrow:** one authored SVG arrow (12x12, 1.3 stroke, square caps), rotated per direction. No icon font, no glyph arrows.

### Case Sheet
A detail sheet hung off the register, numbered Ark 02.n (02.1 / 04 in the title block), for work shown here rather than linked. It runs: the display name with the one-line intro in column 4; a ruled meta row (No. / Year, Discipline, Type, Status) that mirrors the register row it came from; Fig. 1, a hairline-framed screenshot (a phone-width shot swaps in at 760px and below) with a bracketed label caption; the story in headline type with the index statement's first-line indent; the system drawing; further figures; a ruled spec list; and a drawn-underline link back to the archive.

The system drawing is the sheet's one authored moment: ruled boxes ([01] to [05], name in title type, role in label type) joined by 1px wires that end in the authored arrow, with bracketed notes ([A], [B], [C]) hung under the boxes they explain on a dashed graphite leader. On scroll it plots itself: each box wipes in left to right, its wire runs to the next box, then its note rises (expo.out, about 0.4s apart). On a phone the pipeline runs down the page and the wires drop from box to box. Reduced motion, no JS and print show the finished drawing. Screenshots of private work are always the real app filled with made-up data, and the caption says so.

### Title Block
Six label cells across the bottom of every sheet (Projekt, Ark nn / 04, Tegnet af, Sprog, Andre steder, Rev.), graphite field names over ink values, separated by 1px ink rules. "Andre steder" holds the LinkedIn, GitHub and Instagram marks (official monochrome, currentColor, 1.05rem); "Rev." ends with the [Brand] link. Two columns on mobile.

### Brand kit
`/brand/` (English, outside the numbered set, sheet B) is the public brand kit: idea, wordmark construction, colour, type, elements, drawings, motion, applications, rules. `/brand.md` and `/brand.json` serve the same content for agents, from `src/brand.ts`. Change brand facts there, not in the page.

### Wordmark (signature)
SEJER drawn from ink rectangles. At rest each letter is a single path so touching blocks show no seams; the separate rectangles appear only while morphing. On load (hero), five flat blocks rise from the baseline into squares, then carve into the letters (expo.inOut). At the close of every page, one full-width bar splits into five squares, then carves into SEJER, scrubbed by scroll (power2.inOut). Without JS or with reduced motion, the finished mark shows.

### Line Drawings
Two canvas drawings in ink and graphite hairlines, no library (`Drawing.astro`, kind `plotter` or `contour`). Paused offscreen; a still frame under reduced motion.
- **Plotter** (hero): a pen plotter draws an axonometric massing on a 4 x 4 bay grid. Dashed graphite construction grid first, then the blocks edge by edge back to front (paper faces hide the lines behind, so hidden lines drop out), then a dimension line with slash ticks and a figure in label type. It holds, fades and redraws the next of five authored massings, on a 10s cycle.
- **Contour** (beside every contact prompt): site-survey contours over slowly drifting terrain, marching squares, every fourth line an ink index contour over graphite, faded to a round patch at the edge.

### Halftone Portrait
The About portrait, drawn as ink dots on canvas from a real cut-out photo (transparent pixels read as paper). Sticky beside the text on desktop, square, capped at 55svh on mobile.

## Do's and Don'ts

### Do:
- **Do** separate every band with a full-width 1px ink hairline, and let it draw itself in (scaleX, 1.4s expo.out).
- **Do** use red only for the mailto action, the focus ring (2px outline, 3px offset) and the caret.
- **Do** number and annotate in square brackets, in label type with tabular numerals.
- **Do** reveal headings line by line from masks (1.2s expo.out, 0.07s stagger) and keep everything readable without JS.
- **Do** end every page with the contact close, the scrubbed wordmark and the title block.
- **Do** keep the grain on the ground only, and let drawing faces show the paper through.

### Don't:
- **Don't** round a corner or cast a shadow.
- **Don't** add a second typeface, a second accent colour or greys outside graphite (and night graphite).
- **Don't** add texture beyond the paper grain, or make the night sheet the default or follow the OS setting.
- **Don't** use images that are not real work or the real portrait; no stock, no illustration, no generated faces.
- **Don't** fall back to the freelancer template of hero, three service cards, testimonials and a CTA band.
- **Don't** use glyph or icon-font arrows; use the authored arrow.