Design System
UI Kit
All available components and block styles in one place. Each element shown in both dark and light variants.
1 — Typography
2 — Color Palette
Brand colors
Zinc scale — purple-tinted neutral
3 — Buttons
On light background
On dark background
4 — Badges & Pills
5 — Forms & Inputs
6 — Cards
Creator
Standard Plan
Your fan-site with built-in payments and full content control.
Studio
Studio Plan
Multi-model management with module system and scalable infra.
Monthly revenue
$4,820
↑ 12% this month
Active subscribers
1,204
↑ 8% this month
7 — Border Radius Scale
8 — Shadow Scale
9 — Navigation
Dark glass
Light
10 — Content Blocks
Hero — dark
Your Fan-Site.
Your Brand. Your Rules.
Not just another profile. A fully owned fan-site with built-in payments, subscriptions, and content tools.
Features — light tinted
Platform
Everything your fan-site needs
From subscriptions to streaming — built-in, not bolted on.
Payments
Built-in payments, no paperwork on day one.
Streaming
Live streams and on-demand video in one place.
Messaging
Paid DMs, group messages, fan communication tools.
Modules
Add Telegram, notifications, and more as you grow.
CTA — dark centered
Ready to own your fan-site?
Start with $20 free credit. No payment setup required.
Footer — dark
FanWorlds
Independent fan-site infrastructure for established creators and studios.
Platform
Features
Pricing
Payments
Studios
Legal
Terms of service
Privacy policy
DMCA
2257
11 — Coloured Icons
L0 — Mobile Responsive Tokens
Typography — desktop vs mobile
| Role | Desktop | Mobile (≤ 639px) | CSS class |
|---|---|---|---|
| Hero / Display | 64px / 700 | 36px / 700 | .text-5xl.font-bold |
| H1 | 48px / 700 | 32px / 700 | .text-5xl.font-bold |
| H2 | 36px / 600 | 28px / 700 | .text-4xl |
| H3 | 24px / 600 | 18px / 600 | .text-2xl |
| H4 | 20px / 700 | 16px / 700 | .text-xl.font-bold |
| Lead | 20px / 400 | 18px / 400 | .text-xl |
| Body | 16px / 400 | 16px / 400 | .text-base (unchanged) |
| Small | 14px / 400 | 14px / 400 | .text-sm (unchanged) |
| Label | 12px / 600 | 12px / 600 | .text-xs (unchanged) |
Live preview — resize browser to see mobile scaling
Hero — Own Your Platform
H2 — Built for creators
H3 — Your audience, your brand
H4 — Launch on your own terms
Lead — Start with built-in payments, migrate to your own when ready.
Body — The platform gives you full ownership over your fan-site, content structure, and monetization flow.
Spacing — desktop vs mobile
| Token | Desktop | Mobile (≤ 639px) | |
|---|---|---|---|
| Section vertical padding | 5rem (80px) | 3rem (48px) | .section-py |
| Section horizontal padding | 1.5rem (24px) | 1rem (16px) | .section-px |
| Card internal padding | 1.5rem (24px) | 1rem (16px) | .card-p |
| Section gap (stack) | 4rem (64px) | 2.5rem (40px) | .section-gap |
| Grid gap — card rows | 1.25rem (20px) | 1rem (16px) | gap-4 / gap-5 |
Padding live example — section-px + card-p
Section container (.section-px)
Card (.card-p)
Padding scales from 1.5rem on desktop down to 1rem on mobile. Resize to preview.
L1 — Typography
L2 — Color Palette
Brand colors
Zinc scale — purple-tinted neutral
L3 — Buttons
Sizes
Variants
L4 — Badges & Pills
L5 — Forms & Inputs
L6 — Cards
Creator
Standard Plan
Your fan-site with built-in payments and full content control.
Studio
Studio Plan
Multi-model management with module system and scalable infra.
Monthly revenue
$4,820
↑ 12% this month
Active subscribers
1,204
↑ 8% this month
L7 — Border Radius Scale
L8 — Shadow Scale
L9 — Navigation
White — with logo
Tinted — light purple
L10 — Content Blocks
Hero — light
Your Fan-Site.
Your Brand. Your Rules.
Not just another profile. A fully owned fan-site with built-in payments, subscriptions, and content tools.
Features — white
Platform
Everything your fan-site needs
From subscriptions to streaming — built-in, not bolted on.
Payments
Built-in payments, no paperwork on day one.
Streaming
Live streams and on-demand video in one place.
Messaging
Paid DMs, group messages, fan communication tools.
Modules
Add Telegram, notifications, and more as you grow.
CTA — light
Ready to own your fan-site?
Start with $20 free credit. No payment setup required.
Footer — light
FanWorlds
Independent fan-site infrastructure for established creators and studios.
Platform
Features
Pricing
Payments
Studios
Legal
Terms of service
Privacy policy
DMCA
2257
L11 — Coloured Icons
L12 — Flat Icon Set
All icons — 24 × 24px
