src/bmm-skills/2-plan-workflows/bmad-ux/assets/design-example-mobile.md
Quill is designed against the grain of contemporary habit apps. Where most products weaponize the user's calendar with streak counters and re-engagement nudges, Quill insists on something quieter — a daily prompt, a place to write, and the unspoken assurance that today's entry is enough. Showing up is the point, not the streak.
The visual language follows. Calm surfaces in warm off-white (light) or deep ink (dark, the default). Generous breathing room. No chromatic color competing for attention except a single warm tobacco that signals save-and-send. Text-first. Hand-on-paper, not buzz-on-screen.
The palette is restrained on purpose — a writing surface should not compete with the writing.
#FAF9F7) is the primary canvas in light mode. Slightly warm to reduce eye strain and keep the surface from feeling clinical.#1A1B1F) is the dark-mode canvas and the primary body text color in light mode. Quill defaults to dark because most writing happens at night.#A87434 light / #D4A574 dark) is the only chromatic color. Used exclusively for the save indicator and primary action — never for decoration, never for state badges.#E8E4DD light / #2E3036 dark) separates list items at the lowest possible contrast. Anything heavier feels like UI rather than paper.Avoid: red error fills (Quill is a journal, not a form), gradients (the surface is paper), and saturated accent variants — one accent, used sparingly.
Platform conventions are the spec. iOS uses Title 1 / Body / Footnote; Android uses Headline Small / Body Large / Body Small. Dynamic type honored at every level — the largest accessibility setting must still render legibly without truncation.
Headlines are rare. The Today prompt is set in title; everything else is body or meta. No display sizes, no all-caps labels.
Scale: 4 / 8 / 12 / 16 / 24 / 32 px. The largest gaps land between major surfaces; the smallest sit between tightly related elements. Vertical rhythm follows a hard rule: composer breathes, list items don't.
Mobile margins follow platform conventions (iOS 16pt, Android 16dp). Single-column always; modal stacks one level deep, never two.
Quill avoids elevation as a visual device. Cards and composer surfaces sit on surface-raised, distinguished from surface-base only by tone. Shadows are reserved for the rare moment of literal physical metaphor — never for hierarchy. Hierarchy comes from layout and typography, not shadow.
rounded/sm (6px) for inputs, list rows, and small surfaces. rounded/md (12px) for cards and the composer. Nothing fully rounded; no pills, no perfect circles for surfaces. The aesthetic is paper-with-soft-corners, not iOS-button-pill.
Imagery follows container corners exactly.
surface-raised. One per day. Today's prompt in title. Tap to open composer. No icon, no decoration; the prompt itself is the affordance.ink-secondary, never a checkmark icon, never a colored badge.meta, first line of body in body (truncated to one line). Hairline divider only, no fill.| Do | Don't |
|---|---|
| Single accent color, used sparingly on save & primary action | Color-code by sentiment, mood, or category |
Text-only state indicators (Saved.) | Iconography for state (✓, ⚠, ●) |
| Hairline dividers at lowest legible contrast | Card shadows, gradient fills, accent fills behind text |
| Generous vertical rhythm in composer | Compress to fit more on screen |
| Honor platform conventions for navigation | Override platform nav with custom drawer or hamburger |