Luis Sejer [Denmark]
DAENES
hej@luissejer.dk

Brandkit

The Drawing Set. Every page is a numbered sheet in an architect’s archive: drafting paper, drawing ink, 1px hairlines, one grotesk and bracket notation. One red, and it means “write to Luis”.

The same kit as files, for agents and tools:

brand.md brand.json llms.txt

[B.00] The idea

A portfolio as a drawing set: numbered sheets from an architect’s archive, drawn in ink on drafting paper. It says precise, considered and built, without saying it.

[01] The sheet

Every page is a sheet

Numbered (Sheet 01 to 04), ruled into bands with 1px hairlines, closed by a title block. Projects are a register, references sit in brackets.

[02] The ink

Two colours and a pen

Paper and ink do everything; graphite for the quiet parts. One red, rationed to “write to Luis”. No shadows, no radius: nothing floats on a drawing.

[03] The line

Things get drawn, not animated

A pen plotter draws a building, contours drift across a survey, hairlines draw themselves across the page and the wordmark is assembled from blocks.

[B.01] Wordmark

5110999991.51.51.51.52 bar2 gap2 bar
[Fig. 1] Construction. Five letters, each a union of rectangles on a 9 × 10 cell, 1.5 apart: 51 × 10 units. Bars 2, stems 3, R carries the one diagonal (3.6 → 9 at the foot). Grid shown at 1 unit = 14px.
Ink on paper
Paper on ink
The square mark: the S in paper on ink
Mark
  • Built fromInk rectangles on a 9 × 10 grid per letter, 51 × 10 overall. R carries the one diagonal.
  • Proportion5.1 : 1 (51 × 10 units). Letter 9 wide, gap 1.5, bar 2, stem 3.
  • Clear space10 units (the full height) on every side. Nothing enters it.
  • Minimum48px wide on screen (1 unit ≈ 0.94px), 12mm in print. Below that, use the square mark.
  • Mark32 × 32: the S as five paper bars on ink (x 6 → 26, rows 7·11·14·18·21·25).
  • NeverRecolour, outline, stretch, add effects or set it in type.

[B.02] Colour

Drafting Paper

RGB 231 228 223 · --paper

Night #141414

The ground: every background, the header, reversed text on ink fills. On the night sheet the ground is ink.

Drawing Ink

RGB 20 20 20 · --ink

Night #e7e4df

All text, every hairline, the wordmark, every graphic and chart mark, hover fills. On the night sheet the ink is sand.

Graphite

RGB 74 71 68 · --ink-2

Night #a8a49e

Secondary text: labels, field names, axis ticks, separators. 7:1 on paper; night graphite 7.4:1 on ink.

Contact Red

RGB 179 38 27 · --red

Night #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).

[B.03] Type

Typeface Clash Grotesk, 200–700 (variable). In use: 420, 460, 500, 560, 600. · Fontshare Free Font Licence (FFL). Free for commercial use; get it from Fontshare rather than redistributing the file. Fontshare

  1. Drawing set

    [Display] Page H1, stacked lines · clamp(3rem, 8vw, 6rem) · 600 · 0.9 · -0.03em

  2. Websites, apps and automations

    [Headline] Statements, big numbers · clamp(1.75rem, 3.9vw, 3.75rem) · 500 · 1.02 · -0.025em

  3. Office hours

    [Title] Section heads, list items · clamp(1.5rem, 2.4vw, 2.25rem) · 560 · 1 · -0.02em

  4. One grotesk does every job. Hierarchy comes from size and fine weights.

    [Body] Running text, max 38em · 1.0625rem · 420 · 1.4 · 0

  5. [01] 2026 · Sheet 02 — Analytics

    [Label] Meta, numbers, title blocks. Tabular figures, sentence case. · 0.8125rem · 460 · 1.2 · 0.005em

[B.04] Elements

Hairline

1px ink, edge to edge. The only structural device.

Brackets

[01] [Sheet 02 — Analytics] [Denmark]

Numbering and annotation, label size.

Arrow

One authored arrow (12 × 12, 1.3 stroke, square caps), rotated.

Ink fill

Hover / selected

Emphasis is a full ink fill with paper text, never a shadow.

Title block

ProjectBrand kit
SheetB — Brand
Drawn byLuis Sejer
Rev.A

[B.05] Drawings

[Fig. 2] Plotter A pen plotter draws an axonometric massing on a 4 × 4 bay grid: dashed graphite construction grid first, then the blocks edge by edge, back to front, then a dimension line with slash ticks. Five massings on a 10 s cycle.
[Fig. 3] Contour Site-survey contours over slowly drifting terrain (marching squares). Every 4th line is an ink index contour over graphite, faded to a round patch. Sits beside every contact prompt.
[Fig. 4] Halftone The only photograph: a real cut-out, redrawn as ink dots on canvas. Transparent pixels read as paper. Never a stock image or a generated face.

All drawings are ink and graphite on canvas, read their colour from the tokens, pause off-screen and show a still frame under reduced motion.

[B.06] Motion

Motion is drafting, not decoration.

  • HairlinesDraw in edge to edgescaleX · 1.4 s · expo.out
  • HeadingsLines rise out of masks, one by one1.2 s · expo.out · 0.07 s stagger
  • WordmarkFive flat blocks rise into squares, then carve into SEJERexpo.inOut · scroll-scrubbed at the close
  • Register rowsInvert to ink with paper text0.35 s · ease
  • ArrowTurns on hover45° · 0.4 s
  • LinksUnderline retracts to the right1px · 0.5 s · expo
  • PreviewsBottom-up clip-path wipe0.6 s in · 0.4 s out
  • NeverIdle loops, glow, bounce, parallax for its own sakereduced motion = final state

[B.07] Applied

[D01] Office hoursdemo data
01020304039 h
[D02] Architecturedemo
CorePhoneLightsCloudRouter
  • ChartsOne 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.
  • DiagramsPaper 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.
  • MapsPaper 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 / networksInk dots sized by degree, graphite hairline links, the core as the one ink square. Clusters labelled in brackets. Still: no glow, no idle animation.

[B.08] Rules

  1. [01]

    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.

  2. [02]

    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.

  3. [03]

    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.

  4. [04]

    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.

  5. [05]

    The One Family Rule

    Clash Grotesk is the only face, from 13px labels to full-bleed display. Weight and size carry hierarchy.

  6. [06]

    The Bracket Rule

    References, numbers and status read in square brackets: [01], [Sheet 02 — Analytics], [Denmark]. Brackets are notation, not decoration.

  7. [07]

    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.

[B.09] For builders & agents

CSS variables
: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

Point an agent at luissejer.dk/brand.md: the whole kit and the full design system in one file. Tokens as JSON: /brand.json.