One system.Three parts.Yours to run.
Every part ships with the Handover and runs on the Approval Loop. Each service inside a system can also be bought on its own.
From the studio.
Free tools and passion projects we built to make design better for everyone.
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.
Structure creates freedom.
Book a Strategy Call