Design system
explorador advance UI kit
Every token, component and pattern in light and dark, ported from explorador.pt. Copy from here; flip the theme to check both.
Header states
The real header reads the session (Admin link for admins). Previews: signed out, signed in, and the demo-clock chip shown when the protocol clock is fast-forwarded.
@/components/shell/*ana@demo.explorador.pt
Admin
Demo clock · (+81 days)
Hero pattern
Warm off-white band with the dotted grid, eyebrow, two-tone headline, lead, CTAs ending in →, and glass stat pills.
@/components/ui/typographyWhat is explorador advance
Close the deal.Get paid today.
Agents spend part of their commission when the CPCV is signed. Investors fund the advances from a pool on Stellar and earn the interest.
See every deal on-chain →Every deal, on-chain.No personal data.
How your yield works interest → fee → senior → junior
Colour tokens
Semantic variables flip with the theme (no dark: needed). Raw Tailwind palette classes still work, as on explorador.pt.
app/globals.cssCanvas
bg-bg
Warm section
bg-section
Warm section (alt)
bg-section-alt
Card
bg-card
Card inset
bg-card-muted
Text
text-fg
Headline
text-heading
Muted text
text-muted
Card border
border-line
Input border
border-border
Primary
bg-primary
Primary hover
bg-primary-hover
Primary soft
bg-primary-soft
Primary tint
bg-primary-tint
Primary text
text-primary-text
Success
text-success
Warning
text-warning
Danger
text-danger
Chart 1
--color-chart-1
Chart 2
--color-chart-2
Chart 3
--color-chart-3
rounded-card
16 px: cards, tables
rounded-panel
24 px: hero tiles, dialogs
Typography
Sora everywhere, 400/600/700. Headlines bold and tight; numbers use tabular figures.
@/components/ui/typographydisplay · h1 · 36 → 60 px
Close the deal.Get paid today.
section · h2 · 44 px, −1.1 px tracking
Spend your commissionbefore the escritura.
card · h3 · 24 px
Available to spend
body · 16 px, relaxed
When a CPCV is signed, explorador proves the deal with a zero-knowledge proof. The proof reveals the commission and the agent, and hides the buyer, seller, price and property.
Muted 14 px for secondary text and help.
Eyebrow label
Primary eyebrow
€3,750.001,111,111 vs 9,999,999 (tabular)Cards
White, 16 or 24 px radius, 1 px slate-200/70 border, no heavy shadow. Glass over warm sections; brand gradient for one hero tile per view.
@/components/ui/cardAgents
Spend before the escritura
CPCV on a €300,000 sale at 5%: €3,750.00 credit the same day.
Investors
Deposit tEURC, earn up to 8% APY first, take losses last.
explorador
First-loss capital
Junior tranche absorbs write-offs before investors.
Interactive card: hover lifts it.
Glass card
bg-white/60 + border, for cards over warm or coloured sections.
Muted card
Inset panel for secondary groups inside pages and cards.
Badges and statuses
Active blue, Settled emerald, Cancelled amber, Written off red, Overdue orange outline; plus CPCV, chain and card states.
@/components/ui/badgeData display
Amounts arrive as stroops strings; dates as day numbers, unix seconds or ISO; addresses link to stellar.expert.
@/components/ui/{amount,date-text,address,countdown}Amount
€4,411.23
Dates, countdowns, addresses
Interest so far (12% APR)
€88.767123
On €3,000.00 drawn 90 protocol days ago · ticks every second
Forms
Field wires label, hint and error to the control. Inputs are h-11 with 16 px text (no iOS zoom) and a blue focus ring.
@/components/ui/{field,number-input}Tabs
Segmented pill tabs for panels; underline tabs for page sections. Arrow keys move between tabs.
@/components/ui/tabsDialogs, sheets and toasts
Dialog is centered; Sheet slides up from the bottom on phones. Toasts stack bottom-right with a countdown rail.
@/components/ui/{dialog,toast}Progress and steps
Credit used, leverage against the 10× cap, onboarding and the CPCV proof pipeline.
@/components/ui/{progress-bar,stepper}Agent onboarding
- 3Card created, in progress
- 4
With an error
- Passkey, failed
- 3
- 4
CPCV pipeline
Validating → Signing attestation → Generating ZK proof → Verifying proof locally → Minting note on Stellar → Done
- 1
Validating, not started
Checks the CPCV fields and the protocol date.
- 2
Signing attestation, not started
explorador's BabyJubJub key signs the deal.
- 3
Generating ZK proof, not started
Groth16 over BN254 with snarkjs (a few seconds).
- 4
Verifying proof locally, not started
- 5
Minting note on Stellar, not started
cpcv_note.mint verifies the proof on-chain.
- 6
Done, not started
Tables
DataTable from a column list; the container scrolls sideways inside its card so the page never does. Columns can hide below a breakpoint.
@/components/ui/table| Note | Agent | Commission | Escritura | Status |
|---|---|---|---|---|
| #1 | CBQH…A4OK, view agent smart account on stellar.expert (opens in a new tab) | €15,000.00 | Active | |
| #2 | CC7R…D3MA, view agent smart account on stellar.expert (opens in a new tab) | €9,250.00 | ActiveOverdue | |
| #3 | CDLZ…4XQA, view agent smart account on stellar.expert (opens in a new tab) | €31,000.00 | Settled | |
| #4 | CC7R…D3MA, view agent smart account on stellar.expert (opens in a new tab) | €7,400.00 | Cancelled | |
| #5 | CBQH…A4OK, view agent smart account on stellar.expert (opens in a new tab) | €18,600.00 | Written off |
| Note | Status |
|---|---|
No notes match Try another status filter or search by note id. | |
Charts
Recharts wrappers: 2 px lines, light-blue wash, hairline grid, crosshair tooltip with every series, legend for 2+ series, a screen-reader table. Max 3 series; one y-axis.
@/components/ui/chartsShare price (eaSR)
Last 30 protocol days
| Date | Share price |
|---|---|
| 16 Dec | €1.0412 |
| 17 Dec | €1.0415 |
| 18 Dec | €1.0418 |
| 19 Dec | €1.0420 |
| 20 Dec | €1.0422 |
| 21 Dec | €1.0423 |
| 22 Dec | €1.0424 |
| 23 Dec | €1.0425 |
| 24 Dec | €1.0426 |
| 25 Dec | €1.0427 |
| 26 Dec | €1.0428 |
| 27 Dec | €1.0430 |
| 28 Dec | €1.0432 |
| 29 Dec | €1.0435 |
| 30 Dec | €1.0437 |
| 31 Dec | €1.0440 |
| 1 Jan | €1.0443 |
| 2 Jan | €1.0446 |
| 3 Jan | €1.0448 |
| 4 Jan | €1.0450 |
| 5 Jan | €1.0451 |
| 6 Jan | €1.0452 |
| 7 Jan | €1.0452 |
| 8 Jan | €1.0453 |
| 9 Jan | €1.0454 |
| 10 Jan | €1.0456 |
| 11 Jan | €1.0458 |
| 12 Jan | €1.0460 |
| 13 Jan | €1.0463 |
| 14 Jan | €1.0466 |
TVL vs outstanding debt
Both in euros, one axis
| Date | TVL | Outstanding debt |
|---|---|---|
| 16 Dec | €75,000.00 | €21,000.00 |
| 17 Dec | €75,180.00 | €21,704.00 |
| 18 Dec | €75,360.00 | €22,377.00 |
| 19 Dec | €75,540.00 | €22,987.00 |
| 20 Dec | €75,720.00 | €23,515.00 |
| 21 Dec | €75,900.00 | €23,946.00 |
| 22 Dec | €76,080.00 | €24,278.00 |
| 23 Dec | €76,260.00 | €24,521.00 |
| 24 Dec | €76,440.00 | €24,692.00 |
| 25 Dec | €76,620.00 | €24,817.00 |
| 26 Dec | €76,800.00 | €24,928.00 |
| 27 Dec | €76,980.00 | €25,059.00 |
| 28 Dec | €77,160.00 | €25,239.00 |
| 29 Dec | €77,340.00 | €25,494.00 |
| 30 Dec | €77,520.00 | €25,841.00 |
| 31 Dec | €77,700.00 | €26,287.00 |
| 1 Jan | €77,880.00 | €26,828.00 |
| 2 Jan | €78,060.00 | €27,450.00 |
| 3 Jan | €78,240.00 | €28,129.00 |
| 4 Jan | €87,420.00 | €28,835.00 |
| 5 Jan | €87,600.00 | €29,537.00 |
| 6 Jan | €87,780.00 | €30,201.00 |
| 7 Jan | €87,960.00 | €30,801.00 |
| 8 Jan | €88,140.00 | €31,314.00 |
| 9 Jan | €88,320.00 | €31,730.00 |
| 10 Jan | €88,500.00 | €28,960.23 |
| 11 Jan | €88,680.00 | €29,190.23 |
| 12 Jan | €88,860.00 | €29,352.23 |
| 13 Jan | €89,040.00 | €29,473.23 |
| 14 Jan | €89,220.00 | €29,585.23 |
Loading
Empty
Loading and empty states
@/components/ui/{skeleton,empty-state,stat-pill}Usage notes
Conventions the other screens follow.
- Format with
@/lib/format:formatEur(stroops)→ €3,750.00,formatDate(day | unix | iso)→ 14 Jan 2027 (Europe/Lisbon),truncateAddress,formatPercent,formatBps,explorerTxUrl. - Use semantic colour utilities (
bg-card text-heading text-muted border-line bg-section text-primary-text) so dark mode is automatic.cn()merges classes, so aclassNameoverride wins. - Icons: lucide-react 1.x at 1.5 px stroke (set globally). Renamed icons: CircleCheck (not CheckCircle2), CircleAlert, TriangleAlert, LoaderCircle, CircleX.
- Protocol time comes from the API (
protocolNow); tick it withuseProtocolNow(protocolNow, fetchedAtMs); never use the wall clock for deals or interest. - After a demo-clock change call
refreshDemoClock()from@/components/shell/demo-clockto update the header chip at once. - Mobile first: 16 px gutter (Container / Section), no horizontal page scroll at 375 px, touch targets ≥ 44 px.