Open1031 Style Guide
The design-system reference for the Open1031 redesign — color tokens, the Inter type scale, spacing and radius, and live components. The Existing vs Redesigned section below shows, element by element, how the redesign evolved the live app — and where it deliberately kept what the founder already liked. Everything renders on the real app theme (app-theme.css). Dark is the default; toggle to verify both modes.
Existing vs Redesigned
Where the redesign actually evolved the live app, the Current (today's shipped UI) and the Redesigned treatment are shown side by side. Everything renders on the same theme tokens — the redesign uses the real app theme, it does not fork it. Where the redesign deliberately kept the current design, that is called out honestly.
Hub cards
The dashboard's headline element. The redesign keeps the card, the per-hub color, and the progress bar — and adds a soft colored glow in each hub's own color so the active journey reads as "lit up."
Flat card, thin top accent line, resting shadow-sm. The color lives only in the accent, icon, and bar.
Same card, same color token — plus a soft glow in the hub's own color and a hover lift. Glow is driven by a --hub-glow token (no raw hex on the element). Hover the card to see the lift.
1031 Exchange Timeline
The founder liked the existing connected phase-node timeline, so the redesign faithfully keeps it. The node + connecting-rail concept is identical; the redesign only adds a soft glow ring and a gradient rail fill. This is a "kept, not replaced" case.
Connected phase nodes with done / now / pending states — the element the founder approved.
Same structure, kept on purpose. Only additions: a glow ring on each node and a gradient progress rail. No new component was invented.
Metric tiles
Dashboard summary tiles (Days to identify, escrow balance, hubs completed). The redesign adds an icon chip and a progress bar for at-a-glance scanning; values and tokens are unchanged.
Label, value, sub-label. Functional but visually quiet.
Adds a Lucide icon chip, a progress bar, and a hover lift. Same value, same theme tokens — more scannable.
Buttons
Button shape, size, and the teal primary are shared. The redesign adds a subtle hover state (color shift + focus ring); geometry is unchanged.
shadcn button, teal primary, slate outline. Static fill.
Same component + mandatory icons. Every button carries a leading Lucide icon. Hover for the darker-teal transition and focus ring.
Badges & status pills
The redesign introduces tinted, bordered status pills with Lucide icons for deadline/escrow states — richer than the flat badge, while keeping the original badges for inline labels.
Solid / secondary / outline badges. Color but no icon, no state semantics.
Adds icon + tint + border semantic pills for success / warning / critical / info. Original badges still ship for inline labels.
Neela tip
Neela's in-product guidance. The redesign gives her a canonical gradient avatar and a teal-tinted tip card so her voice is visually distinct from system copy.
You have 14 days left to identify your replacement property.
Generic muted callout with a chat icon — not visibly "Neela."
You have 14 days left to identify. Paste a listing link and I'll pre-fill the property details for you.
Branded assistant. Gradient "N" avatar with spark, teal-tinted card, named voice. Open1031's assistant is now visually identifiable.
Color tokens · Shared foundation (unchanged)
Brand teal is the single primary. Navy is the deep-slate brand anchor used for dark surfaces and high-contrast type. Neutrals are the shadcn slate scale; semantic colors signal success, warning, and critical states.
Brand
Neutral slate scale — light surfaces
#fff
#f1f5f9
#e2e8f0
#64748b
#0a1120
Neutral slate scale — dark surfaces
#0a1120
#1e293b
#1e293b
#94a3b8
#f8fafc
Semantic
Per-hub colors
From the app HubCard COLOR_MAP. Applied via token classes only — never raw hex on elements, never bg-${'{'}color{'}'} interpolation.
Typography · Shared foundation (unchanged)
Inter, with feature settings "rlig" 1, "calt" 1. Tight negative tracking on large headings; relaxed 1.6 leading on body. Minimum body size is 16px.
Spacing, radius & shadow
Spacing scale (4px base)
Border radius
Shadows
Components
Every component in the design system, rendered live on the real app-theme.css and labeled with its class / token name. Buttons, inputs, containers, data, feedback, and brand/AI — the full set. See the component checklist at the end for completeness.
Buttons
Variants × sizes × states. Maps to the app Button (variant = default / secondary / outline / ghost / destructive / link; size = sm / default / lg). Every button must include a Lucide icon.
aria-label. No FontAwesome, no Heroicons, no emoji. This rule applies in both light and dark mode — icon and label must both be legible at WCAG AA contrast.Variants — each rendered with a Lucide icon
Sizes — each with a leading icon
States — resting · hover · disabled · loading
Icon-only — must carry aria-label
All variants with icons — leading (create/confirm) and trailing (navigate)
Cards
Badges & pills
Status & deadline pills
Phase labels
Inputs & selects
Text, select, textarea, search, and the masked SSN field. Maps to the app Input, Select, Textarea, and Label. SSN is masked to last-4 — never raw NPI.
Checkbox · radio · switch
Tabs
Modal
Confirm property identification
Neela tip card & avatar (spark agent with eyes + orbiting task-moons)
You have 14 days left to identify. Paste a listing link and I'll pre-fill the property details for you.
Timeline nodes
Hub cards
The dashboard's headline tile, one per hub color, each with a soft glow in its own color. Glow is driven by a --hub-glow token — never raw hex on the element. Hover to see the lift. The last card shows the locked state.
Section card
Header (icon + title + sub) over a body. Used to frame a labeled region inside a hub or dashboard.
Dropdown menu
Maps to the app DropdownMenu. Shown open for review.
Accordion
Data table
Header row, hover rows, tabular-numeric money column, inline status pills.
| Exchange | Exchanger | Phase | Escrow | Status |
|---|---|---|---|---|
| EX-2026-0047 | Matt Belcher | Identification | $850,000 | 14d to ID |
| EX-2026-0041 | R. Okafor | Purchase | $1,240,000 | On track |
| EX-2026-0038 | S. Nakamura | Disbursement | $612,500 | 2d to close |
Progress & countdown
Standalone progress bar (also used inside hub/metric cards) and the deadline countdown.
Feedback — toast · alert · empty · skeleton
Toasts
Alerts / banners
Paste a listing link and Neela will pre-fill the details, or add a property by hand.
Brand — logo lockups
Real logo via <img> only — logo.png on light, logo_white.png on dark. Never a fake mark. The co-brand lockup pairs the Open1031 logo with a partner QI mark for white-label.
logo.png · on light
logo_white.png · on dark
The mark is the filled doorway — never the stroked-arc approximation, never a re-drawn SVG. Full lockup at ≥ 22px rendered height in headers and footers; below that, crop to the doorway icon alone with an overflow:hidden span (the mobile .m-mark technique). Keep clearspace of at least the doorway’s own width on every side. The two PNGs carry different intrinsic padding (712×288 light vs 772×245 dark), so always set an explicit height per asset — the light asset needs ≈1.3× the dark asset’s CSS height to render the same visual size; never trust intrinsic size to match.
AI — Neela launcher-orb (canonical round FAB)
The round launcher orb that opens Neela. 58px circle with the canonical spark-agent SVG inside (eyes + orbiting moons), a green presence dot and the tooltip "Chat with Neela". The orb is the avatar disc itself — sapphire radial in dark, mint radial in light — never teal: the spark gradient is teal-led and disappears on a teal ground. The mark is always the faithful NeelaMark — spark, eyes and catchlights, orbit ring and task-moons. Never a letter-N disc, never a generic four-point sparkle or robot glyph, never a flat indigo puck.
Component checklist
Every category in the design system, rendered live above. This is the completeness contract — if a primitive ships in the app, it appears in this guide.