Systems overviewOne system to run your business online. See how it fits together.
5Four MigrationMove your site from Webflow, WordPress, Squarespace, and more, with every page and link intact.
KolibriA foundation brand and website, built as one system.
Black IllustrationsReady-to-use illustrations of Black people. 250K+ downloads.
The 5Four design system.
One page for everything the site, the proposals, and the templates share: the marks, the two typefaces, four colors, the named terms, and the rules that keep them consistent. Sharp edges. No rounded boxes. Structure creates freedom.
The mark, the wordmark, and the clearance.
The 5 mark stands alone in the site header at 73px tall. On hover the wordmark slides out beside it. Never stretch, rotate, or recolor the mark. White on black, black on white, white on 5Four Green. Nothing else.
Keep clear space equal to the height of the 5 on every side. In the header the mark sits at the 56px page margin.
Mark: 24px tall on screen, 8mm in print. Wordmark: 120px wide on screen.
SVG for screen, PDF for print, PNG at 2x for decks. All live in the asset library under Brand System / Logo.
Black, white, gray, and one green.
Green is the only color. It marks the named terms, the primary button, and the No-Hostage band. Everything else is black, white, and two grays.
--ink, --panel
--surface, --on-panel
--surface-gray
Bands, tiles, tables
--ink-muted
Captions on white only
--green, --accent
Text on white at 24px and up
--accent-on-panel
Text and links on black
Green text on white is headline size only, 24px and up. Body-size green text goes black. On black backgrounds use the lighter green, never the logo green. Rules and borders are 1px black on white, 1px white on black, 6px for section-opening bars.
No gradients. No dark blue. No tints of green other than the two above. No shadows. No rounded corners anywhere: radius is 0.
Strichpunkt Sans for headlines. Faculty Glyphic for everything else.
A site you're afraid to touch.
Most agencies hand over files. We hand over the ability to use them.
Your team asks for a change in plain English, a preview link comes back with the change in place, the person you named approves it, and it goes live with a line in your Change Log.
Faculty Glyphic ships in one weight and carries everything set in sentence case, including the large statements. Strichpunkt Sans is for caps only: headlines, labels, buttons, card titles. For emphasis in body copy use a Meta label or a green named term, never bold or italic. Headlines are set in sentence case in the source and rendered in caps by the style, with a small 0.1em space before a closing period.
Six names. Same words every time.
These carry the offer. Capitalize them the same way everywhere: site, proposals, onboarding deck, newsletter, LinkedIn, sales calls. Set them in green the first time they appear in a section, at headline size on white or any size on black.
The Ticket Tax
The problem: a fee, a wait, and a developer for every change.
The Approval Loop
The mechanism: ask, preview, approve, live. Always those four verbs, in that order.
5Four® Systems
The offer: Brand System, Site System, Growth System. The ® stays on 5Four® Systems and 5Four® Run.
The Handover
What every system ships with: five parts. "The five-part Handover" when you need the number.
The Guardrails
The rules built into the system that let a team build freely without breaking anything. Always paired with "Structure creates freedom."
The No-Hostage Rule
Ownership: your accounts, your name, our admin access. Hyphenated, both words capitalized.
Brand Assistant, Change Log, 5Four® Run. Capitalized, never abbreviated.
Second person. Short sentences. American spelling. No em dashes: use a colon, a comma, or a period. Say the thing directly instead of naming what it is not.
Buttons, rows, chips, and bands.
Primary is green with white text. Secondary is an outline. Labels are Meta style, caps. One primary per section.
Used for the systems list and every FAQ. Plus and minus signs, 1px rules, no icons.
Gray by default, black when pressed. Square.
Every section opens with a 6px bar, a Meta eyebrow, and a display headline. 96px padding top and bottom, 56px sides.
One per page at most. Reserved for the ownership promise. White text, white 6px rule, white buttons.
Inline line icons on a 44px grid, 2px stroke, square ends. Green #4A7A2E on white, #7DB356 on black. The first five are the Handover set and always appear in that order. Draw new icons to the same grid and stroke. Never emoji.
Twelve columns. Sixteen-pixel gutters. Hairline rules.
1440 desktop frame, 56px side margins, 12 columns, 16px gutters. Copy columns span 5 to 7. Work cards span 2, 3, 4, or 6.
4, 8, 12, 16, 24, 32, 48, 96. Section padding 96 top and bottom. Alternate white, black, and gray bands so two dark bands never touch.
Real project work and real people, chosen with care. Photos are square-cornered and full bleed inside their cell. The hero collage sits under a 62 percent black wash so white type reads. Client logos are black on white, one height per row.
Inline stroke icons, 2px, 44px box, green. No filled icons, no emoji.
Diagrams that carry an argument.
A figure earns its place by showing a mechanism the paragraph beside it can only describe. If it could be a sentence, it should be a sentence. Everything here is drawn from four marks, in the three colors the rest of this page already allows.
Green marks a thing rather than labels it: a correct line, a good zone, the step that matters. Grey #D6D6D6 is copy standing in for itself, #5E5E5E is a connector or a secondary label.
Deep green #4A7A2E on a light background is only legible at 24px and up, so small type in a figure is black or #5E5E5E. There is no red and no amber here. A thing that is wrong is drawn in black and white, not in a color the system does not have.
Strichpunkt Sans, 700, for what a thing is called. Faculty Glyphic for what it does. Nothing smaller than 13px on the drawing grid.
The grid is about 920 wide whatever the subject, so a 15px label lands near 13px once the drawing scales into the column. A wider grid makes the same label smaller.
The drawing is hidden from assistive technology and the alt is read instead, so the alt says what the figure says rather than naming it. "A diagram of the two runs" is not alt text. The two numbers and which is which are.
A number on a chart is a claim, and the most liftable kind there is. The build reads the words out of a drawing the same as a sentence in a paragraph, and an unsourced one fails it.
The build checks what was drawn against the height it was given. A row laid out past the bottom edge gets cut off, which looks like a design choice rather than a mistake, so it stops the build instead.
Real project work and real people. No stock standing in for work we did, and no photograph inside a figure: a diagram is drawn, not shot. Illustrations of people come from Black Illustrations.
Width and height on every image so nothing moves while it loads, WebP, lazy below the fold, and an alt that says what is in the picture. A decorative image takes an empty alt rather than a description of itself.
No photography. The title set in the display face on a flat panel, one color per category, with the mark in the label color. A stock photo would say nothing true about the piece.
