Brand guidelines · Version 2 · October 2026
Intertwine Associates
The firm's identity in one place: the mark and lockup, color, type, the components the site is built from, and how it moves and speaks. It is the Intertwine family's system in the firm's own colors: square corners, hairlines, small capitals, large headlines, so the website, Primer and the family's other sites read as one.
01 · Logo
The mark, the name, the hairline.
The lockup is set exactly as Primer's: the mark, a one-pixel hairline, then Intertwine in Satoshi Bold over Associates in small capitals with wide tracking. The © is a shade lighter. The mark is the 2025 drawing, unchanged.
Three sizes: 36, 44, 60px mark
The mark alone: 64, 32, 20, 16px
The mark as an icon, on any brand color
Favicon and app icon: Midnight on Sky
Clear space and size
- Keep clear space equal to the gap between the mark and the hairline (13px at the standard size) on every side.
- Smallest lockup: 150px wide on screen, 35mm in print. Below that, use the mark alone.
- Smallest mark: 16px. The mark is always the hand-drawn artwork, never redrawn or outlined. Below 48px a light stroke in its own color keeps the thin loops whole, as in Primer.
- The favicon and app icons are one tile: the mark, exactly as drawn, in Midnight on Sky. Never white, never the bare mark on a clear ground. Primer's is the same mark in Sky on Navy.
Color pairs
- Midnight on Cloud or white.
- White on Midnight.
- Midnight on Sky, for covers and stickers.
- The hairline and Associates follow the ink at 16% and 64% (22% and 62% in white).
Never
- Stretch, re-space or re-weight the type.
- Recolor the mark and the name separately.
- Add a shadow, glow or gradient.
- Set it on a busy photograph without a solid panel behind it.
- Use the 2025 wide wordmark; it is retired.
Downloads
Lockup, Midnight
For light grounds
Lockup, white
For Midnight and photographs with a panel
Lockup on a ground
Ready for slides and documents
Mark
Logo animation
The mark drawn in one stroke: white on black, 540 pixels square, 6 seconds, drawn and then undrawn so it loops. For film titles, event screens and the guide.
Favicon and app icons
Link preview card
1200 by 630, shown when the site is shared
Brand tokens
Every color as CSS variables, light and dark
02 · Color
Midnight and Sky, and the light between them.
The two colors of the mark lead. Midnight carries text, buttons and the dark ground; Sky is the signature, used for the mark on dark grounds, dark-mode buttons and focus. Everything else is a quiet neutral. Click a color to copy it.
Primary
HEX#1A2149
RGB26, 33, 73
On white15.5:1 · Text
On Midnight1.0:1 · Fills only
Ink, primary buttons, the dark ground, the mark on light grounds.
HEX#92B4DD
RGB146, 180, 221
On white2.1:1 · Fills only
On Midnight7.2:1 · Text
The signature: the mark on dark grounds, primary buttons in dark mode, focus rings.
HEX#FFFFFF
RGB255, 255, 255
On white1.0:1 · Fills only
On Midnight15.5:1 · Text
Cards and fields; the mark on Midnight.
Supporting
HEX#F8F9FA
RGB248, 249, 250
On white1.1:1 · Fills only
On Midnight14.7:1 · Text
The light ground every page sits on.
HEX#1F264F
RGB31, 38, 79
On white14.5:1 · Text
On Midnight1.1:1 · Fills only
Cards and panels on the Midnight ground.
HEX#456288
RGB69, 98, 136
On white6.3:1 · Text
On Midnight2.5:1 · Fills only
Links and highlights on light grounds (5.9:1 on Cloud).
HEX#7E80B4
RGB126, 128, 180
On white3.7:1 · Large text
On Midnight4.1:1 · Large text
The second voice: callouts, the third data series, quiet tags.
HEX#E6EEF8
RGB230, 238, 248
On white1.2:1 · Fills only
On Midnight13.2:1 · Text
Sky at its quietest: active rows, selected states, tags.
HEX#B7791F
RGB183, 121, 31
On white3.6:1 · Large text
On Midnight4.2:1 · Large text
Warnings only. Never decoration, never good or bad in a chart.
Scales
midnight
sky
iris
Theme roles
Light and dark only. Components use these roles, never raw colors.
| Role | Light | Dark |
|---|---|---|
| Page ground | #FFFFFF | #1A2149 |
| Cards, sidebar, fields | #FFFFFF | #1F264F |
| Text, icons | #1A2149 | #F5F5F7 |
| Supporting text | rgba(26, 33, 73, 0.72) | rgba(245, 245, 247, 0.74) |
| Labels, meta | rgba(26, 33, 73, 0.64) | rgba(245, 245, 247, 0.55) |
| Hairlines | rgba(26, 33, 73, 0.12) | rgba(146, 180, 221, 0.22) |
| Primary buttons | #1A2149 | #92B4DD |
| Active rows, chips | rgba(146, 180, 221, 0.18) | rgba(146, 180, 221, 0.14) |
| Links | #456288 | #B0C8E6 |
Proportion
How much of a typical page each color covers. Amber appears only as a warning.
- Cloud 52%
- White 18%
- Midnight 18%
- Sky 8%
- Iris 3%
- Amber, warnings only
03 · Typography
One face, as Primer uses it.
Satoshi carries every headline, paragraph, label and figure. IBM Plex Sans Condensed is the data face, for the words and numbers inside figures, and IBM Plex Mono appears only for code and data keys. Headlines are bold and tight, labels are small tracked capitals, and everything else is plain sentence case.
Aa
Satoshi
Indian Type Foundry · Regular 400, Medium 500, Bold 700 · self-hosted
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & % $ ©
IBM Plex Sans Condensed · figures, axes and legends · 0123456789
IBM Plex Mono · code and data keys
Display
The home statement, once.
We show up ready to work
Satoshi Medium 44 to 92, tracking -3.5%, leading 1.02
Page title
The h1 of every page.
We show up ready to work
Satoshi Medium 38 to 64, tracking -3%, leading 1.04
Section
Section headings.
We show up ready to work
Satoshi Medium 26 to 38, tracking -2.5%, leading 1.12
Statement
A line that carries a page, once or twice.
We show up ready to work
Satoshi Regular 24 to 36, tracking -2%, leading 1.25
Card title
Card and row titles.
We show up ready to work
Satoshi Bold 16 to 17, leading 1.35
Lead
The line under a title.
We show up ready to work
Satoshi Regular 17 to 19, leading 1.65
Body
Reading text.
We show up ready to work
Satoshi Regular 16, leading 1.7 (prose) or 14 / 22 (interface)
Small
Meta, hints, captions.
We show up ready to work
Satoshi Regular 12, leading 16
Label
The small capitals above a heading, table heads, stat labels, the pages in the header.
We show up ready to work
Satoshi Medium 11.5, capitals, tracking +20%
Button
Buttons and text links.
We show up ready to work
Satoshi Medium 12, capitals, tracking +16%
Figure text
Everything inside a figure: titles, axes, numbers, legends, notes.
We show up ready to work
IBM Plex Sans Condensed Regular, Medium and SemiBold, tabular figures, black print by day, white by night
Figure label
The label above a figure.
We show up ready to work
IBM Plex Mono Medium 11, capitals, tracking +12%
04 · Components
One of each.
One of each, and every corner square, as the figures are drawn and as the family's sites are built: one button in two weights, one card, one tag, one stat tile, one field. Hairlines separate; nothing casts a shadow but a dialog.
Buttons
.btn-primary a rectangle in the ground's ink, small capitals; it empties to an outline on hover and its arrow steps on. .btn-secondary the outline, filling on hover. On Midnight both turn Sky.
Tags
Small capitals in a hairline box, for status and short facts. Never for actions.
Field
.input, square, 48px; on focus its edge turns to ink.
Efficiency target
40%
Engagements
3 to 12 mo.
A card that goes somewhere
On hover an ink rule draws along its top and the arrow steps on.
Trail and progress
The trail names the page's parents; progress is a thin line in the ground's ink.
05 · Motion
Calm, quick, and only when something changes.
Lines draw, words rise, strands settle, photographs open. The firm's hairlines arrive a little tangled and run true, as its name does; headings rise word by word, the closing panel grows from its photograph, buttons wipe, the theme opens upward. Nothing loops for attention, and everything holds still for people who ask for less motion.
Fade in
fadeIn 0.3s ease-out
A page or a menu arriving.
Fade up
fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1)
A panel, a toast, a word in the home statement.
Colors
color, background, border 250ms ease
Hovers, the theme switch.
Lift
translateY(-1px) buttons, (-2px) cards
Hover on anything that acts.
The reveal
each band drawn solid along its centerline (1.35s, then the ring 1.05s), the mark settles, the hairline grows, the name rises, Associates tracks in
Brand moments only: the guide, film titles, event screens. Never in navigation.
Reduced motion
all durations to 0.01ms
Everything still and visible.
06 · Voice
Plain, prepared, and specific.
The firm writes the way its associates work: direct, warm, without buzzwords or over-polished promises. Primer's rules apply: sentence case, American spelling, no emoji, no exclamation marks.
We say
We avoid
We show up ready to work.
We are a full-service, best-in-class solutions provider.
No buzzwords. Just honest, clear communication.
Synergies, paradigm shifts, leveraging robust frameworks.
We aim for outcomes, not activity.
We deliver world-class value-added deliverables.
Partner with us
Unlock your potential today!
Every hour, insight, and outcome count.
Revolutionary, game-changing, disruptive.
Plain sentence case: "Our principles"
Title Case For Every Label, or ALL CAPS shouting
Numbers as numbers: 40%, 3 to 12 months
Approximately forty percent
Guides
Go deeper
Icons
The firm's own line set: 68 icons in three weights.
Line and light
Hairlines, the lit Midnight panel, shadows, layers and the smoke film.
Textures
Seven patterns of order: untangle, flow, stride, halftone, lattice, ledger and modules.
Data
Chart colors, anatomy and rules, in the firm's palette.
Photography
Warm, human work in daylight: the graded library and four short films.
Questions about the brand: contact us.
