Brand kit
This site has a brand kit. Every AI session that built it read the file first.
A DESIGN.md is a plain markdown file that tells an AI agent how a brand looks and sounds before it builds anything. Below is this site's, rendered. The file itself is one link away.
I have written one of these before: the Solentrex brand kit (colors, voice, always and never rules) has been the file behind the company's AI content tools since April 2026. It is the first artifact I would build for any company setting up AI properly: the kit the AI reads before it writes a word.
Color
Light, the default
Dark, a preference, not an identity
Contrast on paper: ink 15.5:1, body 11.9:1, captions 5.4:1. The accent is never used for body text. One hue. No gradients. No gold, amber, or neon.
Type
Fraunces
Display. Weight 400, optical size 96, tracking -0.015em. Big numbers, headings, the lead sentence. Italic once per page at most.
Inter
Body. 17px, line-height 1.6, measure 64ch. Semibold for the lead-in of a list item, never for a heading in Fraunces.
SYSTEM MONOSPACE
Labels, captions, eyebrows. 11 to 13px, tracked. Uppercase for eyebrows only.
A place every AI session runs inside.
Five things from the last five months.
I build the AI environment a company works inside, then use it to ship.
Start with the people who do the work. Sit with them, write down where the hours go, and pick one thing with a number attached.
2,211 documents
Components
Callout
Note
A quiet aside in the same voice, used rarely.
Number tiles
Plain list
- Bold lead-in. Then the rest in body color.
- No bullets. Hairline dividers do the work.
- Tags. mono pill muted
Space, depth, motion
Space
Content max 1120px. Sections clamp(64px, 9vw, 120px) apart, separated by a hairline. Two-column sections split 5/7 and collapse under 860px. One idea per section.
Depth
Two levels: the page, and framed figures or hovered cards, which get one soft shadow. No inner shadows, no glass, no stacked blurs.
Motion
One animated element per site: the knowledge-base graph. Reveals fade 12px over 0.6s on a soft ease. Numbers count up once, 0.7s. All of it stops under prefers-reduced-motion.
Voice
Always, never.
Always
- First person, short sentences.
- Numbers over adjectives; a date or a count on every claim.
- Say what a thing is, then what it did.
- Say what a thing did, with a number, and stop.
- Choose the quieter option when the file is silent.
Never
- Em dashes. Emojis. Superlatives.
- Quotes from executives or vendors.
- Dollar figures for company spend; percentages only.
- Private hostnames, family or friend names, client names, partners named in a commercial relationship.
- Hero slogans, second accent colors, stock photos, icons for their own sake.
Agent prompt
What an AI reads before it touches this site.
Build the page using DESIGN.md. Use the tokens as CSS custom properties exactly as named. Fraunces for display, Inter for body, monospace for labels. Warm paper background, one green accent, hairline rules, no boxes unless the component list says so. First person, plain English, no em dashes, no superlatives, no dollar spend figures. Every case page follows: What it was, What I did, What it produced. Verify at 1440 and 390 wide, and check prefers-reduced-motion. If a design choice is not covered here, choose the quieter option.