Remixes of tikoverlay.live
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Tikoverlay
description: |
TikOverlay's design system embraces a dark, high-contrast aesthetic centered
on energy and urgency, with a bold red accent cutting through deep charcoal
surfaces. The visual language is minimalist yet commanding—flat surfaces with
subtle borders, crisp typography, and strategically placed depth through
layered shadows and elevation states. The mood is professional-technical,
suited to creators managing live broadcasts; every interaction hints at
immediacy through micro-elevations, glowing accents, and transparent overlays
that suggest both accessibility and premium functionality. The system balances
restraint (muted neutral text on near-black canvases) with explosive moments
of red and accent colour, creating a rhythm that guides attention without
overwhelming.
source:
url: "https://tikoverlay.live/actions"
pagesAnalyzed: 6
extractedAt: 2026-11-05
tokensMeasured: true
colors:
primary: "#FFFFFF"
accent: "#B10000"
canvas: "#0A0A0A"
surface: "#121212"
on-primary: "#222222"
ink: "#F5F5F5"
body: "#E8E8E8"
muted: "#E0E0E0"
faint: "#A0A0A0"
hairline: "#6F6F6F"
accent-1: "#FF0000"
accent-2: "#FF6B6B"
accent-3: "#00C864"
accent-4: "#0000EE"
accent-5: "#78FFA0"
typography:
display-lg:
fontFamily: "Thmanyah Sans"
fontSize: 56px
fontWeight: 800
lineHeight: 1.2
letterSpacing: 0px
display-md:
fontFamily: "Thmanyah Sans"
fontSize: 48px
fontWeight: 800
lineHeight: 1.2
letterSpacing: 0px
display-md-loose:
fontFamily: "Thmanyah Sans"
fontSize: 48px
fontWeight: 800
lineHeight: 1.6
letterSpacing: 0px
display-sm:
fontFamily: "Thmanyah Sans"
fontSize: 42px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0px
heading-xl:
fontFamily: "Thmanyah Sans"
fontSize: 34px
fontWeight: 700
lineHeight: 1
letterSpacing: 0px
heading-lg:
fontFamily: "Thmanyah Sans"
fontSize: 30px
fontWeight: 750
lineHeight: 1.25
letterSpacing: 0px
heading-md:
fontFamily: "Thmanyah Sans"
fontSize: 24px
fontWeight: 500
letterSpacing: 0px
heading-sm:
fontFamily: "Thmanyah Sans"
fontSize: 16px
fontWeight: 600
letterSpacing: 0px
heading-sm-strong:
fontFamily: "Thmanyah Sans"
fontSize: 16px
fontWeight: 700
lineHeight: 1.3
letterSpacing: 0px
heading-xs:
fontFamily: "Thmanyah Sans"
fontSize: 13px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 1.04px
textTransform: uppercase
body-xl:
fontFamily: "Thmanyah Sans"
fontSize: 24px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0px
body-lg:
fontFamily: "Thmanyah Sans"
fontSize: 14px
fontWeight: 500
lineHeight: 1.55
letterSpacing: 0px
body-lg-strong:
fontFamily: "Thmanyah Sans"
fontSize: 14px
fontWeight: 600
lineHeight: 1.6
letterSpacing: 0px
body-md:
fontFamily: "Thmanyah Sans"
fontSize: 13px
fontWeight: 400
lineHeight: 1.55
letterSpacing: 0px
body-md-strong:
fontFamily: "Thmanyah Sans"
fontSize: 13px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0px
body-md-uppercase:
fontFamily: "Thmanyah Sans"
fontSize: 13px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 1.3px
textTransform: uppercase
button-lg:
fontFamily: "Thmanyah Sans"
fontSize: 15px
fontWeight: 600
letterSpacing: 0px
button-md:
fontFamily: "Thmanyah Sans"
fontSize: 13px
fontWeight: 700
letterSpacing: 0.26px
button-sm:
fontFamily: "Thmanyah Sans"
fontSize: 12px
fontWeight: 700
letterSpacing: 0px
button-xs:
fontFamily: "Thmanyah Sans"
fontSize: 11px
fontWeight: 600
letterSpacing: 0px
button-xs-strong:
fontFamily: "Thmanyah Sans"
fontSize: 11px
fontWeight: 700
letterSpacing: 0.44px
label:
fontFamily: "Thmanyah Sans"
fontSize: 12px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0.6px
textTransform: uppercase
caption-md:
fontFamily: "Thmanyah Sans"
fontSize: 12px
fontWeight: 400
letterSpacing: 0px
caption-md-strong:
fontFamily: "Thmanyah Sans"
fontSize: 12px
fontWeight: 600
letterSpacing: 0px
caption-md-2:
fontFamily: "Thmanyah Sans"
fontSize: 12px
fontWeight: 600
letterSpacing: 0.24px
caption-sm:
fontFamily: "Thmanyah Sans"
fontSize: 11px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
caption-sm-strong:
fontFamily: "Thmanyah Sans"
fontSize: 11px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0px
caption-xs:
fontFamily: "Thmanyah Sans"
fontSize: 10px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0px
code:
fontFamily: monospace
fontSize: 12px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
rounded:
none: 0px
xs: 5px
sm: 8px
md: 9px
lg: 10px
xl: 12px
xxl: 14px
r-16: 16px
r-18: 18px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 36px
band: 40px
borderWidths:
thin: 1px
shadows:
sm: "rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset"
md: "rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 2px 8px 0px"
elevationStrategy: progressive
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FDF9F9"
surface: "#F3EFEF"
surfaceRaised: "#EBE8E8"
text: "#191010"
textMuted: "#797272"
border: "#DAD6D6"
accent: "#B10000"
accentFg: "#FFFFFF"
focusRing: "#B10000"
elevation: shadow
dark:
bg: "#0A0A0A"
surface: "#121212"
surfaceRaised: "#252525"
text: "#F5F5F5"
textMuted: "#E8E8E8"
border: "#6F6F6F"
accent: "#C50000"
accentFg: "#FFFFFF"
focusRing: "#B10000"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(rgb(58, 58, 58) 0%, rgb(42, 42, 42) 55%, rgb(31, 31, 31) 100%)"
- context: section
kind: linear
value: "linear-gradient(rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 38%), linear-gradient(rgb(18, 18, 18) 0%, rgb(12, 12, 12) 100%)"
- context: section
kind: linear
value: "linear-gradient(rgb(42, 42, 42) 0%, rgb(26, 26, 26) 100%)"
components:
button-primary:
textColor: "{colors.body}"
border: "1px solid rgba(255, 255, 255, 0.1)"
height: 48px
padding: "12px 24px 12px 24px"
fontSize: 14px
fontFamily: "Thmanyah Sans"
fontWeight: 500
rounded: "{rounded.lg}"
backgroundColor: "rgba(255, 255, 255, 0.04)"
button-primary-sm:
typography: "{typography.button-md}"
textColor: "{colors.body}"
border: "1px solid rgba(255, 255, 255, 0.1)"
height: 40px
padding: "9px 14px 9px 14px"
rounded: "{rounded.lg}"
backgroundColor: "rgba(255, 255, 255, 0.04)"
button-filled:
textColor: "rgb(207, 207, 207)"
height: 23px
padding: "5px 8px 5px 8px"
fontSize: 10px
fontFamily: "Thmanyah Sans"
fontWeight: 700
rounded: "{rounded.sm}"
backgroundColor: "rgb(67, 0, 0)"
button-filled-lg:
typography: "{typography.button-xs-strong}"
textColor: "{colors.accent-2}"
height: 30px
padding: "0px 10px 0px 10px"
rounded: "{rounded.xs}"
backgroundColor: "rgba(177, 0, 0, 0.22)"
button-outline:
textColor: "rgb(242, 242, 242)"
border: "1px solid rgba(255, 255, 255, 0.1)"
height: 48px
padding: "12px 16px 12px 16px"
fontSize: 14px
fontFamily: "Thmanyah Sans"
fontWeight: 600
rounded: "{rounded.lg}"
button-outline-sm:
textColor: "rgb(240, 240, 240)"
border: "1px solid rgba(255, 255, 255, 0.1)"
height: 44px
padding: "12px 18px 12px 18px"
fontSize: 14px
fontFamily: "Thmanyah Sans"
fontWeight: 600
rounded: "{rounded.lg}"
card:
textColor: "{colors.muted}"
border: "1px solid rgba(255, 255, 255, 0.07)"
padding: "22px 24px 20px 24px"
fontSize: 16px
fontFamily: "Thmanyah Sans"
fontWeight: 400
rounded: "{rounded.xxl}"
backgroundColor: "rgba(18, 18, 18, 0.4)"
card-lg:
textColor: "{colors.muted}"
border: "1px solid rgba(177, 0, 0, 0.28)"
padding: "20px 18px 18px 18px"
fontSize: 16px
fontFamily: "Thmanyah Sans"
fontWeight: 400
rounded: "{rounded.xxl}"
backgroundColor: "rgba(22, 16, 16, 0.55)"
badge-primary:
typography: "{typography.button-xs}"
textColor: "rgb(207, 207, 207)"
border: "1px solid rgba(255, 255, 255, 0.1)"
height: 26px
padding: "5px 12px 5px 12px"
rounded: 999px
backgroundColor: "rgba(255, 255, 255, 0.05)"
badge-filled:
typography: "{typography.button-xs}"
textColor: "{colors.accent-2}"
border: "1px solid rgba(177, 0, 0, 0.35)"
height: 26px
padding: "5px 12px 5px 12px"
rounded: 999px
backgroundColor: "rgba(177, 0, 0, 0.15)"
badge-primary-lg:
typography: "{typography.heading-xs}"
textColor: "{colors.muted}"
border: "1px solid rgba(255, 255, 255, 0.1)"
height: 38.7969px
padding: "8px 20px 8px 20px"
rounded: 999px
backgroundColor: "rgba(255, 255, 255, 0.04)"
navigation:
textColor: "{colors.muted}"
border: "1px solid rgba(255, 255, 255, 0.1)"
fontSize: 16px
fontFamily: "Thmanyah Sans"
fontWeight: 400
footer:
textColor: "{colors.muted}"
border: "1px solid rgba(255, 255, 255, 0.07)"
padding: "32px 60px 28px 60px"
fontSize: 16px
fontFamily: "Thmanyah Sans"
fontWeight: 400
backgroundColor: "rgb(12, 12, 12)"
footer-lg:
textColor: "{colors.body}"
border: "1px solid rgba(255, 255, 255, 0.07)"
padding: "32px 60px 28px 60px"
fontSize: 16px
fontFamily: "Thmanyah Sans"
fontWeight: 400
lineHeight: 1.6
backgroundColor: "rgb(12, 12, 12)"
link:
textColor: "{colors.accent-4}"
border: "1px solid rgba(255, 255, 255, 0.1)"
fontSize: 16px
fontFamily: "Thmanyah Sans"
fontWeight: 400
rounded: 50px
link-sm:
typography: "{typography.button-xs}"
textColor: "rgba(255, 255, 255, 0.55)"
padding: "4px 2px 4px 2px"
states:
other-hover:
target: other
state: hover
textColor: "{colors.primary}"
filter: none
button-hover:
target: button
state: hover
backgroundColor: "rgba(244, 67, 54, 0.25)"
input-focus:
target: input
state: focus
boxShadow: none
borderColor: currentcolor
borderWidth: medium
backgroundColor: "rgba(255, 255, 255, 0.07)"
badge-hover:
target: badge
state: hover
opacity: 1
transform: "translateX(-50%) translateY(0px)"
link-hover:
target: link
state: hover
textColor: "{colors.primary}"
boxShadow: none
transform: none
borderColor: currentcolor
borderWidth: medium
backgroundColor: transparent
card-hover:
target: card
state: hover
boxShadow: none
borderColor: "rgba(255, 255, 255, 0.1)"
input-hover:
target: input
state: hover
boxShadow: none
button-disabled:
target: button
state: disabled
textColor: "rgb(119, 119, 119)"
opacity: 1
borderColor: "rgba(255, 255, 255, 0.06)"
backgroundColor: "rgba(255, 255, 255, 0.06)"
button-active:
target: button
state: active
boxShadow: "rgba(255, 0, 0, 0.45) 0px 8px 20px"
transform: "translateY(0px)"
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 18
- width: 768
containerWidth: 440
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 18
- width: 1024
containerWidth: 1024
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 18
- width: 1280
containerWidth: 1280
gridColumns: 4
navLinksVisible: 0
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 18
- width: 1440
containerWidth: 1440
gridColumns: 4
navLinksVisible: 0
menuToggleVisible: false
headingPx: 24
bodyPx: 16
sectionPaddingX: 18
coverage:
statesFound: 92
gradientsFound: 3
rolesUnassigned: 5
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
TikOverlay's design system embraces a dark, high-contrast aesthetic centered on energy and urgency, with a bold red accent cutting through deep charcoal surfaces. The visual language is minimalist yet commanding—flat surfaces with subtle borders, crisp typography, and strategically placed depth through layered shadows and elevation states. The mood is professional-technical, suited to creators managing live broadcasts; every interaction hints at immediacy through micro-elevations, glowing accents, and transparent overlays that suggest both accessibility and premium functionality. The system balances restraint (muted neutral text on near-black canvases) with explosive moments of red and accent colour, creating a rhythm that guides attention without overwhelming.
Key Characteristics
{colors.canvas} — #0A0A0A) with near-black surfaces{colors.accent} — #B10000) paired with bright red (#FF0000) accents for highlights and CTAs{rounded.r-18}) for approachability{rounded.none}) for decisive interaction{colors.primary} — #FFFFFF): Primary CTA fill, active states, brand mark, high-contrast headings{colors.accent} — #B10000): Secondary accent, hover states, error-adjacent warnings, premium feature flags{colors.accent-1} — #FF0000): Decorative, highlight accents, animated attention-grabbers{colors.accent-2} — #FF6B6B): Decorative, soft accent for non-critical highlights{colors.accent-3} — #00C864): Decorative, success-adjacent visual cue (not a semantic status colour){colors.accent-4} — #0000EE): Decorative, interactive hint or link accent{colors.accent-5} — #78FFA0): Decorative, futuristic accent for edge UI elements{colors.canvas} — #0A0A0A): Default page background, lowest surface{colors.surface} — #121212): Card, panel, and modal backgrounds; raised from canvas{colors.ink} — #F5F5F5): Primary heading text, high-contrast copy{colors.body} — #E8E8E8): Body copy, default text{colors.muted} — #E0E0E0): Secondary text, captions, de-emphasized copy{colors.faint} — #A0A0A0): Tertiary text, placeholder text, disabled states{colors.on-primary} — #222222): Label text overlaid on brand surfaces or high-contrast fills{colors.hairline} — #6F6F6F): 1px borders, dividers, subtle grid lines; bridges canvas and surface tonesPrimary: Thmanyah Sans (Arabic-native sans-serif), system fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
Secondary (Code): monospace (system monospace stack for code blocks)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | Thmanyah Sans | 56px | 800 | 1.2 | 0px | Hero headline, max impact |
| Display Medium | Thmanyah Sans | 48px | 800 | 1.2 | 0px | Primary page title, section hero |
| Display Medium Loose | Thmanyah Sans | 48px | 800 | 1.6 | 0px | Spaced display, narrative context |
| Display Small | Thmanyah Sans | 42px | 700 | 1.6 | 0px | Secondary headline, feature hero |
| Heading Extra Large | Thmanyah Sans | 34px | 700 | 1.0 | 0px | Card title, modal heading |
| Heading Large | Thmanyah Sans | 30px | 750 | 1.25 | 0px | Subsection title |
| Heading Medium | Thmanyah Sans | 24px | 500 | — | 0px | Section heading, supporting title |
| Heading Small Strong | Thmanyah Sans | 16px | 700 | 1.3 | 0px | Card subtitle, label |
| Heading Small | Thmanyah Sans | 16px | 600 | — | 0px | Navigation item, link label |
| Heading Extra Small | Thmanyah Sans | 13px | 700 | 1.6 | 1.04px | Uppercase micro-heading, badge label |
| Body Extra Large | Thmanyah Sans | 24px | 700 | 1.6 | 0px | Prominent metric, large body emphasis |
| Body Large Strong | Thmanyah Sans | 14px | 600 | 1.6 | 0px | Emphasized body text, list item |
| Body Large | Thmanyah Sans | 14px | 500 | 1.55 | 0px | Default body copy, description |
| Body Medium Strong | Thmanyah Sans | 13px | 700 | 1.6 | 0px | Bold inline text, strong emphasis |
| Body Medium Uppercase | Thmanyah Sans | 13px | 700 | 1.6 | 1.3px | Uppercase label, all-caps instruction |
| Body Medium | Thmanyah Sans | 13px | 400 | 1.55 | 0px | Default paragraph, article body |
| Button Medium Uppercase | Thmanyah Sans | 13px | 700 | — | 1.04px | Uppercase button, all-caps CTA |
| Button Medium | Thmanyah Sans | 13px | 700 | — | 0.26px | Primary button label |
| Button Small | Thmanyah Sans | 12px | 700 | — | 0px | Secondary button, compact action |
| Button Extra Small Strong | Thmanyah Sans | 11px | 700 | — | 0.44px | Micro button, tight action |
| Button Extra Small | Thmanyah Sans | 11px | 600 | — | 0px | Minimal button, tag action |
| Button Large | Thmanyah Sans | 15px | 600 | — | 0px | Expanded button, large action area |
| Caption Medium Strong | Thmanyah Sans | 12px | 600 | — | 0.24px | Strong caption, emphasis label |
| Caption Medium | Thmanyah Sans | 12px | 400 | — | 0px | Standard caption, small note |
| Caption Small Strong | Thmanyah Sans | 11px | 700 | 1.6 | 0px | Strong caption, metadata |
| Caption Small | Thmanyah Sans | 11px | 400 | 1.6 | 0px | Smallest body text, microcopy |
| Caption Extra Small | Thmanyah Sans | 10px | 700 | 1.6 | 0px | Tiniest label, footnote |
| Label | Thmanyah Sans | 12px | 700 | 1.6 | 0.6–1.2px | Table header, form label (uppercase, tight tracking) |
| Code | monospace | 12px | 400 | 1.6 | 0px | Code snippet, monospace text |
Primary (Full-width)
rgba(255, 255, 255, 0.04){colors.body} (#E8E8E8){spacing.sm} {spacing.md} (12px 24px){typography.body-lg} (14px, weight 500)rgba(255, 255, 255, 0.1){rounded.lg} (10px)rgba(255, 255, 255, 0.07), border rgba(255, 255, 255, 0.16), text #F2F2F2Primary Small
rgba(255, 255, 255, 0.04)#E8E8E8{typography.button-md} (13px, weight 700)rgba(255, 255, 255, 0.1){rounded.lg} (10px)rgba(255, 255, 255, 0.07), border rgba(255, 255, 255, 0.16)Filled (Accent)
#430000#CFB7B7 (lighter on dark red){typography.caption-xs} (10px, weight 700){rounded.sm} (8px)rgba(177, 0, 0, 0.1), border rgb(177, 0, 0), text #D00000Filled Large (Accent)
rgba(177, 0, 0, 0.22)#FF6B6B (bright coral){typography.button-xs-strong} (11px, weight 700){rounded.xs} (5px)#FF6B6B, box-shadow rgba(255, 0, 0, 0.45) 0px 0px 8px, filter drop-shadow(rgba(255, 0, 0, 0.45) 0px 0px 8px)Outline (Secondary)
rgba(0, 0, 0, 0) (transparent)#F2F2F2{typography.body-lg-strong} (14px, weight 600)rgba(255, 255, 255, 0.1){rounded.lg} (10px)rgba(255, 255, 255, 0.16), text #FFFFFFOutline Small
rgba(0, 0, 0, 0) (transparent)#F0F0F0{typography.body-lg-strong} (14px, weight 600)rgba(255, 255, 255, 0.1){rounded.lg} (10px)rgba(255, 255, 255, 0.16)Disabled
rgba(255, 255, 255, 0.06)#777777 (faint gray)rgba(255, 255, 255, 0.06)Default Card
rgba(18, 18, 18, 0.4) (semi-transparent dark surface)#E0E0E0rgba(255, 255, 255, 0.07){rounded.xxl} (14px){typography.body-lg} (14px, weight 400)rgba(255, 255, 255, 0.1), background rgba(255, 255, 255, 0.04), box-shadow 0 8px 32px var(--primary-rgba-15)Default Card Large
rgba(22, 16, 16, 0.55) (warmer dark surface, red-tinted)#E0E0E0rgba(177, 0, 0, 0.28) (red-tinted border){rounded.xxl} (14px){typography.body-lg} (14px, weight 400)rgba(177, 0, 0, 0.18), border rgba(255, 255, 255, 0.12), transform translateY(-2px), box-shadow 0 12px 40px var(--primary-rgba-15)Text Input
rgba(255, 255, 255, 0.06) (default), rgba(255, 255, 255, 0.07) (focus)#E8E8E8rgba(177, 0, 0, 0.45) (focus){typography.body-md} (13px, weight 400)0 0 0 3px var(--primary-rgba-10), 0 4px 16px var(--primary-rgba-25), 0 0 15px var(--primary-rgba-15), border-color var(--primary-rgba-60), background rgba(10, 10, 10, 0.8)none, background rgba(255, 255, 255, 0.07) (if applicable)Primary Badge
rgba(255, 255, 255, 0.05)#CFB7B7{typography.button-xs-strong} (11px, weight 600)rgba(255, 255, 255, 0.1){rounded.full} (9999px — pill shape)translateX(-50%) translateY(0px)Filled Badge
rgba(177, 0, 0, 0.15) (red-tinted)#FF6B6B (bright coral){typography.button-xs-strong} (11px, weight 600)rgba(177, 0, 0, 0.35) (red-tinted border){rounded.full} (9999px — pill shape)Primary Large Badge
rgba(255, 255, 255, 0.04)#E0E0E0{typography.body-md} (13px, weight 700)rgba(255, 255, 255, 0.1){rounded.full} (9999px — pill shape)Vertical Navigation (Default)
rgba(0, 0, 0, 0) (transparent)#E0E0E0{typography.heading-sm} (16px, weight 400)rgba(255, 255, 255, 0.1){rounded.none} (0px — sharp edges)#FFFFFF, box-shadow none, transform none, background rgba(90, 0, 0) (red-tinted highlight)Default Footer
#0C0C0C (darkest surface)#E0E0E0{typography.body-lg} (16px, weight 400)rgba(255, 255, 255, 0.07) (top divider){rounded.none} (0px)Large Footer
#0C0C0C (darkest surface)#E8E8E8{typography.body-lg} (16px, weight 400, line-height 25.6px)rgba(255, 255, 255, 0.07) (top divider){rounded.none} (0px)Default Link
#0000EE (electric blue, unvisited){typography.heading-sm} (16px, weight 400)rgba(255, 255, 255, 0.1)rgba(0, 0, 0, 0) (transparent)var(--primary-color) (brand), text-decoration underline, transform translateY(-1px), box-shadow 0 0 20px var(--primary-rgba-20)Small Link
rgba(255, 255, 255, 0.55) (muted gray){typography.button-xs-strong} (11px, weight 600){rounded.none} (0px)rgba(0, 0, 0, 0) (transparent)var(--primary-color-light), opacity 1Base unit: {spacing.xs} = 8px. All spacing derives from this 8px grid.
| Token | Value | Context |
|---|---|---|
{spacing.xxs} | 4px | Tight micro-spacing (between icon and label) |
{spacing.xs} | 8px | Compact padding, small gaps |
{spacing.sm} | 12px | Button padding (vertical), list item gaps |
{spacing.md} | 16px | Card padding, standard gap, section spacing |
{spacing.lg} | 20px | Larger gaps, subsection margins |
{spacing.xl} | 24px | Card padding, heading margins |
{spacing.xxl} | 28px | Large feature spacing |
{spacing.xxxl} | 32px | Footer padding, major sections |
{spacing.section} | 36px | Between major sections |
{spacing.band} | 40px | Between full-width bands, major layout divisions |
{spacing.section} (36px) on sections at all breakpoints, except mobile where reduced to 18pxWhitespace is used to create visual hierarchy and breathing room. Surfaces layer atop each other with subtle borders ({colors.hairline} — 1px) rather than aggressive shadows, so negative space defines hierarchy. Section padding is generous (36–40px) to separate major content blocks; card internal padding sits at 20–24px to frame content without crowding. The system prefers subtle horizontal rhythm (8px/16px steps) over large void spaces, creating a densely organized but clear layout.
| Value | Token | Components | Use |
|---|---|---|---|
| 0px | {rounded.none} | Buttons, navigation, footer | Sharp, decisive edges for critical actions |
| 5px | {rounded.xs} | Small filled buttons, icons | Tiny rounded corners for micro-components |
| 8px | {rounded.sm} | Small buttons, images | Subtle rounding for small surfaces |
| 9px | {rounded.md} | Form inputs (occasional) | Mild rounding for accessibility |
| 10px | {rounded.lg} | Primary buttons, outline buttons | Standard button rounding; balance of modern and professional |
| 12px | {rounded.xl} | Some form controls | Medium rounding, slightly softer than lg |
| 14px | {rounded.xxl} | Cards, containers, modals | Consistent card rounding across the system |
| 16px | {rounded.r-16} | Card surfaces, larger containers | Soft card look, premium feel |
| 18px | {rounded.r-18} | Large cards, hero sections | Maximum rounding for prominent surfaces |
| 9999px | {rounded.full} | Badges, pills, circular elements | Perfect pill shape; fully rounded |
1px): Default border stroke for buttons, cards, inputs, navigation. Provides subtle definition without visual weight.| Level | Treatment | Use |
|---|---|---|
| Base (Flat) | No shadow, border only | Canvas background, flat surfaces, default card state |
| Micro Inset (Level 1) | rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset | Button inset light, subtle tactile top edge |
| Micro Layered (Level 2) | rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 2px 8px 0px | Button raised, card hover, minor lift |
| Hover Lift | 0 8px 32px var(--primary-rgba-15) | Card hover state, modal content |
| Elevated | 0 12px 40px var(--primary-rgba-15) | Modal dialog, expanded card, prominent surface |
| Floating | 0 16px 46px var(--primary-rgba-20) | Modal overlay, dropdown, tooltip |
| Max Elevation | rgba(153, 27, 27, 0.38) 0px 8px 22px or 0 6px 28px var(--primary-rgba-50) | Maximum depth for accent accent surfaces, hero highlights |
Shadow Philosophy: The system employs a color-blocking depth model rather than aggressive shadows. Surfaces are distinguished by colour (canvas → surface → card) and borders; shadows are reserved for interactive hover states and floating overlays. Inset shadows (light creases) provide subtle tactile cues on buttons. Red-tinted shadows reinforce the accent colour; neutral rgba layers keep most UI grounded. Progressive layers stack multiple small shadows (inset + drop) for depth without visual clutter.
| Opacity | Hex / RGBA Value | Use |
|---|---|---|
| 100% | 1.00 | Default, fully opaque text, solid fills |
| 98% | 0.98 | Nearly opaque surfaces |
| 90% | 0.90 | Slight transparency for overlay surfaces |
| 79% | 0.79 | Medium transparency, semi-translucent overlay |
| 75% | 0.75 | Disabled state text (lighter), semi-transparent surface |
| 6% | 0.06 | Extremely subtle background tint, near-invisible border |
| 0% | 0.00 | Fully transparent (no fill) |
Opacity usage:
rgba(255, 255, 255, 0.04–0.08)) for hover depthrgba(255, 255, 255, 0.05–0.18)) for hairline definition| Layer Name | Z-Index | Elements | Use |
|---|---|---|---|
| Base | 1 | Canvas, page background, default surfaces | Lowest layer, foundation |
| Content | 2–5 | Cards, containers, navigation | Content layer above base |
| Dropdown | 10 | Dropdown menu, popover | Above content, interactive layer |
| Sticky | 100–110 | Fixed header, sticky navigation, sticky footer | Above scrolling content, persists |
| Modal | 9999 | Dialog backdrop, modal overlay, toast notification | Topmost layer, user attention |
Modal backdrops sit at 9999 to ensure they eclipse all other content. Sticky elements (header) occupy 100–110 for visibility during scroll without blocking modals. Dropdowns occupy 10 to appear above standard content. Base surfaces form the foundation, with content layering above.
{colors.accent} — #B10000) to flag premium features, hover states, and high-priority actions. The red brand mark is reserved for emphasis; apply it consistently across CTAs and attention-demanding moments.rgba(18, 18, 18, 0.4) vs rgba(22, 16, 16, 0.55)) relies on colour-blocking, not depth; maintain this restraint.{colors.ink} — #F5F5F5) with dark surfaces for readability. All body text must clear WCAG AA contrast ratios (7:1) against {colors.canvas}.{rounded.full}) and rounded cards ({rounded.r-18}) for modern warmth, but keep buttons sharp ({rounded.none}) for decisive, technical appearance.{spacing.md} (16px) as the baseline for internal card padding and gap sizes. Scales of 12px / 16px / 20px / 24px create predictable rhythm.{typography.heading-xs} and {typography.label}). This tracking reinforces structure and formal hierarchy.rgba(255, 255, 255, 0.05–0.08) 0px 1px 0px 0px inset) on interactive elements to suggest tactile depth and press states without visual weight.rgba(255, 255, 255, 0.06)) that shift on focus (rgba(255, 255, 255, 0.07)) for subtle affordance.translateY() lift and box-shadow 0 8px 32px var(--primary-rgba-15) to show interactivity without overwhelming the user.{colors.accent-1} through {colors.accent-5}) as semantic status indicators. They are visual flourishes only; error/success/warning states are not defined in this system.{spacing.xxl} (28px) for internal card padding. Overcrowding breaks the visual system; instead, expand card width or split content into multiple cards.{rounded.lg} or greater) to primary action buttons. Sharp edges ({rounded.none}) signal decisiveness and technical precision; reserve rounding for secondary and tertiary actions.{colors.faint} — #A0A0A0) on dark surfaces without verifying contrast. Always verify WCAG AA (4.5:1) or AAA (7:1) ratios for accessibility.{colors.hairline}) from cards or containers. It is the primary visual separators in the color-blocking system.| Viewport | Width | Content Column | Grid Columns | Key Changes |
|---|---|---|---|---|
| Mobile | 375px | 375px | 1 | Single-column layout, minimal section padding (18px), full-width cards |
| Tablet | 768px | 440px | 3 | 3-column grid for cards, consistent section padding (18px), maintained heading sizes |
| Desktop | 1024px | 1024px | 3 | Full-width content, multi-column layouts, consistent spacing |
| Large Desktop | 1280px | 1280px | 4 | 4-column grid for dense layouts, increased section padding (36px), spacious layout |
| Extra Large | 1440px | 1440px | 4 | Maximum width, full 4-column grid, generous whitespace, optimal reading line-length |
Breakpoint rationale: Mobile (375px) handles single-column stacking with reduced horizontal padding (18px). At 768px, cards transition to a 3-column grid while content column expands to 440px. Desktop (1024px) utilizes the full viewport for content. 1280px and 1440px unlock 4-column grids and larger section spacing for landscape layouts. Heading sizes and body text remain constant across all breakpoints; only layout density and grid columns change.
{rounded.lg} buttons) to 48px (full-width primary buttons){colors.primary} — #FFFFFF){colors.accent} — #B10000){colors.canvas} — #0A0A0A){colors.surface} — #121212){colors.ink} — #F5F5F5){colors.body} — #E8E8E8){colors.muted} — #E0E0E0){colors.faint} — #A0A0A0){colors.hairline} — #6F6F6F)#FF0000), Coral (#FF6B6B), Green (#00C864), Blue (#0000EE), Lime (#78FFA0)Always pair dark surfaces with high-contrast text. Use {colors.ink} (#F5F5F5) on {colors.canvas} (#0A0A0A) for headings; {colors.body} (#E8E8E8) for body. Never go below {colors.muted} (#E0E0E0) for primary content.
Apply red accent (#B10000) sparingly. Reserve it for hover states, premium badges, and primary CTAs. Do not overuse; it loses impact if applied to every element.
Card padding is always 20–24px internally. Section gaps are 16px, 20px, 24px, or 32px depending on content hierarchy. Use {spacing.md} (16px) as default.
Button height: 40px (small), 44px (standard), 48px (large). Never deviate without documentation.
Border radius on buttons is 0px ({rounded.none}); cards are 14–18px ({rounded.xxl} or {rounded.r-18}); badges are 9999px ({rounded.full}). These are fixed roles; do not mix-and-match.
Borders are 1px and use rgba(255, 255, 255, 0.07–0.18) opacity depending on surface contrast. Never use solid gray; always use transparent white or red overlays.
Hover states add 1–5px lift via translateY(-1px to -5px) and box-shadow 0 8px 32px var(--primary-rgba-15). Do not rotate or skew; lifts should feel natural and responsive.
Opacity scaling: Buttons 4–8% rgba, borders 5–18%, overlays 55–98%. Disabled elements reduce to 55–70% opacity for reduced prominence.
Typography is Thmanyah Sans throughout. Display sizes (42–56px, weight 700–800) are reserved for headings. Body defaults to 13–14px, weight 400–500. Buttons/labels are 11–15px, weight 600–700 with tracking.
Z-index layering: Base (1–5), dropdown (10), sticky (100–110), modal (9999). Confirm elements sit in the correct visual layer; avoid arbitrary z-index values.
Spacing is always 8px-based. Use tokens: xxs (4px), xs (8px), sm (12px), md (16px), lg (20px), xl (24px), xxl (28px), xxxl (32px), section (36px), band (40px). Interpolate only in 4–8px steps if necessary.
Card hover states elevate with border lightening and shadow expansion. Primary card: border rgba(255, 255, 255, 0.1), shadow 0 8px 32px var(--primary-rgba-15). Red-tinted card: border rgba(177, 0, 0, 0.28) (static), shadow shifts to red tint.
Form input focus states receive a triple-layer box-shadow and red-tinted border. Never remove focus outlines; they are WCAG requirements. Use 0 0 0 3px var(--primary-rgba-10) as the outer ring.
Disabled buttons do not hover. They remain at baseline opacity (0.55–0.7) and cannot receive :hover styles. Use :disabled selector strictly.
Truncate long text with text-overflow: ellipsis on single-line elements; use line-clamp for multi-line truncation. Never let text break the card layout.
Semantic status colours (error, success, warning, info) are not defined in this system. The site does not declare red, green, yellow, or blue as semantic status indicators. The extracted palette includes green (#00C864) and blue (#0000EE), but they are treated as decorative accents only, not error/success states. Implementers requiring status colours must define them separately or use the brand accent (#B10000) for warnings/errors by convention.
Interaction states (:hover, :active, :focus, :disabled) are partially observed. Hover states are extensively documented; however, :active (pressed) and :focus states for most buttons and inputs are not fully captured in the extraction. Assume :focus adds a 3px rgba halo and border-colour shift; :active reduces shadow or opacity slightly. Full state documentation is recommended.
5 extracted colours have no measured role: {colors.accent-1} through {colors.accent-5} (red, coral, green, blue, lime). They appear as decorative elements (hero gradients, icon accents, brand flourishes) but were not measured on semantic UI elements. Their intended role is visual embellishment; do not use them as form validation or status signals.
Dark mode / light mode behaviour is not documented. The extraction was performed on a single dark theme. No light mode was captured, and no theme-switching logic was observed. This design system describes only the dark theme as measured.
Animation and transition timings are not included. The extraction captured static styles and some :hover transform properties (e.g., translateY(-2px)), but not transition, animation, or @keyframes rules. Implementers should define standard timing (e.g., 0.2s ease-out for hover, 0.3s ease-in-out for state changes) as a secondary specification.
Surfaces behind authentication (user dashboard, account settings, admin panel) were not visited. Coverage includes public pages only (landing, pricing, features). Internal application UI may differ; compare this system to your app's authenticated surfaces if available.
Semantic line-height values for display typography. Line heights for headings (display-lg, display-md, etc.) are measured as 1.0–1.2; exact px values in a 56px display context are not extracted. Verify implementation against designer mockups or prototype to confirm readability.
Focus ring styling for keyboard navigation is inferred but not fully extracted. Assume a 3px rgba halo (0 0 0 3px var(--primary-rgba-10)) and border shift to red tint (var(--primary-rgba-60)) on focus. Full WCAG AAA keyboard navigation support must be verified separately.
Gradient overlays on hero sections are captured verbatim but may not apply universally. Three gradients were extracted; only use them on hero/banner sections, not as general surface fills. Custom gradients for other contexts are not defined.
Breakpoint media query syntax (e.g., @media (max-width: 768px)) is not specified. The breakpoint table lists viewport widths where observed changes occur; implementers should write their own media queries using these widths as reference points.
Design System Document Generated: This DESIGN.md captures the TikOverlay platform's visual language across 6 pages of measurement. It is accurate to the extraction date and should be reviewed against the latest product screenshots before implementation. Refer to "Known Gaps" for limitations and secondary considerations.