01
Primary Backgrounds
Pages use #0A0A0A or #111111. Sections alternate between these two to create depth without borders. Never use pure #000000.
Red Usage
Reserved for primary CTAs, active states, accent lines, live indicators, and hover glow effects. Never use red for body text or large backgrounds.
White Scale
Primary text: 100%. Body/subtext: 60%. Captions/labels: 30%. UI borders: 8–12%. Use opacity rather than gray hex values.
02
Display / Hero (Bebas Neue)
ENTERTAINMENT
WHERE AUDIENCES BECOME PLAYERS
Section Headings (Barlow Condensed)
Our Platforms & Products
Built for the Next Generation of Fans
Mobile Participation Technology
Body Text (Barlow Regular)
Tantainment bridges the gap between passive viewing and active participation creating entertainment ecosystems where every viewer is a potential player.
From prime-time television to live stadium events, our technology infrastructure enables real-time audience engagement at scale across all entertainment formats.
Platform specifications, technical documentation, and press materials are available upon request for verified media and industry partners.
Labels & UI Text
font-size:12px · weight:600 · spacing:0.18em
font-size:10–12px · weight:600–700 · spacing:0.14–0.2em
font-size:13px · weight:600 · spacing:0.1em
03
Primary Actions
XL Primary
Large Primary
Default Primary
Small Primary
Secondary & Ghost Actions
Secondary
Red Outline
Glass
With Icons
Play CTA
Link Out
Download
04
05
Content Cards (default)
LIVE NOW
Play along in real-time as contestants battle through 12 elimination rounds. Your votes shape the outcome.
NEW APP
Compete against millions in daily challenges. Climb the global leaderboard and earn real prizes.
LIVE EVENT
40,000 fans. One stage. Real-time participation that bridges the arena and the screen.
Feature Cards
Prime-time shows with integrated second-screen participation and live audience voting.
Competitive formats where at-home players compete alongside studio contestants in real time.
Native iOS and Android applications powering engagement for millions of simultaneous users.
Stadium-scale interactive experiences combining physical presence with digital participation.
06
07
Our proprietary stack handles millions of simultaneous interactions without latency delivering broadcast-quality synchronisation between screen and device.
We partner with global brands to build entertainment-led campaigns turning product launches into live competitions and loyalty programmes into game shows.
08
Television
Game Shows
Mobile Apps
Digital Games
Live Events
Brand Campaigns
09
Whether you're a broadcaster, a brand, or a fan Tantainment has a platform for you. Get in front of millions of engaged participants.
10
Badges & Status Pills
Live
Red
Neutral
Eyebrow
Dividers
Default Divider
Red Gradient Divider
11
12
13
Easing Curves
Ease Out (0.16,1,0.3,1) All entrances and hover reveals. Fast start, soft landing.
Ease In (0.4,0,1,1) Exit animations. Things leaving the screen.
Circular (0.4,0,0.2,1) State transitions, interactive controls.
Duration Scale
Fast: 180ms Colour changes, opacity, border transitions.
Medium: 360ms Card hover lifts, button presses, menu open.
Slow: 600ms Page section reveals, hero entrance animations.
Scroll Behaviour
Fade-up: Sections enter from 24px below opacity 0 → full on intersection.
Parallax: Hero backgrounds scroll at 0.4× speed.
Sticky nav: Blur/frost activates after 80px scroll depth.
Hover States
Cards: translateY(-4px) + shadow deepens + image scales 1.04×.
Buttons: Background lightens or darkens 8%. Red glows on primary.
Links: Red underline slides in from left over 360ms.
Red Glow System
Red glow effects are used selectively to signal importance, never decoratively.
Contexts: Primary CTAs on hover, LIVE badges, hero accent lighting, platform hub icons, active nav items, stat block bottom borders.
Glassmorphism Rules
Glass components use backdrop-filter: blur(16px) and must always sit over a dark, non-white background.
Used for: Sticky nav, overlay cards, modal dialogs, floating badges on hero.
14
| Token | Value | Usage |
|---|---|---|
| --container | 1280px | Standard page container max-width |
| --container-wide | 1440px | Full-bleed editorial sections |
| --container-text | 760px | Article body, long-form copy |
| --gutter | clamp(20px, 4vw, 60px) | Responsive horizontal padding |
| --col-gap | 24px | Grid column gutter |
| --space-xs | 8px | Inline icon gaps, micro-spacing |
| --space-sm | 16px | Component internal padding |
| --space-md | 24px | Card padding, row gaps |
| --space-lg | 40px | Between components in a section |
| --space-xl | 64px | Between headline and content |
| --space-2xl | 96px | Standard section vertical padding |
| --space-3xl | 140px | Hero and CTA generous padding |
| Breakpoint | Width | Layout Behaviour |
|---|---|---|
| Mobile | < 600px | Single column. Stacked CTAs. Nav collapses to hamburger. |
| Tablet | 600–900px | 2-column grids. Feature blocks stack vertically. |
| Desktop | 900–1280px | Full grid layouts. Side-by-side feature blocks. |
| Wide | > 1280px | Centred container. Generous gutter. Max 4-col grids. |
Tantainment Design System · v1.0 · All components are production-ready HTML/CSS · ©2025 Tantainment