Design system
Every element below is a live specimen of a shared class from the four style layers — tokens → kit.css → components.css. Editing a shared class changes it here and on every page at once; styleguide.css only frames the specimens, it never restyles them.
Color tokens
The brand pair (electric blue × mint/neon green) plus the semantic surface, text and border tokens. Always referenced as var(--*) — no raw hex on a page.
Typography
TT Norms Pro across the scale. Headings use --fg-heading-2 and tight tracking; body copy uses --fg-secondary.
Editorial & article prose
Long-form body type for blog articles and content pages. Wrap CMS / long-form HTML in .prose — headings, lists, links and the pull-quote all follow the design tokens. The quote uses a large mint quotation mark, no rule.
What is fractional ownership?
Instead of buying a property outright, it is broken into digital shares — so you can own a slice for as little as a few dollars and earn monthly rental income, pro rata.
The benefits
- Lower barrier to entry: anyone can invest.
- Diversification: spread your risk across properties.
- Liquidity: shares trade faster than a whole property.
Tokenization is not a buzzword; it is a profound upgrade to our financial plumbing.
If you’re looking to get started, dive into the marketplace today.
Buttons
One primitive, .btn, with variant + size modifiers. Edit .btn and every button changes; edit a variant and only that family follows.
Variants
Sizes — the DS control-height scale
States & contents
Secondary button shapes
Icon buttons (always aria-labelled)
Show more / load more
The pagination footer used by every long list (blog, marketplace, resale). One shared component, .more-foot + .more-foot__btn: a round, borderless, slightly elevated pill with the running count beside it.
Badges & chips
Status pills carry a soft state tint — a surface and matching text from the same colour family — so completed / pending / failed read apart at a glance; the leading dot reinforces it. Filter chips act; marker labels only state.
Lifecycle & status
Filter & toggle chips (interactive)
Marker labels (static)
Form controls
Bordered .input for focused forms; the password reveal, error state, select, amount and checkbox/toggle all share the brand focus ring.
Cards
The marketplace asset card is THE card everywhere — rendered here LIVE from the real data + builder (card.js → window.POOOL.cardHTML), the same markup the grid and HTMX fragment use.
Chart card & set-card frames
Chart card · the chart/figure frame
Used by the portfolio value/allocation/bar charts and the developer trends. Live specimens on the portfolio page.
Set-card
The canonical title+sub card frame shared by settings, wallet, rewards.
Body content sits here; an optional foot band runs flush across the bottom.
Blog cards & bands
Blog-specific components: the article card (.bpost, with a featured media-beside-text variant .bpost--lead) and the brand band (.bband) used for the newsletter signup and the closing call-to-action.
Article card — grid & featured
Martin Fischer · Mar 11, 2026 · 4 min read
Brand band — newsletter & CTA
Stay ahead of the pool
One letter a month: new listings, operator notes and what the numbers actually did. No spam, unsubscribe anytime.
By subscribing you agree to the privacy policy.
Own real assets from $15
Browsing is free and needs no account — every villa, every number, every report.
Scenes, trust & shell grammar
The brand trust strip, the shared empty-pool scene, and the page-rhythm layout classes the signed-in shell composes.
Trust strip — FooterTrust
Browse every asset free — no account needed · Investors in 40 countries
Empty state — the shared "empty pool"
Layout grammar — .statgrid / .wal-stat
Loading veil — the "Laola wave + flags" loader
Shown the instant any shell page paints, so a slow connection never reveals the un-hydrated FOUC (bare filter pills, the dark .shell__scrim, the wrong "Funded" note). The wordmark pops in small→large, then a stadium-style Laola wave travels across the letters (cresting at the middle O) while the three O's cross-fade through national flags — the same set as the landing flag strip ("investors in 40 countries") — with a 0→100 counter. The wave is pure CSS (instant, no library, runs with JS off); flags are vendored at /static/assets/flags/circle/ so it never waits on a CDN. The viewBox carries headroom so a peaking letter never clips. Live, it self-removes on alpine:initialized. Markup lives in components/loader.html, layout in the shared .poool-loader class.
Resale trade card — .rtc
The asset-detail purchase card in resale mode (reached from the Resale market). A Buy/Sell toggle swaps between taking the lowest open offers and listing your own shares within the ±10% band of the asset's independent valuation. Buyers pay no fee and settle from their wallet; sellers pay the 5% fee on sale. Shares the electric-blue/mint language of the primary-market .ad-invest card. Markup lives in asset.html, styling in resale-trade.css.