The aceiousdesign language.
Monochrome, precise and quiet — and one red diamond. The neutrals do the work; Ace Red is kept for the diamond, the one action on a screen, and focus. Everything here is generated from the same two files the website is drawn from.
Proportions
The mark is measured, not drawn by eye. Everything is a multiple of the stroke weight W, so it can be redrawn at any size and still be the logo.
W = stroke weight
- Diamond
- 1 W a side, turned 45° — flush with the stroke
- Gap
- 0.2 W between each stroke and the face it points at
- Line
- Each tip lies on the diamond’s diagonal: one centreline runs through all three pieces
- Clear space
- The diamond's height, on every side
Colour
One accent. Endless neutrals. Click a swatch to copy it.
Semantic roles
Interfaces are written against roles, not values, so light and dark are one stylesheet.
| Role | Light | Dark |
|---|---|---|
| --ds-bg | #FAFAFA | #0A0A0A |
| --ds-surface | #FFFFFF | #111111 |
| --ds-subtle | #F5F5F5 | #141414 |
| --ds-fg | #0A0A0A | #EDEDED |
| --ds-muted | #4D4D4D | #A1A1A1 |
| --ds-faint | #6B6B6B | #8F8F8F |
| --ds-line | rgba(10, 10, 10, 0.08) | rgba(255, 255, 255, 0.09) |
| --ds-line-strong | rgba(10, 10, 10, 0.16) | rgba(255, 255, 255, 0.18) |
| --ds-accent | #E11D2E | #FF2D3D |
| --ds-on-accent | #FFFFFF | #FFFFFF |
| --ds-invert | #0A0A0A | #FAFAFA |
| --ds-on-invert | #FAFAFA | #0A0A0A |
| --ds-success | #16A34A | #22C55E |
| --ds-warning | #D97706 | #F59E0B |
| --ds-info | #2563EB | #3B82F6 |
Typography
Poppins carries the voice — headings, body, the wordmark. Geist Mono carries the detail: labels, counters, section numbers.
- display56/64 · 700Build what’s next.
- h140/48 · 700Build what’s next.
- h232/40 · 600Build what’s next.
- h320/28 · 600Build what’s next.
- body16/24 · 400Build what’s next.
- small14/20 · 400Build what’s next.
- caption14/20 · 500Build what’s next.
- label12/16 · 500Build what’s next.
Space and shape
An 8 px grid with a 4 px half-step, a 12-column layout at 1200 px, and three radii.
Components
The foundation every aceious product starts from.
Motion
One curve: fast out, long settle. Motion explains a change or answers a hand; it never decorates, and it always stops for a visitor who asked for less.
cubic-bezier(0.22, 1, 0.36, 1)
- instant120 ms
- quick200 ms
- base400 ms
- slow700 ms
Usage
- Do
- Keep red for the diamond, the primary action and focus
- Set the logo in Ace Black on light grounds and Soft White on dark
- Leave the diamond's height clear on every side
- Write interfaces against semantic roles, not hex values
- Don’t
- Put a second red thing on a screen
- Recolour, outline, rotate or stretch the mark
- Let a stroke touch the diamond
- Animate anything in above the fold
Applications
App icons, the social avatar and banner, and the link card — all built from the same mark.
