Design language
Two sharp brackets around a single point: the boundary of what is yours, focused on one thought. Everything contributors, plugin authors and writers need to represent Fundaments.work accurately.
Download
Everything in one archive, or take the files you need. Nothing here is required: if you only need to link to us, link to us.
Everything at once
Profile and social
Lockup
The aperture, then “Fundaments.work” in DM Sans Light, with the lime .work tld. The wordmark is never bold and never italic.
Fundaments.work
Fundaments.work
Colour
One dark base, shared by every product. Acid lime is this product's one accent: the mark, one action per view, a number that matters.
Base
Base
Background
Surface
Panels
Raised
Raised panels
Line
Hairlines
Text
Text and marks
Muted
Secondary text
Accent
Acid lime
Mark, one action per view. One signal per frame.
Sage
Secondary accent, sparingly
Recessed
Inset panels
Type
DM Sans for everything people read. DM Mono for anything that is data: versions, sizes, metrics, timestamps. Two weights, 300 and 400. Hierarchy comes from size and colour.
Aa
DM Sans
Aa
DM Mono
| Display | Sans 300 · −3% |
| Headline | Sans 300 · −2% |
| Body text for reading the interface | Sans 400 · −1% |
| v1.0.0 · MIT · 0 telemetry | Mono 400 |
Rules
Short enough to remember.
Do
- Use the official SVG files, unchanged.
- Write the name as Fundaments.work, with the domain.
- Leave clear space of at least one mark height.
- Keep lime to one signal per view.
Don't
- Round the corners. Zero radius, always.
- Rotate, skew or tilt the mark.
- Type the mark as characters in running text.
- Place it on gradients, photos or drop shadows.
Badges
For READMEs and sites that build on our tools. Copy the Markdown and paste it in.
[](https://fundaments.work)
[](https://fundaments.work/privacy/)