A calmer public presence
Editorial warmth, practical clarity, and trust at every step.
The public system should feel less like a collection of pages and more like one consistent conversation: grounded headlines, supportive copy, focused actions, and proof that real experts are close by.
Start with the experience principles first, then let buttons, inputs, cards, and section shells inherit the same voice.
Ideas
What this page should communicate
The public design-system page should explain the character of the brand and the structure of the experience, not read like a page-by-page audit.
Editorial warmth
Lead with serif headlines, soft surfaces, and generous spacing so expertise feels human and approachable.
Guided clarity
Keep every section focused on one clear next step, with concise support copy and a disciplined CTA hierarchy.
Trust in the layout
Place proof points, local signals, and reassuring microcopy close to actions instead of isolating them below the fold.
Reusable structure
Build a few calm, repeatable modules that can scale across hero, content, office, and seminar pages without drift.
Foundations
Brand tokens and typography
The Figma direction is calm, editorial, and quietly premium: warm surfaces, restrained borders, serif display, and clear sans-serif interface copy.
Color tokens
Map these into both Tailwind and the MUI theme.
Typography
Display copy should feel editorial. Interface copy should stay clear, compact, and easy to scan.
Editorial confidence with a human point of view.
A few strong modules can carry the whole system.
Large body copy should explain the value plainly and make the next step feel easy.
Supporting copy should stay compact, practical, and rooted in reassurance.
EDUCATION-FIRST ESTATE PLANNING
One calm CTA language
Primary, secondary, and subtle actions should feel related, not like separate page-level decisions.
Proof belongs near intent
Avatar groups, inline trust messages, and stat cards work best when they reinforce the action they support.
Foundation before variation
Lock tokens, spacing, and typography first, then let hero, card, and section variants inherit the same rules.
Consistency across journeys
Office pages, seminar pages, and educational pages should feel like chapters in one story, not different products.
Modules
Reusable patterns, not one-off pages
The system becomes easier to scale when hero, content, and reassurance patterns all feel like variations of the same design language.
Hero systems
Lead with clarity, then invite action.
The hero should combine editorial voice, nearby proof, and one focused action so the visitor immediately understands the value and the next step.
Content modules
Repeat a single card and section language.
Educational stories, service explainers, and office content should all reuse the same shells, spacing, and typography rhythm.
Trust signals
Build reassurance into the composition.
Signals like local expertise, attorney-led guidance, and measurable outcomes should be treated as core modules, not decorative extras.
Outcome
A shared language for every public touchpoint
This page should show how the public system thinks: a steady rhythm of warm surfaces, clear actions, and trust-building modules that can be recombined anywhere.
What this page should showcase
Keep the emphasis on the ideas the team should carry forward.
Show the public system as a set of repeatable ideas, not a checklist of one-off widgets.
Keep every section anchored in warmth, trust, and practical forward motion.
Let the page illustrate how modules combine, so future marketing pages can borrow the same rhythm.
Use the same foundation as the eventual bridge into shared public and app-facing primitives.
System snapshot
A small proof of the shared language.