Locked changes
- Accent is ink green, not ink blue.
- Body is a sans at 17px, not a print-size serif.
- Overlines are tracked sans, not small caps.
- Tags take a green tint. The paper stays warm.
Design brief
Warm paper, one green.
A page should feel like a typeset document on warm paper, then like a modern site. Paper, whitespace, and one deep green do the branding.
Size and space create hierarchy. Color does not.
17
Body, px
500
Heading weight
5
Accent cap, %
Color
Warm neutrals, one green
Ink green is the only chromatic brand color. Neutrals stay yellow-brown. The red is for errors, not for branding.
Canvas
- Parchment
- Ivory
- Warm sand
- Near black
- Dark warm
- Olive
- Stone
- Hairline
Accent
- Ink green
- Pressed green
- Text on green
- Quiet tag
- Default tag
- Error
Dark
- Dark base
- Dark surface
- Green on dark
Type
Serif for display. Sans for reading.
Source Serif 4 carries headlines, big numbers, and pull quotes, always at weight 500. Source Sans 3 carries everything you read and click. Display drops to 36px below 768.
Warm paper, one green.
A typeset page, then a site.
Section title without decoration.
A named part of a section.
Body text is a sans at screen size. It does not borrow the headline face, and it does not shrink to a print point size.
Captions and figure notes sit in olive, not in the accent.
Section label
Components
Flat, named, and few
One primary button in a real view. The extra primary below is disabled so its state is visible. Nothing else gets a shadow.
Buttons
Link
The rules sit in DESIGN.md. Links stay ink green, with the underline 3px off the text.
Tags
Quiet
Default
Field
Error
Enter a face.
List
- Parchment page. Never white.
- One accent, used rarely.
- Sans for reading. Serif for display.
Code
--bg: #F5F4ED;
--accent: #1C3D32;
body: "Source Sans 3";
display: "Source Serif 4";Radius
Space
- 4 and 8. Inline gaps and tag padding.
- 12 and 16. Inside a component.
- 24 and 32. Between components. Card padding is 24.
- 48 and 64. Under a section title.
- 96. Between major sections.
Break
Whitespace separates regions.
A hairline only when the boundary has to be explicit.
Menu
The only shadow on the page. Menus and dialogs, nothing else.