01
Good design is innovative
Innovation serves use — never novelty for its own sake.
Bevel Keys: Local vault + chamfer signature — not another purple cloud clone.
01 — Dieter Rams
Ten principles, mapped to Bevel Keys
We design like a good tool: useful, honest, and as little design as possible. Each Rams principle has a Bevel Keys rule of thumb.
02
Good design makes a product useful
Primary functions first; strip anything that doesn’t help.
Bevel Keys: Unlock, find, fill, backup — one job per Settings pane.
03
Good design is aesthetic
Beauty comes from clarity and proportion, not decoration.
Bevel Keys: Graphite + steel + one copper signal. IBM Plex, not display fonts.
04
Good design makes a product understandable
Structure should explain itself.
Bevel Keys: Same field boxes on Login, Card, Misc Info; honest backup copy.
05
Good design is unobtrusive
Products are tools — they leave room for the user’s content.
Bevel Keys: Chrome stays quiet; vault data is the hero.
06
Good design is honest
Don’t promise what you can’t deliver.
Bevel Keys: “On your Mac” — no fake sync theater on the homepage.
07
Good design is long-lasting
Avoid fashion that ages overnight.
Bevel Keys: Chamfer + copper endure; skip trend gradients and glow stacks.
08
Good design is thorough to the last detail
Care shows in small things.
Bevel Keys: Focus rings, selection color, equal icon columns, Escape vs Return.
09
Good design is environmentally friendly
Conserve resources — including attention.
Bevel Keys: Local-first: no mandatory cloud account or sync servers to babysit.
10
Good design is as little design as possible
Back to purity — less, but better.
Bevel Keys: One accent. One cut. Merge duplicate buttons. Cut redundant copy.
02 — Logo
Mark and wordmark
Cream tile, charcoal keyhole plate, one beveled corner with a copper indicator. Files: bevel-keys-mark.svg, bevel-keys-logo.svg.
Do
- Keep clear space ≈ height of the keyhole circle.
- Use the mark alone in favicons, app icons, nav (30×30).
- Pair nav wordmark in IBM Plex Mono, uppercase, tracked.
Don’t
- Round all four corners — the bevel is the brand.
- Recolor the copper indicator to purple or neon.
- Stretch, outline, or drop-shadow the lockup.
03 — Icons & assets
App, extension, marketing
Mac app icons, Chrome/Brave extension icons, Open Graph art, and the homepage product shot.
Mac app icon
/assets/brand/appicon/
Browser extension
/assets/brand/extension/
Open Graph
Product screenshot
UI feature icons
Inline SVG strokes on copper.
04 — Light & dark
Two surfaces, one system
Dark (ink) is the default marketing and instrument body. Light (paper) is the warm inset — app-like chrome, paper sections, print-friendly lockups. Copper stays the signal in both.
Dark · website default
General
Backup
Password
github.comdev@bevelkeys
Change Password
Cancel
Light · paper / app chrome
General
Backup
Password
github.comdev@bevelkeys
Change Password
Cancel
| Role | Dark | Light |
|---|---|---|
| Background | --ink #121310 | --paper #F1EAE0 |
| Panel | --ink-2 #171814 | --paper-2 #E7DFD1 |
| Heading | --text-1 #F4F1EA | --paper-ink #201E19 |
| Body | --text-2 #C7C9C2 | #4A463D |
| Accent | --copper #FF7A3D | --copper-2 #E35F22 |
| Hairline | --line #34362E | --paper-line #D3C9B6 |
05 — Color
Graphite, steel, copper
Dark instrument by default. Paper sparingly. Copper is the only loud signal — CTAs, eyebrows, focus, selection.
Surfaces
Text & accent
06 — Typography
IBM Plex family
IBM Plex Sans for UI and headings. IBM Plex Mono for eyebrows, nav brand, step labels, tokens.
Display / H1 · Plex Sans 650
Passwords that stay on your Mac
Body · Plex Sans 400 · 1rem / 1.6
Bevel Keys keeps your logins in an encrypted vault on your computer — no Bevel Keys account to babysit.
Eyebrow · Plex Mono 500 · tracked uppercase
Local-first password manager for Mac
07 — Chamfer
The signature cut
Buttons, panels, and cards clip one top-right corner. Default --bevel: 18px; small --bevel-sm: 10px.
sm 10
default 18
hero 28
Prefer clip-path bevels over large border-radius stacks. Do not mix full-round pills with chamfered CTAs on the same surface.
08 — UI kit
Website & product patterns
Reuse site classes for marketing. Product screens mirror the same copper signal, visible fields, and quiet chrome — in light or dark.
Marketing controls
Panel / card
Hairline border, ink-2 fill, single chamfer. Feature callouts and pricing tiles.
Paper inset
Warm paper sparingly
Invert the instrument: cream ground, dark type, copper-2 eyebrows.
On-paper buttonProduct UI specimens
Same structure in both themes: tabs, labeled fields with visible boxes, list rows, banners, primary + ghost actions.
Dark UI
Title
Website
Username
Password
Cancel
Add Login
Light UI
Title
Name on card
Number
Security code
Cancel
Save
09 — Voice
How we speak
Product name: Bevel Keys (two words, title case). Never “BevelKeys” in UI copy.
Tone: Direct, calm, technical enough for builders. Prefer “on your Mac” over cloud theater.
Avoid: Growth-hack urgency, emoji clusters, “AI-powered,” purple gradients, Inter/Roboto as brand fonts.
10 — Token index
CSS variables
Layout: --max: 1180px, --gutter: 32px, spacing --sp-1…--sp-10.
| Token | Value | Use |
|---|---|---|
--ink | #121310 | Dark page background |
--ink-2 | #171814 | Dark panels |
--paper | #F1EAE0 | Light surface |
--text-1 | #F4F1EA | Dark headings |
--paper-ink | #201E19 | Light headings |
--copper | #FF7A3D | CTA / focus (dark) |
--copper-2 | #E35F22 | CTA / eyebrow (light) |
--font-display | IBM Plex Sans | UI + headings |
--font-mono | IBM Plex Mono | Labels / brand text |
--bevel | 18px | Default chamfer |
Assets: /assets/brand/ · Styles: /assets/css/style.css · Rebuild: python3 website/build.py · Open: /brand/