START A PROJECT
SHEET 04 — SPECIMEN
REV 1.0.0
Type, colour and parts.
Display
DATUM
Archivo 900 / 96 / -0.045em
Heading 1
Specified, not guessed
Archivo 800 / 60 / -0.03em
Heading 2
Drawn before built
Archivo 700 / 38 / -0.02em
Heading 3
Section heading
Archivo 600 / 21 / -0.01em
Index Title
Halcyon Instruments
Archivo 700 / 32 / -0.02em
Body
Every project is specified, dimensioned and toleranced before it ships.
Archivo 400 / 17 / 1.55
Body Small
Supporting copy and captions sit here.
Archivo 400 / 14 / 1.5
Meta Label
MEASURED, NOT ESTIMATED
JetBrains Mono 500 / 11 / 0.16em
Meta Micro
SHEET 01 OF 06
JetBrains Mono 500 / 9 / 0.18em
Data Value
DTM-2026-A / 1.0.0
JetBrains Mono 400 / 13 / tnum
Numeral
98
Archivo 800 / 88 / tabular
Signature
Ciprian Titire
Alex Brush 400 / 38
Base
#EDE8DC / #0A0A0B
Surface
#E3DDCE / #131316
Ink
#14130E / #F4F3EE
Ink Muted
#5C594E / #8C8C86
Ink Faint
#8A8578 / #565650
Accent
#4C6B00 / #B8F135
COMPONENTS — WHAT SHIPS
20 — 12 GLOBAL · 8 PAGE
C.01
Accessibility
Skip link, focus rings, reduced-motion rules and the scroll offsets that stop the sticky nav covering a section you jumped to.
GLOBAL
C.02
Board Background
The dither field every page sits on. Cell size, drift and contrast are all controls.
GLOBAL
C.03
Preloader
The boot sequence. Resolves tokens and sheet count before the first paint.
GLOBAL
C.04
Scale Ruler
The left-hand scale. Counts the sections on whatever page it renders on, so the numbers follow your edits.
GLOBAL
C.05
Straightedge
The horizontal rule driven by scroll position, with a live readout.
GLOBAL
C.06
Datum
The vertical rule driven by the pointer. Where the two rules cross is the datum the template is named after.
GLOBAL
C.07
Knockout
Type knocked out of the surface behind it.
GLOBAL
C.08
Mobile Nav
The dropdown below 810, and the call-to-action’s three tiers: full, mini, and a folding arrow.
GLOBAL
C.09
Plate Tabs
Cuts each plate’s tab from its own photograph, so the tabs stack like real dividers. Tab labels are generated from each plate’s Ref and Title in the Work collection, so editing the CMS record retitles the tab.
GLOBAL
C.10
Roll CTA
The circle that rolls across the call to action and springs off its edge.
GLOBAL
C.11
Sheet Viewer
Opens a plate to full sheet size.
GLOBAL
C.12
Arrow Cue
The diagonal arrow that travels along its own axis on hover.
GLOBAL
C.13
Smooth Scroll
Lenis, tuned. Honours reduced-motion by switching itself off.
PAGE
C.14
Scroll Scene
Scroll-driven transforms and clip reveals, bound to an element id rather than a fragile selector.
PAGE
C.15
Dither Reveal
Photographs that resolve from dither to image, in greyscale or colour.
PAGE
C.16
Proximity Field
The client marks that answer the pointer as it passes.
PAGE
C.17
Plate Selector
The selection marquee and leader lines in the drawing key.
PAGE
C.18
Traverse
The station readout that walks the build log.
PAGE
C.19
Counter
Tabular figures that count into place when they arrive.
PAGE
C.20
Signature
The drawn signatures in the colophon.
PAGE
MOTION — HOW IT MOVES
ONE CURVE, THREE DURATIONS
(M1)
THE CURVE
One easing across the whole template. Found independently on lusion and obys, so it is the field’s curve, not a preference.
0.16, 1, 0.3, 1
(M2)
STANDARD REVEAL
Sections and rows enter on this. Long enough to read as deliberate, short enough not to be waited on.
0.9s
(M3)
ENTRANCE
Opacity 0 → 1 with a small lift. Nothing slides in from off-screen, so the page never looks like it is assembling itself.
y 12–18px
(M4)
STAGGER
Per row in a register, so a table resolves top to bottom rather than all at once.
0.04–0.06s
(M5)
TICK STAMP
The 8px square on each register row, scaling in as the row crosses 90% of the viewport. Replays on re-entry.
0.2s · 0.3 → 1
(M6)
REDUCED MOTION
Honoured in CSS, not faked in script. Every animation has a still state, so nothing is left hidden.
HONOURED
GRID & SPACING — THE SHEET
FOUR WIDTHS, ONE RHYTHM
(G1)
CONTENT INSET
Asymmetric on purpose: the left inset clears the fixed scale rail so the register aligns to the ruler, not the viewport.
112 / 72
(G2)
INSET — TABLET
Both gutters equal once the rail is out of the way.
40 / 40
(G3)
INSET — PHONE
As tight as the type will take before the measure breaks.
24 / 24
(G4)
BREAKPOINTS
Desktop, tablet, phone, and a fourth for very large displays where the sheet would otherwise stretch.
1200 · 810 · 2160
(G5)
SCALE RAIL
Fixed width at every breakpoint. The ruler counts the sections on the page it renders on.
72px
(G6)
MEASURE
Body copy is capped here. Past roughly 75 characters the eye loses the line return.
65–75 ch
(G7)
REGISTER ROW
The house row: ref, title and description, then the value hard right against a hairline.
16px / 1px