USHP Design System

Component library extracted from the USHP website. Dark-first design with animated theme switching, glass morphism, and scroll-driven sections.

Brand

Logo

Animated (large)

Animated (small)

Static SVG

Logo + Text

USHP

SVG mark (light)

SVG mark (copper)

SVG file

Foundations

Typography

Display — Feature Deck (serif, default)

The quick brown fox

Display — Feature Display (large headlines)

The quick brown fox

Body — Epilogue (sans)

The quick brown fox jumps over the lazy dog. This is body text used throughout the interface for paragraphs and general content.

Eyebrow

Section Label

Mono — Space Mono / JetBrains Mono

0x1a2b3c4d5e6f...

Foundations

Colors

Background

#0A0A0A

Surface

#141414

Heading

#F0EDE8

Body

#9A9590

Muted

#6B655F

Accent

#7ECBA1

Copper CTA

rgba(194, 145, 100, 1)

Chart Colors

Green

Orange

Blue

Component

Section Header

The standard section header pattern with eyebrow, title, and optional description. Used across all content sections.

Example

Centered Variant

This is a centered section header, used for About and other centered sections.

Component

Stats Row

Large serif numbers with tracking labels. Used for key performance metrics.

+95%

Home price growth since 2000

+34%

Cumulative CPI inflation

2.8x

Housing outperforms inflation

Stats Cluster (compact)

$48M

TVL

+6.2%

Performance YTD

~5%

sUSHP APY

Component

Pill Tags

Uppercase bordered pills for feature lists and categories.

FULLY COLLATERALIZEDINFLATION PROOFUNCORRELATED24/7 TRADEABLESTABLE

Component

Status Badge

LiveComing SoonBeta

Component

Tab Bar

Pill-style tab switcher with spring animation.

Content for tab: tab1

Component

Chart Card

Container for data visualizations with header and legend.

2022 Performance

Above benchmark

Below benchmark

Housing

+5.6%

S&P 500

-19.4%

REITs

-26.2%

BTC

-64.3%

ETH

-67.5%

Source: FHFA, S&P, CoinGecko · Calendar year 2022

Component

Metric Rows

Key-value pairs with dividers.

sUSHP APY~5%

Total Return (inc. appreciation)~10-12%

Yield SourceNet rental income

Component

Transparency Stats

4-column stat display with vertical dividers.

127

Properties

100.3%

Backing Ratio

Chainlink

Oracle

On-chain

Proof of Reserves

Component

Comparison Table

Metric	USHP (Staked)	Stablecoins
Base Yield	~5%	~4-5%
Price Appreciation	~5-7%	0%
Inflation Protection	Yes (real asset)	No

Component

Steps Grid

Multi-column card grid for step-by-step flows.

Mint USHP

Deposit stablecoins to mint USHP tokens, each backed 1:1 by tokenized U.S. residential real estate.

Stake for sUSHP

Stake your USHP to receive sUSHP, which auto-compounds rental yield and price appreciation.

Use Across DeFi

Deploy sUSHP as collateral, provide liquidity, or trade it across leading DeFi protocols.

Component

Ecosystem List

Protocol integrations with status badges.

Pendle

Split sUSHP into principal and yield tokens.

Coming Soon

Uniswap / Curve

Provide liquidity for USHP trading pairs.

Live

Exchanges

Trade USHP on centralized and decentralized exchanges.

Coming Soon

Component

Arrow Links

Get USHP →How it works

View Dashboard →Proof of Reserves →Audit Reports →

Patterns

Glass Morphism

Frosted glass pill effects used on the navigation.

Default pill

CTA Button

App

Dashboard

Authenticated shell with KPI strip, sidebar nav, and chart cards. Live preview routes link into a working app surface.

Route

/app/dashboard

Overview with pipeline, collateral TVL, weighted yield and top-market table.

Route

/app/buy

Buy / stake / bridge tabs with swap card + transaction timeline.

Route

/app/reserves

In-app proof of reserves: KPIs, history, composition, property ledger.

DashboardChartCard

Total collateral value

$71,400,000

Collateral

USHP

sUSHP

Weighted yield (staking ratio)

7.25%

(75%)

Weighted yield

Staking ratio

Reserves

Reserves Page

Full marketing reserves page: hero, sticky KPIs, historical chart, composition + geo, property ledger, attestations, and on-chain contracts.

Route

/reserves

Marketing proof-of-reserves with sticky KPI pill, animated charts, attestations.

Route

/app/reserves

Dashboard-shell variant of the same data (dense tiles, no hero).

Underlying primitives: ReservesHero, ReservesKPIs, ReservesHistoryChart, ReservesComposition, ReservesPropertyTable, ReservesAttestations, ReservesContracts. Each has a Storybook entry under Reserves/.

Landing

Marketing Sections

Twenty composed sections from the USHP marketing site. Each renders full-width as its own route; full gallery in Storybook under Landing/Sections.

HeroSection

Full-bleed video hero with stats + investor marquee.

/landing/hero

WhatIsUSHP

Intro sequence explaining the token.

/landing/what-is-ushp

HowItWorks

Stepper illustrating mint → stake → yield.

/landing/how-it-works

Props

Five-prop pill grid (stable, uncorrelated, etc.).

/landing/props

USHPIndex

House-price index chart panel.

/landing/ushp-index

DeviationChart

Monthly deviation bar chart.

/landing/deviation-chart

TwoSourcesOfReturn

Return decomposition explainer.

/landing/two-sources

EarnWithSUSHP

Staking APY breakdown.

/landing/earn-sushp

Transparency

On-chain transparency stats.

/landing/transparency

ProofOfReserves

Auditor grid + live map teaser.

/landing/proof-of-reserves

CrashResilience

2022 downturn comparison with video bg.

/landing/crash-resilience

InflationHedge

Housing vs CPI over time.

/landing/inflation-hedge

WhyHousing

Carousel of housing's structural tailwinds.

/landing/why-housing

NowAccessible

Before/after accessibility narrative.

/landing/now-accessible

PlatformSection

Four-step platform animation.

/landing/platform

Portfolio

Portfolio window with scroll-linked 3D hook.

/landing/portfolio

Ecosystem

Protocol integrations list.

/landing/ecosystem

BackedBy

Investor marquee section.

/landing/backed-by

About

Team section.

/landing/about

Footer

Full-width link footer with animated logo.

/landing/footer