Design System

Brand & Design System

The living reference for how Auctionados looks, sounds, and feels. Everything here renders from the real tokens in packages/theme. Pair it with the written guide in docs/design/BRAND_IDENTITY.md.

Toggle light / dark from the header to see tokens flip. Dark is the brand default.

Foundation

Personality

CuratedTrustworthyConfidentPreciseWarm

Luxury meets on-chain trust. A warm editorial canvas, one electric-lime accent used like a spotlight, and a fashion-grade display face — precise, never hype.

Color

Brand accents

Lime is a spotlight, not a floodlight — one lime action per view. Violet carries secondary emphasis. Text on accents always uses text-on-lime / text-on-violet.

lime

#DEFB62

Primary accent · CTAs · focus

violet

#A855F7

Secondary accent · emphasis

black

#22252A

Dark surface · text-on-lime

blackest

#121212

Canvas · dark bands

Color

Semantic surfaces & text

These flip automatically between light and dark. If you're writing dark: variants for color, you're probably fighting the tokens.

bg-base

Page canvas

bg-surface

Cards, modals

bg-elevated

Inner panels, inputs

bg-subtle

Hover, stripes

text-primaryPrimary — headings & key copy

text-secondarySecondary — body & supporting copy

text-mutedMuted — captions & metadata only

Color

Status

Use semantic status tokens for toasts, badges, and validation — never raw Tailwind green-500 etc. They stay legible on both cream and black.

successwarningdangerinfoneutral

Type

Typography

Monument Extendedfont-headline · Display & headings

Curated luxury, on-chain

Latofont-lato · Body & long-form (default)

Win the lot, then the item ships into escrow — funds release only when you confirm receipt.

IBM Plex Sansfont-ibm · UI · nav · labels · data

BID IN POL OR SUPPORTED ERC-20

Heading 1 — display

Heading 2 — section

Heading 3 — subsection

Body copy in Lato. Legible, warm, and calm — the transactional voice for anything involving money or ownership.

Layout

Radius

rounded-lg

Inputs, buttons

rounded-xl

Cards, panels

rounded-2xl

Marketing surfaces

rounded-full

Avatars, pills

Layout

Elevation

shadow-sm

Resting

shadow-md

Card

shadow-lg

Floating

shadow-xl

Modal

Components

Buttons

One primary action per view. Use the shared Button component — legacy .btn classes are for older code only.

Components

Cards

.card

Surface bg, subtle border, rounded-xl, shadow-md. The default container.

.card-dark

For dark bands and dramatic breaks.

.glass-effect

Overlay / hero contexts with backdrop blur.

Foundation

Iconography

Heroicons outline set. One icon = one meaning — never reuse the same glyph for unrelated concepts.

Wallet / connect

Bid / auction

Escrow / security

Arbitration / disputes

Physical item / NFT

Provenance / explore

Smart-contract lock

Valuation / analytics

Content

Voice & tone

Confident and concrete. Show the mechanism, skip the hype.

✅ Do

Win the lot, then the item ships into escrow — funds release only when you confirm receipt.

❌ Don't

Start your journey into the future of collectible trading.

✅ Do

Bid in POL or supported ERC-20 tokens.

❌ Don't

Seamless multi-currency experiences for all users.

✅ Do

Every physical item is minted with its NFT, so provenance is verifiable on-chain.

❌ Don't

Leverage cutting-edge blockchain to unlock next-gen ownership.

Tokens are the contract. Add values to packages/theme first, then use them — never hardcode brand hex in components. See docs/design/BRAND_IDENTITY.md.