Brand guidelines
Line and light
The brand is built from very little: one-pixel hairlines that hold everything in place and arrive as strands that run true, flat grounds with one dark close in Midnight, and square sheets laid on sheets for depth. The smoke film is the firm's moving texture, kept for film and screens.
01 · Line
Hairlines do the structure.
Every card, row and divider is a one-pixel line in the border role: Midnight at 12% on light grounds, Sky at 22% on dark. A line darkens one step on hover. Thicker lines appear only where they carry meaning: the 2px rule under the chosen tab or section, the 3px rule under a photograph. Structural rules (the menu, the index at the foot of a page, the footer) are strands: they draw on as a faint wave and run true.
Hairline · 1px
Rows, cards, dividers; the darker one on hover.
The lockup hairline
The same line divides the mark from the name.
Underline · 2px
The chosen tab.
Focus · 2px
FocusedThe focus ring (Harbor by day, Sky at night), and progress in the ground's ink.
The strand · 1px
Draws on from the left as a wave no deeper than 3px, and runs true as it finishes: order from tangle, in the interface's own lines. Straight with less motion.
02 · Light
Flat grounds, and one dark close.
Since October 2026 nothing is lit: the page is white (Midnight at night), Mist sits between sections and behind photographs, and Midnight closes every page and holds the footer, as Deep does on Intertwine Bio. On the dark ground the parts turn Sky. Only dialogs float.
Page, band, sheet
color-background · color-band · color-block
The close
.g-deep · color-deep · every role redefined inside
The one shadow
Dialogs only: search. Never a card.
03 · Layers
Depth comes from sheets, never from shadow.
Layers lay flat, square sheets on one another: a solid sheet of Mist set off behind a photograph with a rule under it, tinted cards stacked behind a front card, and a slight fan when something is chosen. Every offset rises at the mark's own 24 degrees. Nothing glows, blurs or casts a shadow. The four industry pages are built in it.
The offset sheet
A solid sheet of Mist the size of the photograph, set 28px across and 12.5px up, along the mark's rise, with a 3px rule in the ground's ink under the photograph. It opens as the photograph arrives: tight at first, then out to its full distance.
offset 28, -12.5 · color-block · rule 3px · radius 0 · one sheet to a photograph
Stacked tint cards
The front card holds the words.
Sheets behind it carry a label and nothing more.
Up to four sheets behind a front card, each stepping 48px across and 22px up so its labeled strip shows. The tints run lightest to deepest away from the front. On a phone the step across shortens to 18px.
step 48, -22 · tint-1 to tint-4 · front is the surface role
Square, everywhere
Since October 2026 every corner is square, as the figures are drawn and as the family's sites are built: buttons, cards, fields, tags, photographs, sheets and menus. The registration ticks are retired; a sheet's edge, a hairline and a 3px rule under a photograph do their work.
radius 0 · rule 3px color-rule · no corner marks
The fan and the tilt
When a stack is pointed at, focused or opened, the sheets behind swing 1.8 degrees each about the front card's lower left corner. A plate tilts 2.5 degrees toward a mouse pointer and no further. Neither happens for a finger, and neither moves with reduced motion.
fan 1.8° a sheet · tilt 2.5° · 0.7s ease-soft
Use it for
- The composition at the head of a page, once: the page's own capabilities as sheets.
- A credential or a record that deserves to feel like a document.
- A photograph that needs a place in the page: lay it on a sheet, and let the sheet open as it arrives.
- Sheets slide out from behind the front card once on first paint, then hold. They fan only when chosen.
Never
- A drop shadow, glow, blur, gradient or glass: a sheet is flat and square, a tint and a one-pixel edge.
- More than four sheets behind a card, or a tilt past three degrees.
- Text laid over a photograph in a layer, or a paragraph on a strip.
- A rounded corner, or a corner mark: everything is square, and nothing is marked at its corners.
- Layers behind a table, a form or a chart. Figures keep the exhibit frame.
- A fan that only a mouse can open: focus and touch open it too.
Where it lives
Government
A credential file: the four NAICS codes as tabs above the registration card.
Management
A tangle that squares up: three sheets at rest askew behind a photograph.
Strategy
A deck of slides that fans, and deals the front slide to the back.
Technology
An exploded assembly: three plates held apart, each named at the 24 degree rise.
Every sheet is drawn from the theme roles, so layers follow light and dark with the rest of the page.
04 · The smoke film
The firm's moving texture.
The charcoal haze that sat behind the 2025 home page, re-cut as a seamless 24-second loop. The website stays still, as Primer does; the film is for video intros, event screens and social posts, always under the lockup or a short line, never under paragraphs.
How to use it
- Play it at 35 to 45% over black or Midnight; it reads as smoke, not grey.
- On light grounds, invert it and multiply at about 30%: ink in water.
- Keep one thing over it: the lockup, or a line of six words or fewer.
- Loop it; never speed it up or color it.
Seamless loop, 1080p
24 seconds, no sound
Full length, 1080p
59 seconds, the 2025 cut
Poster frame
