Yoshi / Product design system
A home for the next
Yoshi design system.
Build repeatable components and screen patterns from the approved agency designs, then use them to create the next product screen.
Home & Briefs · Interactive previews ready
This page is the internal setup catalog. Its styling is not the extracted Lucid Dreaming visual system. Home, the Briefs list, Cash sweep cover/details and NVDA cover have reference previews. Downloaded Figma files and PDFs are now available; full mobile migration is awaiting scope review.
Review the full mobile redesign inventory ↗ · 58 flow groups, source coverage, and decisions needed before implementation.
Start with Home
Home / Default, full-scroll content, and compact navigation, built from the Figma tool response with local assets.
Open interactive Home ↗ · Explore foundations & components ↗
Current PP Neue Montreal preview fonts are accepted for now. Exact agency equivalence remains unverified. Prototype dialogs and feedback states are proposed extensions.
Continue with Briefs
Flat list, two brief covers, and Cash sweep details, composed from shared patterns.
Open Briefs ↗ · Cash sweep ↗ · NVDA earnings ↗ · Full detail reference ↗
Review iMessage action cards
Eleven proposed action cards, static and interactive layouts, lifecycle states, and app-review walkthroughs.
Try Automation details
A proposed composition using the extracted detail patterns, settings and content states. Pause and resume Cash sweep, change notifications, and inspect activity states.
Open Automation details ↗ · Composition and state contract ↗
Source of truth
Loading reference links…
Review Invest discovery
The existing Trade landing in Lucid: search, market movers, holdings and sectors. Proposed patterns for review; light only.
Open the first pattern batch ↗ · Your holdings ↗ · Scope and decisions ↗
Review security detail
Price charts, position details, activity and stock/ETF/crypto research in the Lucid system. Proposed composition using the existing mobile behavior.
Transfer
The downloaded agency Transfer board, connected as a local sample flow.
Open Transfer ↗ · First-time account state ↗ · Sources and scope ↗
Trade entry and approval
Buy, sell and stop-loss orders, agency-informed review and submitted states, persistent navigation and return to the launching security.
What we’re extracting
Home and four Briefs screens have been extracted through Figma’s design tools. Chat, additional money-movement rails and Desktop Home remain pending. Transfer amount entry, account selection, bank connection, review and submission are available. Trade entry and approval now adapt the downloaded Transfer and Approvals boards.
| Source screen | Component candidates | Status |
|---|
Evidence before assumptions
- Observed
- A value or treatment inspected directly in the source.
- Inferred
- A reusable rule derived from consistent examples.
- Proposed
- An internal extension for a new product need.
Open extraction decisions
When we need a new screen
- Choose the pattern. Start with a documented overview, list, detail, conversation, or transaction review.
- Compose the components. Use the shared controls, content treatments, and semantic tokens.
- Make the gap explicit. Propose the smallest extension when the system cannot express the task.
- Test and review. Verify interactions, relevant states, and narrow layouts. Add accepted decisions back into the system.
First extension exercise: Automation details. Now available as a proposed composition using the extracted components. Try the exercise ↗