Brand and design system for moime.app
Token strategy (3-tier architecture, dark mode as semantic values), enterprise-grade structure (asset audit, documented decisions), and AI-integrated workflow.
The brief
Give moime one identity across the marketing site and the product, for design-conscious working women who expect a modern, simple and quietly luxurious feel. The product already shipped on a token set inherited from another project, and its logo was live text.
What I owned
- Direction, naming and trademark risk calls
- Logo selection and small-size validation
- Token architecture for light and dark themes
- Component specs and the governance model
- Audit of the existing codebase and the implementation brief for an AI coding agent
Key decisions
Each choice with the options on the table and the reason it won. Most of them were settled by testing at real sizes, not by preference.
Logo typeface and weight
Weight test at the real mobile header size (22px): Book 400 was chosen because it held the serifs at small sizes; lighter weights (XLight 250, Light 300) broke when the stems became sub-pixel.
Favicon construction
At browser-tab size (16×16 pixels), the moime wordmark becomes illegible. The favicon uses a standalone 'm' mark pixel-drawn at 16px to keep 2px stems on whole pixels. Auto-scaling the outline blurs every stem.
Token architecture
Three tiers: primitive (hex values), semantic (CSS variables reading primitives), component (reading semantic only). Dark mode is a second set of semantic values, not a second set of components. This keeps the token file short and makes themes predictable.
Asset audit
Before designing tokens, I read the production codebase to see what the UI actually depended on.
The product reads colour, type and shape from about thirty custom properties. Overriding their values in one file moves the whole UI onto the brand without a rename migration, and leaves room to introduce brand-named aliases later.
Colour tokens
Three tiers. Components read semantic tokens only, so a theme is a second set of semantic values, not a second set of components.
Primitives
#F6F1E8
#FBF8F2
#EAE2D4
#DCD3C4
#6E655A
#4A443D
#1A1816
#8A6A47
WCAG contrast checked in both light and dark modes. Every text token meets AA against its background.
Typography
Archer appears only in the outlined logo. The web stack is free to self-host: a serif for voice, a sans for work, a mono for metadata.
Space, shape, motion
A 4px scale, square corners and hairlines, and short motion with no overshoot.
Spacing runs on a 4px base: 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128. Radius: 0 (square corners everywhere). Borders: 1px solid. Motion: 120–200ms, cubic-bezier(0.2, 0, 0, 1). No bounce, no overshoot.
Logo
An outlined wordmark with fixed sizes for the places it appears smallest.
Favicon
A set of sizes from 16×16 to 512×512, plus the pixel-perfect 16px comparison showing how much detail survives.
16×16
32×32
48×48
192×192
512×512At browser-tab size (16×16), the moime m is still clear. The dot stays visible at one pixel. Scaling the outline blurs every stem; the pixel-drawn version keeps 2px stems on whole pixels.
Button
Primary, secondary and text buttons in two sizes.
Primary for the main action. Secondary for alternatives. Text button for tertiary actions. Square corners (radius 0), 1px borders, 120ms hover transition.
Text input
A labelled field with helper and error text. The handle field shows the prefix and validates as you type.
48px height, 1px border, label above, helper text below. Error state: border becomes danger colour, helper text turns red.
Checkbox, radio, switch
Selection controls with whole-row hit targets.
Checkbox for independent options saved with a form. Radio for one of a few visible choices. Switch for a setting that applies immediately. All have 20px control size, 1px borders, and labels with 48px minimum tap targets.
Tabs and tags
Tabs switch views in place. Tags filter and label.
Up to four tabs. Active tab: ink text and a 1px underline. Tags: outline for filters, filled when selected. Both use square corners and no icons.
Feedback
Alerts, toasts, modals and dialogs for success, errors, and confirmations.
Alerts and toasts
Modals and dialogs
Centered overlay with a scrim. Action buttons (primary + text cancel) at the bottom. Escape key or outside click to dismiss.
Cards
Preview cards for links, templates, and content items.
16:9 image, title and description. Raised paper background, 1px rule border. Hover lifts with a subtle shadow.
Header and footer
Site navigation and global footer with wordmark sizes specified for mobile and desktop.
Header
MenuMobile: 14px wordmark height. Desktop: 17px. Always ink background with paper wordmark.
Footer
Mobile: 11px wordmark height. Footer always ink background.
Governance
Where the truth lives, how it changes, and what it must never touch.
Versioning: patch (value changes), minor (new token), major (rename/removal with alias first). Quality gates: AA contrast, 375 and 1280 screens, light and dark, visible keyboard focus. Token file is the source of truth; documentation follows.
AI workflow
People make the calls, AI produces options and evidence, and a coding agent implements from a brief written for it.
- Defines the problem
- Decides the direction
- Approves in production
- Owns the outcome
- Generates options
- Measures tradeoffs
- Surfaces evidence
- Documents rationale
- Reads the token file first
- Implements from brief
- Ships to production
- Checks quality gates
Making the system legible to agents
The decisive move was writing the rules down as hard constraints so a tool built by a person or an agent comes out looking like the product. The token file ships as JSON; a one-page brief tells an agent the rules before it writes a line.