Visual preview for owner review. Open in a browser. Resize to
tablet/mobile to check responsiveness. This is a read-only preview —
no interactivity is wired.
Version 1.0Date 2026-05-17Author Iris, Design System ArchitectBUs covered HR3 Capital · Alta ROI · Cinnabar
LabsMercury Mind No fixed palette — excluded by
spec
Type Scale — HR3 Capital (Instrument Serif + Inter)
Display font: Instrument Serif — used in headings and hero text
text-6xl
60px · tight · bold
Capital.
text-5xl
48px · tight · normal
Private Lending.
text-4xl / H1
36px · tight · semibold
Bridge Loan Program
text-3xl / H2
30px · tight · semibold
Loan Parameters
text-2xl / H3
24px · snug · semibold
Qualification Criteria
UI font: Inter — used in all functional elements
text-xl / H4
20px · snug · semibold
Loan-to-Value Ratio
text-lg / H5
18px · normal · medium
Maximum LTV: 75%
text-base / Body
16px · relaxed · normal
HR3 Capital provides short-term bridge financing for experienced
real estate investors. Our program is built around speed,
certainty, and underwriting that respects what you have already
built.
text-sm
14px · normal · normal
Supporting text, captions, card descriptions, secondary
information in data tables.
text-xs
12px · wide · medium
LOAN STATUS · RATE TYPE · MATURITY
DATE
Type Scale — Alta ROI (Syne + DM Sans)
H1 display
Syne · 36px · bold · tight
Funnels That Convert.
H2
Syne · 30px · semibold
What We Actually Do
Body
DM Sans · 16px · normal
We audit your current funnel, identify the drop-off points, and
rebuild the stages that are leaking revenue. No retainer lock-in.
Pay when the work ships.
Label
DM Sans · 12px · semibold · caps
CONVERSION RATE · SESSION DURATION ·
AOV
Type Scale — Cinnabar Labs (Space Grotesk + Inter)
H1 display
Space Grotesk · 48px · bold · tight
Tools Built Right.
H2
Space Grotesk · 30px · semibold
Selected Projects
Body
Inter · 16px · normal · relaxed
A portfolio of financial calculators, lending tools, and marketing
instruments. Each one passes the same quality bar before it ships
— the visible details are the point.
Mono / code
JetBrains Mono · 12px
v1.4.2 · deployed 2026-05-17 · react + typescript
Section 4 — Spacing
8px Base Spacing Scale
--space-1 (4px)
4px
Internal component use only (icon-to-label gaps)
--space-2 (8px)
8px
Tight groupings, between related elements
--space-3 (12px)
12px
Input vertical padding
--space-4 (16px)
16px
Input horizontal padding, form field stacking gap
--space-5 (24px)
24px
Card internal padding, grid gutter
--space-6 (32px)
32px
Button horizontal padding (large), between component groups
--space-7 (48px)
48px
Section padding (standard)
--space-8 (64px)
64px
Section padding (large), between major layout zones
--space-9 (96px)
96px
Hero section padding
--space-10 (128px)
128px
Maximum layout gap — page-level only
Section 5 — Components
Buttons — All Three BUs
HR3 Capital — Button Hierarchy
Primary / Secondary / Ghost
Size variations — primary style
Alta ROI — Button Hierarchy
Primary / Secondary / Ghost
Cinnabar Labs — Button Hierarchy
Primary / Secondary / Ghost
Cards
Card components — HR3 style
BRIDGE LOAN
Multi-Family Bridge
Short-term financing for value-add acquisition. Rates from 9.5%
with 75% max LTV.
$2.4M
Max Loan Size
PORTFOLIO METRICS
Active Loans
42
+8 this quarter
Total Deployed
$18.2M
+$3.1M QoQ
Default Rate
0.3%
No change
CASE STUDY
E-Commerce Funnel Rebuild
Tripled checkout completion rate in 6 weeks by removing 3
unnecessary confirmation steps.
+218%
Conversion Lift
Form Inputs
Input states — default, focus (click into field), error
Enter a value between $50,000 and $5,000,000
Enter a valid email address (e.g. name@domain.com)
Available after loan type is selected
Elevation Scale
shadow-1 0 1px 2px
Cards at rest
shadow-2 0 4px 8px
Hover, dropdowns
shadow-3 0 8px 24px
Modals, popovers
shadow-4 0 16px 48px
Overlays
Border Radius Scale
sm 4px
Inputs Badges
md 8px
Cards Buttons
lg 12px
Large cards Panels
xl 16px
Feature sections
full 9999px
Pills Toggles
Section 6 — Sample Page Sections
How the system looks in context — each BU rendered independently
HR3 CAPITAL — Hero + Stats section
Private Bridge Lending
Capital for Investors Who Move Fast
HR3 funds real estate acquisitions, value-add projects, and
refinances in 7–14 business days. No committee delays. Decisions
made by people who have read the deal, not a score.
$47M+
Deployed
9 days
Avg Close
0.3%
Default Rate
200+
Loans Closed
ALTA ROI — Hero + Results panel section
Funnel Optimization
Your Funnel Converts or We Fix It
We audit, rebuild, and test the stages where your revenue is
leaking. No retainer. Pay when the work ships.
Recent Client Results
SaaS checkout completion+218%
E-comm AOV lift+$44
Lead form conversions3.1x
Time to results6 weeks
CINNABAR LABS — Portfolio hero + project strip
// studio · 2026
Tools Built Right. The Visible Details Are the Point.
A collection of financial calculators, lending tools, and
marketing instruments. Each one passes the same quality bar
before it ships.
// finance
Bridge Loan Calculator
Real-time LTV, interest reserve, and cash-to-close estimates
for real estate investors.
// marketing
Funnel Audit Tool
Identify and quantify drop-off stages across a multi-step
acquisition funnel.
// hr · saas
Offer Letter Generator
Compliance-aware offer generation with multi-state
jurisdiction handling.
Design Notes — Gaps and decisions flagged for Alan
Font loading: This preview uses a CSS @import for
Google Fonts. The brief requested no external CDN links for full
self-containment. If true offline/air-gapped use is required, the five
typefaces (Instrument Serif, Syne, Space Grotesk, Inter, DM Sans,
JetBrains Mono) would need to be downloaded and served locally as
@font-face declarations. The visual read of this preview is only
accurate when the browser has internet access to load the fonts.
Guidebook gap — Instrument Serif weight: The spec
says headings use --weight-semibold or --weight-bold, but Instrument
Serif is a display serif that reads best at weight 400 (its optical
design is meant to feel editorial, not heavy). The preview uses
weight-normal for Instrument Serif display text. If you want heavier
headings on HR3 pages, the system should explicitly carve out a weight
exception for this typeface in the guidebook.
Guidebook gap — dark mode: The spec notes Cinnabar
Labs "could reasonably support a dark mode" and defines
--cinnabar-dark-bg as a placeholder. No dark mode tokens or component
variants are defined. When that becomes a priority, the token system
is ready for it — but the guidebook will need a full Part 4 covering
dark mode semantic mappings before Felix can implement it
consistently.
Guidebook gap — link styles: The spec defines button
hierarchy thoroughly but does not define inline link styles (color,
hover, underline treatment, visited state). This is a gap that will
surface immediately in any page with body copy. A conservative
reasonable choice: accent-primary color, underline on hover, no
underline by default. Felix will need a spec before implementing.
Guidebook gap — icon system: No icon library is
specified. Buttons, navigation, and data tables frequently need icons.
Lucide, Radix Icons, and Phosphor are all good candidates — all are
MIT-licensed and tree-shakeable. This needs a decision before Felix
builds any UI with icon usage.
Distinctiveness assessment: The three BU palettes are
genuinely differentiated from each other and from generic SaaS
conventions. HR3's navy-gold-cream is the strongest signal — it reads
institutional and premium immediately. Alta's teal is clean but sits
closer to the middle of the market (teal is common in SaaS).
Cinnabar's red-on-near-black is bold and memorable. The typography
pairings are all strong choices. The main risk of genericness is in
the component layer — buttons and cards at this spec level are
structurally similar to Tailwind UI defaults. The distinctiveness will
live in the page-level compositions (the sample sections above), not
in isolated components.