Design System
UI Kit
All available components and block styles in one place. Each element shown in both dark and light variants.
1 — Typography
.eyebrow-label
Site Identity
2 — Color Palette
Brand colors
Zinc scale — purple-tinted neutral
Gradients — Dark
Dark section background gradient tokens. Use as background: var(--token-name).
<section class="hiw-section" style="background: var(--grad-dark-nebula);">...</section>
<div class="cta-block" style="background: var(--grad-dark-nebula-glass);">...</div>3 — Buttons
Text rule: All button labels must use Title Case — enforced globally via text-transform: capitalize on .hero-btn.
Sizes — desktop
.hero-btn--xs
12px
.hero-btn--sm
13px
.hero-btn
15px
.hero-btn--lg
17px
.hero-btn--xl
19px
Mobile adaptations — max 639px
XS and SM stay unchanged. MD, LG, XL scale down automatically.
--xs
0.45rem 1.1rem · 12px
unchanged
--sm
0.6rem 1.5rem · 13px
unchanged
(default)
0.9rem 2.4rem · 15px
0.75rem 1.8rem · 14px
--lg
1.1rem 3rem · 17px
→ MD · 0.75rem 1.8rem · 14px
--xl
1.3rem 3.6rem · 19px
→ LG · 0.9rem 2.4rem · 15px
--full
width: auto
width: 100% · centered
Full-width helper — .hero-btn--full
Primary — .hero-btn
Main call-to-action. Use once per section.
Pulse — .hero-btn.hero-btn--pulse
Animated primary CTA. Use for hero sections to draw attention.
Ghost — .hero-btn.hero-btn--ghost
Transparent, no border. Used alongside a primary button (e.g. "Log in" next to "Get started").
On dark background — all sizes
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
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
Gradients — Light
Light section background gradient token. Use as background: var(--token-name).
<section class="hiw-section" style="background: var(--grad-light-blossom);">...</section>L3 — Buttons
Text rule: All button labels must use Title Case — enforced globally via text-transform: capitalize on .hero-btn.
Sizes — desktop
.hero-btn--xs
12px
.hero-btn--sm
13px
.hero-btn
15px
.hero-btn--lg
17px
.hero-btn--xl
19px
Mobile adaptations — max 639px
XS and SM stay unchanged. MD, LG, XL scale down automatically.
--xs
0.45rem 1.1rem · 12px
unchanged
--sm
0.6rem 1.5rem · 13px
unchanged
(default)
0.9rem 2.4rem · 15px
0.75rem 1.8rem · 14px
--lg
1.1rem 3rem · 17px
→ MD · 0.75rem 1.8rem · 14px
--xl
1.3rem 3.6rem · 19px
→ LG · 0.9rem 2.4rem · 15px
--full
width: auto
width: 100% · centered
Full-width helper — .hero-btn--full
Primary — .hero-btn
Main call-to-action. Use once per section.
Pulse — .hero-btn.hero-btn--pulse
Animated primary CTA. Use for hero sections to draw attention.
Ghost Light — .hero-btn.hero-btn--ghost-light
Transparent, no border, dark text. Used alongside a primary button on light backgrounds.
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
Logo
CSS Tokens
--logo-on-dark → fanworlds-logo.svg — white logo, for dark backgrounds
--logo-on-light → fanworlds-logo-dark.svg — dark logo, for light backgrounds
Light logo — on dark background
Used in: public header, footer, auth pages (dark bg)
{{ asset('images/fanworlds-logo.svg') }}
Dark logo — on light background
Used in: authenticated panel, light mode nav, billing pages
{{ asset('images/fanworlds-logo-dark.svg') }}
Size scale
16px — mobile
22px — nav / footer
28px — hero / auth
Coloured Icons
Flat Icon Set
All icons — 24 × 24px
Favicon
SVG — transparent
/favicon.svg
ICO — browser fallback
Used by older browsers that don't support SVG favicons.
Transparent, 6 sizes embedded (16–256px).
Not displayed here — Safari renders ICO files with a white background when used in <img> tags.
/favicon.ico
Sizes: 16 · 32 · 48 · 64 · 128 · 256px
<link rel="icon" href="{{ asset('favicon.svg') }}">
Apple touch icon: /apple-touch-icon.png