Styleguide

Two signatures, one system. Lápis HB signs the studio and the ambigram signs the designer. The domain picks the brand, tone of voice, favicon and share image, without duplicating a single page.

Clear space: hexagon height ÷ 4 on every side.

Graphite, paper and a single coral. Every color has a light and a dark version, and the ratio next to it is computed live against the background it sits on.

• background

  --color-background

  Cream paper: main background, textured

  Light

  #F7F3EA

  Dark

  #0F1111

• surface

  --color-surface

  Index cards and panels

  Light

  #F6F6F6

  Dark

  #1A1C1C

• foreground

  --color-foreground

  Graphite: body text

  Light

  #1A1A1A 15.72:1 · AAA

  Dark

  #F6F6F6 17.53:1 · AAA

• muted

  --color-muted

  Soft fills, stamps

  Light

  #ECECF0

  Dark

  #2A2C2C

• muted-foreground

  --color-muted-foreground

  Metadata and captions

  Light

  #5F5F6B 5.68:1 · AA

  Dark

  #A1A1AA 7.39:1 · AAA

• accent

  --color-accent

  Coral: large display, strokes and icons

  Light

  #D85E4C 3.37:1 · AA

  Dark

  #E36D5B 5.96:1 · AA

  Rev. 03: #E36D5B → 2.87:1

• accent-text

  --color-accent-text

  Coral for small text and links

  Light

  #B84E3E 4.52:1 · AA

  Dark

  #FF8C7A 8.37:1 · AAA

• accent-contrast

  --color-accent-contrast

  Text on coral fill

  Light

  #FFFFFF

  Dark

  #0F1111

• border

  --color-border

  Component borders (3:1)

  Light

  rgba(26,26,26,0.5) 3.26:1 · AA

  Dark

  rgba(246,246,246,0.38) 3.39:1 · AA

  Rev. 03: rgba(0,0,0,0.22) → 1.68:1

• rule

  --color-rule

  Decorative rules and dividers

  Light

  rgba(26,26,26,0.12)

  Dark

  rgba(246,246,246,0.12)

  Decorative

• paper-grid

  --color-paper-grid

  Graph-paper grid (40px lines; 8px lines use 35% of this value)

  Light

  rgba(178,208,206,0.28)

  Dark

  rgba(178,208,206,0.05)

  Decorative

• margin-line

  --color-margin-line

  Notebook margin line

  Light

  rgba(216,94,76,0.18)

  Dark

  rgba(227,109,91,0.16)

  Decorative

• destructive

  --color-destructive

  Errors and removal

  Light

  #C4163A 5.38:1 · AA

  Dark

  #FF6B81 6.92:1 · AA

Paper is the surface of everything, because that’s where the work starts: a soft cream in the light theme and graphite in the dark one, both with fibers and grain generated in SVG (no image to download), an 8 and 40 px graph grid made purely in CSS (sharp at any zoom), and the notebook margin line.

background-image:
  linear-gradient(var(--color-paper-grid) 1px, transparent 1px),
  linear-gradient(90deg, var(--color-paper-grid) 1px, transparent 1px),
  linear-gradient(var(--grid-minor-color) 1px, transparent 1px),
  linear-gradient(90deg, var(--grid-minor-color) 1px, transparent 1px),
  var(--paper-fiber); /* SVG fiber, one version per theme */
background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px, 520px 520px;

Three families, three roles: Space Grotesk for headings, Inter for reading and JetBrains Mono for notes. The prototype asked for Space Grotesk 900, which doesn’t exist, so the browser faked the bold. Here it’s a real 700 with tight tracking.

Usage rule: uppercase JetBrains Mono is only for short labels (about four words at most), like dates, stamps and figure captions. Sentences and explanations use Inter in normal case.

• display-xl 160px / 0.86 / -0.045em / 700

  Lápis HB

• display-l 96px / 0.9 / -0.04em / 700

  Every good idea starts on paper

• display-m 72px / 0.92 / -0.035em / 700

  Every good idea starts on paper

• heading 36px / 1 / -0.03em / 700

  Every good idea starts on paper

• title 22px / 1.1 / -0.02em / 700

  Every good idea starts on paper

• lead 26px / 1.3 / -0.01em / 500

  Every good idea starts on paper

• body 17px / 1.6 / 0 / 400

  Every good idea starts on paper

• small 14px / 1.5 / 0 / 400

  Every good idea starts on paper

• label 12px / 1.2 / 0.24em / 700

  Every good idea starts on paper

• micro 11px / 1.3 / 0.32em / 400

  Every good idea starts on paper

4 px base, tied to the paper’s 8 px grid: every space lands on a notebook line.

Content up to 1280px, with fluid side padding (clamp(16px, 4vw, 48px)). On desktop, the notebook margin line sits 56px from the edge.

Two kinds of line. Component borders use the border token (3:1, visible to everyone); decorative lines use rule and stay light, like a notebook’s ruling.

Real pieces of the site, with the same classes as the pages: what you see here is exactly what the site uses.

Gestures of someone taking notes by hand, brought into the interface: page header, figure mark, circle and stamp.

Lucide, 2 px stroke, inline in the HTML. Always with visible text or an accessible label.

• arrow-right
• arrow-left
• arrow-up
• download
• map-pin
• pause
• play
• moon
• sun
• menu
• lock
• x
• file-text
• external-link
• copy
• pencil
• mail
• eraser
• ruler
• check
• pen-tool
• tablet
• clapperboard
• keyframes

Accessibility is a rule of the system, not a final check. The table is computed right now from the tokens, in both themes: text needs 4.5:1; large text and graphics need 3:1.

Everything that moves on its own stops with the pause button at the top, and disappears with the system’s “reduce motion”. Keyboard focus is always visible in coral.

The previous site was a wall of covers filtered by tags, built with Bootstrap and Klavika, on white. The brand was always born from pencil and paper, but that idea stayed locked in the logo. Years later, we found a way to carry it across the whole site: graph paper, pencil strokes and notebook marks, all drawn from this guide. Navigation changed too. The wall gave way to cases told from problem to result, with studio and designer on two domains and a reading experience designed for mobile as well. And work that couldn’t go into the portfolio before, such as projects under NDA, now has a place, protected by a password.