Bookmark card
Title, host, tags, saved-at metadata. Title is the click target.
sre.google · 2d ago
not24get · Design system v1
A restrained, technical system for web + app.
Foundations and components that let marketing, product, and docs stay visually identical — with accessibility and progressive enhancement built in.
01 — Foundations
Color
Ink (surfaces)
Text
Accent + semantic
Accessibility
- Body text on ink-0: contrast ratio ≥ 11:1 (AAA).
- Muted text (slate-500) reserved for metadata; never body copy.
- Accent used for interactive focus, primary CTA, key glyphs only.
- Never color alone: pair with icons or labels for state.
02 — Foundations
Typography
Typefaces
Inter — the working sans
Weights 400 / 500 / 600 / 700
JetBrains Mono
Weights 400 / 500 — for code, tags, metadata
| Role | Size | Spec | Use |
|---|---|---|---|
| Display | clamp(2.25rem, 4.5vw, 4rem) | Inter 600 / -0.02em | Page heroes |
| H2 | clamp(1.75rem, 3vw, 2.5rem) | Inter 600 / -0.015em | Section titles |
| H3 | 1.25rem | Inter 600 | Card titles |
| H4 | 1rem | Inter 600 | List / label |
| Body | 1rem | Inter 400 / 1.6 | Paragraphs |
| Small | 0.875rem | Inter 400 | Secondary UI |
| Mono | 0.75rem | JetBrains Mono 500 | Tags, code, metadata |
03 — Foundations
Spacing & radius
4px base grid
2
4
8
12
16
24
32
48
64
96
Radius
sm · 2px
md · 5px
lg · 12px
xl · 18px
Elevation
Flat
Raised
Overlay
04 — Components
Buttons & inputs
Buttons
Sizes
Inputs
⌘K
#sre
#k8s
#testing
#security
05 — Components
Cards, alerts, states
Success
Saved to Platform engineering.
Warning
This page may have changed since you saved it.
Info
Promoted to shared workspace Ferrata Labs.
Empty state
No bookmarks yet. Save your first link.
Keybindings
- Save link⌘ + S
- Quick search⌘ + K
- New collection⌘ + ⇧ + N
- TagT
06 — Brand voice
Tone, copy, and labels
| Example | Rule | |
|---|---|---|
| Do | Save any link in one click, find it fast. | Use action-led, specific copy. |
| Don't | Reimagining the future of bookmarking. | Avoid abstract claims. |
| Do | Start free · Save link · Create collection | Concrete CTAs. |
| Don't | Continue · Things · Stuff | Vague or playful labels. |
07 — Quality
Accessibility & progressive enhancement
Semantic structure
One h1 per page, landmark roles (header, nav, main, footer), ordered heading tree for screen readers.
Keyboard first
Every interactive element reachable by Tab. Visible focus ring via accent. Skip-to-content on load.
Contrast & color
Body text ≥ 4.5:1 (AA), UI ≥ 3:1. Color never the sole signal — pair with icons or copy.
Motion respect
Transitions gated by prefers-reduced-motion. No autoplay, no parallax that blocks reading.
Progressive loading
HTML renders without JS: hero, text, nav. JS adds search, command palette, live preview.
Forms
Labels are real label elements. Inline validation. Error text announced via aria-live.