Skip to content

Brand guidelines

Icons

All icons, in the kit

Drawn in the company's own hand: threads that loop, rings that pass through one another, and a single bead for the point that matters, taken from the family's marks and the twine they are named for. A 24px grid, round caps and joins, no fills. The same drawings come in three weights, so an icon reads the same at 16px in a menu and at 48px on a slide.

01 · The family

78 icons, four groups.

The site: one icon per page, used by the menu, the site map and search. The family: the three companies and how the parent works. Disciplines: the work across the companies. Interface: arrows, controls and states. Select an icon to download its SVG.

The site · 12

The family · 15

Disciplines · 26

Interface · 25

02 · Weight

Three weights from one drawing.

Regular (2px) at 16px in interface chrome, where it matches Lucide. Line (1.5px) at 20 to 24px. Light (1px) at 32px and up.

Regular · 2px · 16px

Line · 1.5px · 24px

Light · 1px · 48px

03 · In use

Chips, rows and the phone.

An icon rarely stands alone. In cards it sits in a chip, in lists beside its label, and on the phone as an app tile.

Chips

32, 40 and 48px chips on a Mint tint, or a hairline. Corners 8 to 12px.

Rows

  • Government & PolicyRegulatory navigation
  • CommercializationFrom research to market

App tiles

Tiles step from Evergreen to Mint; glyphs are white on the four dark steps and Evergreen on the three light ones, so every icon clears 4.5:1.

04 · Rules

Drawing a new one.

The hand

  • One thread. Draw with lines that travel, as the logo films draw the marks, with few lifts of the pen and curves before corners.
  • A loop, not an arrowhead. Where a thread sets off or turns back, it loops once.
  • Over and under. Where rings cross, one passes under the other with a clear break, as the three marks interlace on the home page.
  • One bead. A single solid dot marks the subject: where you are, where it ends, the one that counts.
  • Our own world first: the beads, columns and rings of our charts, the Lowcountry's tides, live oaks and lighthouse.

Always

  • A 24px canvas with 2px padding; circles no larger than radius 8.5, squares 16 wide.
  • Round caps and joins; corners of 2px on rectangles, 1.2px on small parts.
  • At least 2px between parts, so the icon holds at 16px.
  • Strokes only, with the bead as the one solid point.
  • Color follows the text: currentColor, never a second color inside one icon.
  • Arrows, chevrons and controls stay plain, as people expect them.

Never

  • Mixing filled or duotone icons with the line set.
  • Sparkles, magic wands, diamonds and gems, in any form, and none drawn for us.
  • DNA and helixes; our threads loop and interlace, they never twist into a strand.
  • Emoji, robots, rockets, light bulbs over heads, glowing brains.
  • Color-coding meaning (red bad, green good). Use words and shapes.
  • Icons as decoration with no label nearby, except in the sidebar and on the phone.