Brand Book
Design system used by Libermall DEX. CSS vars, Tailwind tokens, components.
Logo
Libermall
Yellow gradient logomark + wordmark
linear-gradient(135deg, #F7B500, #FFC107)
Brand Colors
Yellow primary
#F7B500
bg-[#F7B500]
Yellow accent
#FFC107
bg-[#FFC107]
Theme Tokens
Light theme
background
#f8f9fa
--v2-background
bg-background
foreground
#1a1d29
--v2-foreground
text-foreground
card
#ffffff
--v2-card
bg-card
muted
#f1f3f5
--v2-muted
bg-muted
border
#dee2e6
--v2-border
border-border
primary
#0066ff
--v2-primary
bg-primary
destructive
#dc3545
--v2-destructive
bg-destructive
Dark theme
background
#000000
--v2-background
bg-background
foreground
#fafafa
--v2-foreground
text-foreground
card
#0f0f0f
--v2-card
bg-card
muted
#1a1a1a
--v2-muted
bg-muted
border
#27272a
--v2-border
border-border
primary
#fafafa
--v2-primary
bg-primary
destructive
#dc2626
--v2-destructive
bg-destructive
Typography
Display
Libermall DEX
text-5xl font-bold
Heading 1
Trade on TON
text-4xl font-bold
Heading 2
Earn passive yield
text-3xl font-semibold
Heading 3
Add Liquidity
text-2xl font-semibold
Heading 4
Section title
text-xl font-semibold
Body Large
Use this for prominent paragraphs
text-lg
Body
Default body text size
text-base
Small
Captions, helper text
text-sm
Mono
0xUQAB...j8r9
text-sm font-mono
Default font family: Video (display) + system sans-serif fallback.
Components
Button
Variants: default, secondary, outline, ghost, destructive, link.
Input
Standard form input.
Card
Container with border + bg-card.
This is a card body.
Brand action
Yellow gradient CTA used for primary swap/stake actions.
Voice & Tone
Direct
No marketing fluff. Tell users what works, what is in beta, what is not yet built.
Technical
Surface real numbers — slippage, price impact, fees, gas. Trust comes from transparency.
Web3-native
Non-custodial first. The user signs every transaction. The platform is a tool, not a custodian.