Pages
Every page in the template, built with the same design language. Click any to preview.
Home
Landing page with hero, features, and CTAs.
About
Mission, values, team, and company story.
Pricing
Plans, comparison, add-ons, and FAQ.
Changelog
Release notes with filters and search.
Contact
Contact form, offices, and channels.
Login
Email + OAuth authentication.
Signup
Account creation with strength meter.
Forgot Password
Password recovery with email link.
Privacy Policy
Legal page with sticky TOC.
Terms of Service
Legal page with sticky TOC.
Design System
This page — system reference.
404 / Errors
Not found and error states.
Typography
A two-font system: Geist for content and Geist Mono for labels, code, and metadata. Built around clarity, restraint, and quiet hierarchy.
Used for all content, headings, and body text.
Used for labels, badges, code, and metadata.
The quiet force.
Building tomorrow.
Design with intent.
Thoughtful details.
Tools that disappear when you need them most.
We build tools that fade into the background so the work — and the people doing it — can shine.
Used for supporting text and descriptions.
DESIGN SYSTEM · OVERVIEW · V1.0
const value = 'monospace';
Colors
A monochromatic foundation with strategic accents. Built on transparency rather than fixed colors — so it works on any background.
BASE
Foundation surfacesbg-blackPage background
#000000bg-white/[0.02]Card backgrounds
rgba(255,255,255,0.02)bg-white/[0.04]Interactive hover state
rgba(255,255,255,0.04)text-whitePrimary text & buttons
#FFFFFFTEXT
Hierarchy through opacitytext-whiteHeadings, important text
rgba(255,255,255,1.00)text-white/85Body large, emphasized
rgba(255,255,255,0.85)text-white/70Labels, mono text
rgba(255,255,255,0.70)text-white/60Paragraph text
rgba(255,255,255,0.60)text-white/45Muted titles, captions
rgba(255,255,255,0.45)text-white/30Placeholders, very subtle
rgba(255,255,255,0.30)BORDERS
Translucent dividersborder-white/10Default card borders
rgba(255,255,255,0.10)border-white/15Inputs, buttons
rgba(255,255,255,0.15)border-white/20Highlighted cards
rgba(255,255,255,0.20)border-white/40Focus rings
rgba(255,255,255,0.40)ACCENTS
Semantic statesemerald-500Confirmations, success states
#10B981amber-500Warnings, important info
#F59E0Bred-500Errors, destructive actions
#EF4444blue-500Informational states
#3B82F6Spacing
Spacing is rhythm. Our scale follows a 4px base unit, with consistent ratios that create harmony across pages and components.
SPACING SCALE
Based on Tailwind defaultsBORDER RADIUS
Mostly sharp — soft only when intentionalrounded-none0pxSharp edges
rounded-sm2pxDefault — cards, buttons, inputs
rounded-md6pxLarger elements
rounded-full9999pxPills, avatars, switches
CONTAINER WIDTHS
Common max-widths used in layoutsmax-w-md28rem448pxAuth formsmax-w-2xl42rem672pxReading contentmax-w-4xl56rem896pxWide contentmax-w-5xl64rem1024pxArticle sectionsmax-w-6xl72rem1152pxStandard pagesmax-w-7xl80rem1280pxWide layoutsComponent Samples
A preview of the building blocks. Every component is built with the same restraint: sharp corners, transparent borders, and mono labels.
BUTTONS
BADGES
INPUTS
CARDS
Feature Title
A brief description of the feature and how it helps users.
ACCORDION
Every component is built from the same tokens — colors, spacing, typography. Mix and match to create new interfaces without breaking consistency.
TABS
UTILITIES
Important: Use the same spacing scale across all pages to maintain rhythm.
Please enter a valid email address.
Your changes have been saved.
LINKS
This is a paragraph with inline link inside it. You can also have a muted link that brightens on hover.
Action link →← BACK TO MENU