Cityboat: a DESIGN.md example
Calm product UI, three bright accents. Below is what this DESIGN.md looks like as a style guide and a landing page, followed by the full file. Cityboat is a made-up brand by Township.
As a style guide
Style guide
Cityboat
Calm, precise product UI. Neutral surfaces, three bright accents.
Color
Ink
#18181B
17.0:1 on bg
Muted
#71717A
4.63:1 on bg
Surface
#FAFAFA
1.00:1 on bg
Card
#FFFFFF
1.04:1 on bg
Border
#E4E4E7
1.22:1 on bg
Teal
#60C0C0
2.05:1 on bg
Coral
#E0A080
2.12:1 on bg
Purple
#604080
7.91:1 on bg
Type
h1 · Hanken Grotesk · 1.875rem · 600
Sphinx of black quartz, judge my vow.
h2 · Hanken Grotesk · 1.125rem · 600
Sphinx of black quartz, judge my vow.
body-md · Hanken Grotesk · 1rem · 400
Sphinx of black quartz, judge my vow.
label · Hanken Grotesk · 0.75rem · 500
Sphinx of black quartz, judge my vow.
mono · IBM Plex Mono · 0.75rem · 300
Sphinx of black quartz, judge my vow.
display · Hanken Grotesk · 1.875rem · 600
Sphinx of black quartz, judge my vow.
section / h2 · Hanken Grotesk · 1.125rem · 600
Sphinx of black quartz, judge my vow.
body · Hanken Grotesk · 1rem · 400
Sphinx of black quartz, judge my vow.
Components
Card title
Cards use the surface color, border and radius from the file.
Space and shape
sm · 8px
md · 16px
lg · 32px
sm · 6px
md · 12px
Notes from the file
Overview
Cityboat is calm and precise: a zinc neutral field, white cards, and three accents (teal, coral, purple) used sparingly, never as full-bleed rainbow UI. People check it in a hurry, so type is large, contrast is high and every screen does one job.
Colors
Typography
Layout
- Max width: 1280px for app grids, 1024px for single-column pages
- Cards: 12px radius, zinc-200 border, white fill
- One job per section: one headline, one short line, then the content
Components
- Primary Button: Ink fill, white label, 6px radius. Hover zinc-800.
- Secondary Button: White ground, zinc-300 border, ink text.
- Chips: Rounded-full. Selected = ink fill.
- Accents: Teal, coral or purple for small marks: dots, chart series, focus rings.
Do's and Don'ts
- Do keep backgrounds zinc-50 and cards white.
- Do use monospace for times and numbers.
- Don't use pure black (#000000). Ink is #18181B.
- Don't use gradients, glow or emoji clusters. Content carries the page.
As a landing page
New in 2026
Everything your team ships, in one calm place.
Calm, precise product UI.
No card needed. Cancel any time.
Plan, review and ship without the status meeting.
Every request, file and decision lives next to the work it changed, so nobody asks where things are.
See how it works →Fast by default
Pages load before you finish clicking.
Private by design
Your data stays yours. Full stop.
“We replaced four tools and a weekly meeting. The team noticed in a day.”
Dana Ortiz, Head of Operations at Bramblewood
Starter
$0
For trying it out
Team
$24
Per seat, per month
Enterprise
Let’s talk
SSO, audit logs, SLAs
Ready when your team is.
The DESIGN.md file
---
version: alpha
name: Cityboat
description: Calm, precise product UI. Neutral surfaces, three bright accents.
colors:
ink: "#18181B"
muted: "#71717A"
surface: "#FAFAFA"
card: "#FFFFFF"
border: "#E4E4E7"
teal: "#60C0C0"
coral: "#E0A080"
purple: "#604080"
typography:
h1:
fontFamily: Hanken Grotesk
fontSize: 1.875rem
fontWeight: "600"
letterSpacing: "-0.02em"
h2:
fontFamily: Hanken Grotesk
fontSize: 1.125rem
fontWeight: "600"
body-md:
fontFamily: Hanken Grotesk
fontSize: 1rem
fontWeight: "400"
lineHeight: "1.5"
label:
fontFamily: Hanken Grotesk
fontSize: 0.75rem
fontWeight: "500"
mono:
fontFamily: IBM Plex Mono
fontSize: 0.75rem
fontWeight: "300"
rounded:
sm: 6px
md: 12px
spacing:
sm: 8px
md: 16px
lg: 32px
components:
button-primary:
backgroundColor: "{colors.ink}"
textColor: "#FFFFFF"
rounded: "{rounded.sm}"
padding: 12px
button-secondary:
backgroundColor: transparent
textColor: "{colors.ink}"
rounded: "{rounded.sm}"
padding: 12px
---
## Overview
Cityboat is calm and precise: a zinc neutral field, white cards, and three accents (teal, coral, purple) used sparingly, never as full-bleed rainbow UI.
People check it in a hurry, so type is large, contrast is high and every screen does one job.
## Colors
| Token | Hex | Role |
|-------|-----|------|
| Ink | #18181B | Headlines, primary buttons, wordmark |
| Muted | #71717A | Supporting copy, labels |
| Surface | #FAFAFA | Page background |
| Card | #FFFFFF | Panels, inputs, tickets |
| Border | #E4E4E7 | Card and field strokes |
| Teal | #60C0C0 | Brand accent, highlights |
| Coral | #E0A080 | Warm emphasis, charts |
| Purple | #604080 | Links, focus, dark sections |
## Typography
| Role | Face | Weight | Size |
|------|------|--------|------|
| Display / H1 | Hanken Grotesk | Semibold 600 | 1.875rem, slight negative tracking |
| Section / H2 | Hanken Grotesk | Semibold 600 | 1.125rem |
| Body | Hanken Grotesk | Regular 400 | 1rem / 1.5 |
| Labels | Hanken Grotesk | Medium 500 | 0.75rem |
| Monospace | IBM Plex Mono | Light 300 | 0.75rem (times, numbers) |
## Layout
- **Max width:** 1280px for app grids, 1024px for single-column pages
- **Cards:** 12px radius, zinc-200 border, white fill
- **One job per section:** one headline, one short line, then the content
## Components
- **Primary Button:** Ink fill, white label, 6px radius. Hover zinc-800.
- **Secondary Button:** White ground, zinc-300 border, ink text.
- **Chips:** Rounded-full. Selected = ink fill.
- **Accents:** Teal, coral or purple for small marks: dots, chart series, focus rings.
## Do's and Don'ts
- Do keep backgrounds zinc-50 and cards white.
- Do use monospace for times and numbers.
- Don't use pure black (#000000). Ink is #18181B.
- Don't use gradients, glow or emoji clusters. Content carries the page.
More DESIGN.md examples
- Dramatic Dark, violet, high contrast
- Enterprise Dark mode, cobalt blue, IBM Plex Sans
- Power Black and white, condensed Oswald type
- Neobrutalism Loud yellow, heavy outlines
- Editorial Serif reading type, amber accent
- Cafe Warm browns and cream
- Matrix Monospace, terminal green
- Doodle Hand-lettered and playful
- Blank DESIGN.md template Start your own file
Last updated