Design System & Technical Specs
The design decisions that make every Strad Pro screen feel like one premium, considered product — colors, type, spacing, components, motion, and layout. Nothing here is exotic; the goal is consistency and restraint.
Colors
Color carries meaning, not decoration. The shell is deep navy, the one brand accent is antique brass, and the canvas is a warm paper. Green and red are reserved strictly for gains and losses. Everything else is ink on paper.
Typography
One typeface — Inter — in weights 400–800. Numbers are the hero of a wealth product, so primary figures are large and use tabular numerals so columns line up. There is a legibility floor: body and secondary text sit at 14px, the smallest labels at 12px, and nothing on screen is smaller. Sizes are always whole pixels — no half-pixel values.
Spacing & Layout
An 8-pixel rhythm runs through everything — padding and gaps are multiples of 8 (most often 16, 24, and 32). Generous padding and breathing room beat density.
- • Page gutters at 32px; content max-width keeps line length readable.
- • Card padding 20–28px — never cramped.
- • No hollow cards. Fill height with a chart, or let cards size to their content — never a stretched empty box.
- • Vary structure by content — don't reach for a grid of identical cards on every page.
Shape & Elevation
Cards use a 14–16px corner radius, a single 1px hairline border at ~7% black, and a soft, layered shadow. Hover lifts a card a single pixel — restrained, never bouncy.
Components & Treatments
A small, consistent kit. The most important rule: adding and editing always happen in a right-hand slide-out panel — centered modals are reserved for read-only previews.
Motion & Interactivity
Motion is quiet and purposeful — it confirms, it never distracts.
Layout Principles
Each screen picks the layout that fits its data — a ledger for accounts, a timeline for estate documents, a kanban for risk issues, a per-member profile for employment and health, a dashboard for allocation and giving. Avoid repeating one card grid everywhere.
Wherever data is per-person, a row of member chips re-scopes the whole screen to one individual — employment, health, accounts, insurance, taxes, and asset ownership.
The most important figure on a screen is the largest thing on it, set in tabular numerals with a small eyebrow above and context below.
A single navigation shell (the navy header + sidebar) wraps every page, so navigation and identity never drift between screens.
Accessibility & Touch
- • Touch targets are at least 44×44px on coarse pointers (iPad).
- • Legibility floor — body & secondary at 14px, smallest labels 12px, whole-pixel sizes only.
- • Ink-on-paper contrast for primary text; color never the only signal.
- • Visible focus rings (brass) on inputs and controls.
Strad Pro Design System.