LionBot Design System

Overview

LionBot presents itself as a high-octane, gaming-inflected SaaS product landing page built for the Discord ecosystem. The visual language leans into dark-mode maximalism: a near-black plum canvas ({colors.surface} at #1a0f16) serves as the stage for electric-pink CTAs ({colors.accent} at #eb4799), emerald-green success metrics ({colors.primary} at #34d399), and warm gold premium callouts ({colors.secondary} at #fbbf24). The overall mood is energetic and trustworthy—simultaneously playful enough for Discord communities and polished enough for server admins evaluating enterprise-grade tooling.

Brand voltage lives across multiple touchpoints. The {colors.accent} pink dominates the primary conversion path: the "Invite Bot" button ({component.button-primary}), the "Gift now" link in the gradient banner, and subtle hover glows throughout. Meanwhile, {colors.primary} emerald carries semantic meaning—it's reserved for numbers that denote growth, activity, and health: the 3,678 productive users, 352.6m sessions tracked, and verification checkmarks. The {colors.secondary} gold badges "Premium" status with a subtle warmth that signals exclusivity without aggression.

The typography system is built on a bold-weight-first hierarchy. Unlike editorial systems that rely on size alone, LionBot uses aggressive weights—{typography.display-lg} lands at 700 weight, {typography.title-lg} at 700, even body copy sits at 500—to ensure legibility against the dark canvas. The headline "The Ultimate Discord Productivity Bot" uses tight letter-spacing (-1.5px at the H1 level) and a 1:1 line-height ratio, creating dense, impactful blocks of text that feel more like game UI than traditional web copy. The dual-font pairing of Rubik (geometric, friendly) for display roles and Inter (neutral, highly legible) for body text gives the system personality where it matters and clarity everywhere else.

Shape language is predominantly pill-rounded. Buttons, badges, trust indicators, and the trust badge all use {rounded.pill} (9999px) or {rounded.md} (10px) radii, creating soft, approachable surfaces that counterbalance the darkness. The stats card pushes further with {rounded.xl} (24px) corners, giving it a modern, almost mobile-app-card aesthetic. Only structural containers like the nav bar and page sections maintain sharper {rounded.DEFAULT} (8px) edges.

Sub-systems visible on this single page include: a Hero Dialect (massive headline, dual CTA split between primary pink action and secondary ghost, trust signals below); a Live Stats Dialect (glass-morphic card with real-time metrics, avatar stacks, green-tinted values); a Social Proof Footer (grid of community counts with oversized numerals); and a Premium/Gating Dialect (gold-accented nav item, green-bordered purchase tags).

Key Characteristics:

• Dark plum-black canvas ({colors.surface} — #1a0f16) with no true white backgrounds anywhere
• Electric-pink primary actions ({component.button-primary}) using {colors.accent} (#eb4799) with glow shadows
• Emerald-green metric highlighting ({colors.primary} — #34d399) for all quantitative proof points
• Bold-weight type hierarchy starting at 500 for body and reaching 700–800 for displays
• Pill-shaped interactive elements ({rounded.pill}) dominating buttons, badges, and tags
• Glass-morphic elevated surfaces ({colors.surface-card} at 60% opacity) for floating cards
• Gradient banner treatment ({component.gradient-banner}) spanning pink→purple→blue spectrum
• Lucide icon library with currentColor inheritance throughout
• Tailwind utility-first architecture with custom design tokens
• 144px vertical section rhythm ({spacing.section}) giving the hero extreme breathing room

Colors

Brand & Accent

• Primary ({colors.primary} — #34d399): Emerald green used for all positive metrics, success states, session counts, verification checkmarks, and highlighted numerical values within {component.stats-card} and {component.social-proof-stat}.
• Primary Hover ({colors.primary-hover} — #4ade80): Lighter emerald shade for hover states on green-tinted interactive elements.
• Primary Dim ({colors.primary-dim} — #059669): Deep forest green for pressed/disabled states or low-emphasis primary contexts.
• Accent ({colors.accent} — #eb4799): Electric pink—the dominant conversion color. Powers {component.button-primary}, the "Gift now" CTA in {component.gradient-banner}, link text, and glow shadow tints.
• Accent Hover ({colors.accent-hover} — #f472b6): Brighter pink for hover interactions on accent-colored elements.
• Accent Soft ({colors.accent-soft} — rgba(235, 71, 153, 0.1)): 10% opacity pink wash used for {component.trust-badge} background fills and subtle hover backgrounds.
• Secondary ({colors.secondary} — #fbbf24): Warm amber/gold reserved for "Premium" branding, upgrade prompts, and tier differentiation.
• Secondary Soft ({colors.secondary-soft} — rgba(251, 191, 36, 0.15)): Faint gold tint for premium badge backgrounds or subtle emphasis zones.

Surface

• Canvas ({colors.canvas} — #60a5fa): Sky blue appearing in the gradient banner's right terminus; also referenced as the technical canvas token despite the page's dominant dark mode.
• Surface ({colors.surface} — #1a0f16): Near-black plum—the true background of the entire page below the header. Deepest surface level.
• Surface Soft ({colors.surface-soft} — #251821): Dark raisin used for slightly elevated zones, input backgrounds, or code-block-like areas.
• Surface Strong ({colors.surface-strong} — #342730): Medium-dark plum for borders, active nav item backgrounds, and structural dividers.
• Surface Elevated ({colors.surface-elevated} — rgba(37, 24, 33, 0.4)): Semi-transparent dark overlay at 40% opacity for hover states on ghost buttons and dropdown backgrounds.
• Surface Card ({colors.surface-card} — rgba(37, 24, 33, 0.6)): 60% opacity plum backing for the {component.stats-card}, creating a glass-morphic floating effect against the hero background.

Text & Ink

• Ink ({colors.ink} — #f4f0f2): Warm off-white—the primary text color for headlines, nav items, and high-emphasis body copy. Appears on {colors.surface}.
• Body ({colors.body} — #9f8996): Muted rose-gray for paragraph text, descriptions, secondary nav links, and standard content.
• Muted ({colors.muted} — #7a6575): Dusty mauve for tertiary text: stat labels, captions, placeholder hints, and footer copy.
• Muted Strong ({colors.muted-strong} — #5c4a57): Deeper mauve for disabled text or very-low-emphasis elements.
• On Primary ({colors.on-primary} — #ffffff): Pure white text rendered atop {colors.primary}, {colors.accent}, or any saturated brand background.
• On Dark ({colors.on-dark} — #f4f0f2): Equivalent to ink; used on dark surfaces above {colors.surface}.
• Inverse ({colors.inverse} — #1a0f16): Dark text for rendering on light backgrounds (e.g., inside the gradient banner).

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(52, 39, 48, 0.6)): Semi-transparent plum border at 60% opacity for subtle dividers, input outlines, and card edges.
• Border Strong ({colors.border-strong} — #342730): Solid medium-plum for prominent borders like {component.button-secondary}'s outline and structural separators.
• Border Accent ({colors.border-accent} — rgba(235, 71, 153, 0.3)): Pink-tinted border for {component.button-tag-green}'s edge and accent-focused containers.
• Border Primary ({colors.border-primary} — rgba(52, 211, 153, 0.3)): Emerald-tinted border for success-state outlines and green tag components.

Semantic

• Success ({colors.success} — #34d399): Maps to primary emerald; used for confirmation states, online indicators, and positive metrics.
• Warning ({colors.warning} — #fbbf24): Amber for caution states, premium upsells, and attention-requiring notices.
• Error ({colors.error} — #ef4444): Red for destructive actions, validation failures, and error messages (inferred).
• Info ({colors.info} — #60a5fa): Blue for informational tooltips, help text, and neutral notifications.
• Link ({colors.link} — #eb4799): Pink matching accent for inline hyperlinks.
• Link Hover ({colors.link-hover} — #f472b6): Lighter pink for hovered link states.

Signature / Brand-specific

• Signature Coral ({colors.signature-coral} — #eb4799): Alias for the primary CTA pink.
• Signature Emerald ({colors.signature-emerald} — #34d399): Alias for the metric-highlighting green.
• Signature Gold ({colors.signature-gold} — #fbbf24): Alias for premium/upgrade amber.
• Signature Lavender ({colors.signature-lavender} — #d8b4fe): Soft purple appearing in decorative gradient transitions.
• Signature Blue ({colors.signature-blue} — #60a5fa): Sky blue capping the gradient banner spectrum.

Typography

Font Family

The system is built on a dual-typeface pairing of Rubik and Inter, both loaded as self-hosted WOFF files from the Next.js asset pipeline. Rubik (a geometric sans-serif with slightly softened curves and open apertures) handles all display and heading roles—its friendly, approachable character countersinks the aggressive weight choices (700–800). Inter (a neo-grotesque optimized for screen legibility at small sizes) manages body copy, UI labels, buttons, and any text below 18px. Both faces fall back to system sans-serif stacks including ui-sans-serif, system-ui, and platform-specific emoji fonts for full Unicode coverage.

A third face, ChunkyDunk, is loaded as a display/branding font (visible in the lion-head logo mark) but is not exposed as a general-purpose typography token—it remains locked to the logo lockup. For monospace needs (code snippets, command examples, version strings), the system defaults to {typography.mono} using the platform-native monospace stack.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 72px | 800 | 1.05 | -0.03em | Hero-scale headlines (future use, larger breakpoints) | | {typography.display-lg} | 60px | 700 | 1 | -0.025em | Main hero headline ("The Ultimate Discord Productivity Bot") | | {typography.title-lg} | 30px | 700 | 1.2 | -0.01em | Section headings (H2 equivalent) | | {typography.title-md} | 24px | 600 | 1.33 | 0 | Subsection headings (H3), card titles | | {typography.title-sm} | 18px | 600 | 1.4 | 0 | Feature titles, small headings | | {typography.stat-xl} | 40px | 700 | 1.1 | -0.02em | Large metric numbers in stats card and social proof | | {typography.body-md} | 14px | 500 | 1.43 | 0 | Paragraph text, descriptions, standard body | | {typography.body-sm} | 13px | 500 | 1.46 | 0 | Secondary body, sidebar text, compact paragraphs | | {typography.button} | 14px | 600 | 1 | 0 | Button labels, CTA text, nav items | | {typography.label-md} | 14px | 500 | 1.43 | 0.02em | Form labels, field titles, metadata keys | | {typography.label-sm} | 10px | 600 | 1 | 0.06em | Tags, badges, uppercase micro-labels ("LIVE RIGHT NOW", "PREMIUM") | | {typography.caption} | 12px | 500 | 1.38 | 0.02em | Stat labels, footnotes, timestamps | | {typography.mono} | 13px | 400 | 1.5 | 0 | Code, commands, version strings |

Principles

The LionBot typographic voice is defined by weight-driven hierarchy over size-driven hierarchy. While the display headline does scale to 60px, the jump from body (14px) to title (30px) is only 2×—modest by landing-page standards. Instead, the system relies on weight contrasts: body copy at 500, titles at 600–700, display at 700–800. This ensures every element reads crisply against the dark canvas without requiring massive size inflation.

Letter-spacing plays a subtle but critical role. Display text gets negative tracking (-0.025em to -0.03em) tightening the letterforms for impact, while micro-labels get positive tracking (0.06em) with uppercase transformation for that technical/gaming-UI feel. Body text sits at normal spacing, letting Inter's native metrics handle legibility.

Color carries significant hierarchical weight. The {colors.ink} off-white is reserved for the top-level message (headline, key value prop), while {colors.body} rose-gray handles supporting copy, and {colors.muted} dusts tertiary information. When a number matters—like "352.6m sessions"—it jumps to {colors.primary} emerald, creating a dual-channel emphasis (size + color) that pulls the eye.

The system avoids italics entirely in the extracted styles; emphasis comes through weight, color, or uppercase transforms instead. This reinforces the direct, gaming-grade tone: no hedging, no elegance-signaling, just clarity.

Note on Font Substitutions

Both Rubik and Inter are available on Google Fonts, making substitution straightforward if self-hosted assets aren't available. Map Rubik weights (400/500/600/700/900) to Google's Rubik family, and Inter to the standard Inter family. If Rubik must be replaced entirely, Poppins (similar geometric warmth) or Nunito (friendlier curves) serve as close approximations. Define these CSS variables for the substitution layer:

--font-heading: 'Rubik', 'Poppins', 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'SF Mono', 'Fira Code', monospace;

Layout

Spacing System

• Base unit: 4px (with 2px and 6px exceptions for micro-adjustments).
• Tokens: {spacing.xxs} (2px — hairline gaps, focus ring offsets), {spacing.xs} (4px — icon padding, inner gaps), {spacing.sm} (6px — compact internal padding), {spacing.md} (8px — standard button vertical padding), {spacing.base} (12px — nav link horizontal padding), {spacing.lg} (16px — card internal padding, form gap), {spacing.xl} (20px — button horizontal padding), {spacing.2xl} (24px — section-internal margins), {spacing.3xl} (28px — large component gutters), {spacing.4xl} (32px — major block separation), {spacing.5xl} (48px — subsection breaks), {spacing.section} (144px — heroic vertical breathing room).
• Section padding (vertical): {spacing.section} (144px) — used exclusively by {component.hero-band} for dramatic top-of-page impact.
• Card internal padding: {spacing.xl} (20px) on {component.stats-card}; {spacing.lg} (16px) on generic containers.
• Gutters: Page content sits within a max-width container (implied ~1280–1440px centered) with responsive gutters collapsing to {spacing.lg} (16px) on mobile.

Grid & Container

The layout employs a single-column hero with right-rail stats card pattern at desktop widths. The main content area spans approximately 60% of the viewport width (left-aligned headline + subtext + CTA column), while the stats card floats in the remaining ~35% as an absolutely-positioned or flex-aligned element. At the social-proof footer, the grid shifts to a four-column stat layout (avatars + three numeric columns) with equal distribution.

The page container appears to be set at 1440px max-width based on extracted main and section element dimensions, though content is visually constrained narrower (~1200px readable area) with generous margin auto-centering. There's no visible multi-column marketplace grid on this fold—the layout is editorial/hero-focused rather than catalog-dense.

Whitespace Philosophy

Whitespace in LionBot is aspirational and dramatic. The 144px section padding above and below the hero creates a cinematic, almost splash-screen quality—the content breathes heavily before asking anything of the user. Within cards and component groups, spacing is tighter ({spacing.md} to {spacing.xl}) maintaining density that suggests "dashboard energy." This duality—expansive page rhythm, compact component interiors—mirrors Discord's own UX language.

Header Architecture

┌─────────────────────────────────────────────────────────────────────┐
│ [🦁 Logo]   [Home] [Guides ▾] [Updates] [Support]  [💎Premium] [Invite Bot ▸] [→ Sign In] │
└─────────────────────────────────────────────────────────────────────┘
              ↑ sticky, backdrop-blur, z-50        ↑ pill btn      ↑ outline btn

The {component.top-nav-sticky} uses a semi-transparent {colors.surface} background at 95% opacity with implied backdrop-blur (common in Tailwind implementations). Nav items use {component.nav-link-active} styling for the current page (Home shows a {colors.surface-strong} pill background). The Premium link is text-only with a diamond icon, while "Invite Bot" gets the full {component.button-primary} treatment and "Sign In" receives {component.button-secondary} outlined styling.

Hero Section

┌──────────────────────────────────────────────────────────────────────────┐
│  [═══ Gradient Banner: pink→purple→blue ════════════════════════] [×]  │
└──────────────────────────────────────────────────────────────────────────┘

┌───────────────────────────────────────────────┬──────────────────────────┐
│  ⚡ Trusted by 83,400+ servers                │  🟢 LIVE RIGHT NOW        │
│                                               │                           │
│  THE ULTIMATE DISCORD                         │     3,678    productive  │
│  PRODUCTIVITY BOT                             │     23,207   in voice    │
│                                               │  ─────────────────────  │
│  Activity tracking, economy, leaderboards,    │  SESSIONS TRACKED ALL-TIME│
│  productivity tools, and so much more...       │     352.6m  ← emerald   │
│                                               │                           │
│  [Add to Discord ▸]  [View Dashboard]         │  [avatar stack +10k]    │
│                                               │                           │
│  ✓ Top.gg verified • 83,400+ servers • Free   │                          │
└───────────────────────────────────────────────┴──────────────────────────┘

The left column carries the messaging hierarchy: trust badge → display headline → subtext → CTA pair → verification proofs. The right column contains the {component.stats-card} with its glass-morphic background, live indicator dot, metric pairs, and avatar cluster. Below both columns spans the {component.social-proof-section} with community logos and aggregated stats.

Social Proof Footer

┌─────────────────────────────────────────────────────────────────────────┐
│  POWERING COMMUNITIES LIKE  [😊][🐱][🟢][☮️][🦁]    83.4k    4.6m    352.6m  │
│                                                   ACTIVE    MEMBERS  SESSIONS│
│                                                   SERVERS  TRACKED       │
└─────────────────────────────────────────────────────────────────────────┘

This section uses a flex or grid layout with the avatar group left-aligned, followed by three stat columns each containing a {typography.title-lg} numeral and a {typography.label-sm} uppercase label.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Flat | No shadow, solid {colors.surface} background | Base page canvas, footer band, hero background | | 1 – Hairline outline | 1–2px {colors.border-strong} border, no shadow | {component.button-secondary}, input fields, static dividers | | 2 – Soft drop | {shadows.glow-pink-sm} (pink-tinted 0 1px 2px) | Hovered ghost buttons, subtle lift on interactive cards | | 3 – Card elevation | {shadows.card} (border + minimal shadow) | {component.stats-card} default state | | 4 – Glow elevation | {shadows.glow-pink-md/lg} (diffuse pink ambient) | {component.button-primary} hover, featured elements, promotional cards | | 5 – Float | {shadows.float-pink} (colored directional shadow) | Decorative mascot illustration, floating CTA elements |

The depth philosophy is color-infused layering rather than neutral grayscale shadows. Because the brand palette is so saturated, shadows carry hue—pink glows emanate from accent-colored elements, creating a neon-sign effect that feels native to gaming UI. The {component.stats-card} achieves depth through both opacity-layering (60% opaque background over the hero image) and a subtle border-shadow combo. Flat surfaces dominate the page (nav, footer, hero band), reserving elevation for the truly interactive or attention-demanding elements.

Decorative Depth

Beyond component elevation, the page employs radial gradient atmosphere layers: three overlapping bg-[radial-gradient(...)] divs positioned fixed/inset create colored light spots (blue at top-left, violet at bottom-right, blue at top-center) at 4–7% opacity. These produce an ambient "underglow" that gives the dark canvas dimensionality without competing with content. The {component.gradient-banner} adds a hard linear gradient (pink → purple → blue) as a distinct promotional band separate from the atmospheric treatment.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 6px | Small internal elements, compact tags | | {rounded.DEFAULT} | 8px | Standard buttons, nav items, inputs, generic containers | | {rounded.md} | 10px | Primary buttons, card corners, dropdown panels | | {rounded.lg} | 12px | Larger cards, modal containers | | {rounded.xl} | 16px | Feature cards, image containers | | {rounded.2xl} | 24px | Stats card ({component.stats-card}), hero imagery frames | | {rounded.pill} | 9999px | Trust badges, tag pills, avatar circles, CTA buttons (variant) | | {rounded.full} | 9999px | Avatar circles, icon circle backgrounds |

Photography Geometry

Imagery on LionBot centers on mascot illustration (the lion character visible behind the stats card) rendered in a soft, painterly digital style with warm highlights. Illustrations appear to use full-bleed or positioned-with-overflow placement, meaning they extend beyond their container bounds for organic integration. Avatars are strictly circular ({rounded.full}) at 32px diameter in stacks, with slight overlap creating depth. The stats card's corner radius ({rounded.2xl} at 24px) is significantly rounder than typical UI cards, giving it a "bubble" or "app-icon" feel appropriate for the gaming context.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-hover}, {component.nav-link-hover}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The principal conversion button. Background {colors.accent} (#eb4799), text {colors.on-primary} (#ffffff) at {typography.button} weight 600, rounded {rounded.md} (10px), padding {spacing.md} {spacing.xl} (8px 20px). Used for "Invite Bot" in the nav and "Add to Discord" in the hero. Features a pink-tinted glow shadow ({shadows.glow-pink-lg}) on interaction. State variant: {component.button-primary-hover} shifts to {colors.accent-hover} (#f472b6).

{component.button-primary-hover} — Active/hovered state of the primary CTA. Background brightens to {colors.accent-hover}. Maintain identical rounding and padding.

{component.button-secondary} — Outlined alternative for lower-emphasis actions. Transparent background with 1px {colors.border-strong} border, text {colors.ink}, {typography.button}, rounded {rounded.DEFAULT} (8px), padding {spacing.md} {spacing.lg}. Used for "Sign In" in the nav and "View Dashboard" in the hero. On hover, see {component.button-secondary-hover} which adds a {colors.surface-strong} background fill.

{component.button-secondary-hover} — Hover state for outlined buttons. Gains a {colors.surface-strong} background while retaining the border.

{component.button-ghost} — Minimal navigation or toolbar button. Fully transparent background, text {colors.body}, {typography.button}, rounded {rounded.DEFAULT}, padding {spacing.md} {spacing.base}. Used for "Guides" nav item and mobile menu toggle. Hover variant {component.button-ghost-hover} applies {colors.surface-elevated} (40% dark) background.

{component.button-ghost-hover} — Ghost button hover state with semi-transparent dark overlay.

{component.button-premium} — Text-only branded link/button. Transparent background, text {colors.secondary} (gold), {typography.button}, fully {rounded.pill} shaped. Used for the "Premium" nav item with diamond icon prefix.

{component.button-tag-green} — Micro-badge/tag component. Background {colors.primary} at 20% opacity, text {colors.primary} full brightness, 1px {colors.border-primary} border, {typography.label-sm} (10px, uppercase, 600 weight), rounded {rounded.DEFAULT}, tight padding 4px 12px. Used for "Purchase" or status tags.

Cards & Containers

{component.stats-card} — The signature floating dashboard preview. Background {colors.surface-card} (60% opaque plum), text {colors.ink}, rounded {rounded.2xl} (24px), padding {spacing.xl} (20px). Contains {component.stats-live-indicator} (green dot + "LIVE RIGHT NOW"), metric rows with {component.stat-value} / {component.stat-value-highlight} numerals and {component.stat-label} captions, plus {component.avatar-stack} at bottom. Has a border+shadow combo ({shadows.card}). Positioned absolute/flex-right in the hero.

{component.hero-band} — The primary hero section container. Background {colors.surface} (deep plum), padding {spacing.section} vertically (144px). Houses the two-column layout (text left, card right). No visible border or shadow—relies on the page's radial-gradient atmospheric depth.

{component.trust-badge} — Inline credibility signal. Background {colors.accent-soft} (10% pink), text {colors.accent} (full pink), {typography.label-md}, fully {rounded.pill}, padding ~6px 16px. Contains sparkle icon + "Trusted by 83,400+ servers". Appears above the hero headline.

{component.social-proof-section} — Bottom-of-fold community validation zone. Background {colors.surface}, text {colors.muted}, {typography.caption} for labels. Flex/grid layout with avatar group left, three stat columns right.

{component.gradient-banner} — Full-width promotional strip at page top. Linear gradient background from {colors.accent} (pink) through {colors.signature-lavender} to {colors.signature-blue}. Text {colors.inverse} (dark), {typography.body-sm}. Contains gift-box icon, "Gift premium..." message, "Gift now →" link, and {component.gradient-banner-close} (× button).

{component.top-nav} / {component.top-nav-sticky} — Persistent header. Sticky positioning, z-50. Background {colors.surface} (solid) or {colors.top-nav-sticky} (95% opaque with blur). Height 64px. Contains logo lockup left, nav center, utilities right. See Header Architecture diagram for internal layout.

{component.footer} — Page footer (partially visible or implied). Background {colors.surface}, text {colors.muted}, {typography.body-sm}, padding {spacing.4xl} (32px) vertical.

Navigation

{component.nav-link} — Standard navigation menu item. Transparent background, text {colors.body} (muted rose), {typography.body-md}, rounded {rounded.DEFAULT}, padding {spacing.md} {spacing.base}. Used for Guides, Updates, Support.

{component.nav-link-active} — Current-page nav indicator. Background {colors.surface-strong} (medium plum), text {colors.ink} (off-white). Applied to "Home".

{component.nav-link-hover} — Nav item hover state. Background {colors.surface-elevated} (40% dark overlay).

Sub-Systems: Live Stats

{component.stats-live-indicator} — Status header within stats card. Small green dot ({colors.primary}) + "LIVE RIGHT NOW" in {typography.label-sm} (uppercase, 600 weight, {colors.primary}). Signals real-time data freshness.

{component.stat-value} — Large numeric display. Text {colors.ink}, {typography.stat-xl} (40px, 700 weight). Example: "3,678", "23,207".

{component.stat-value-highlight} — Emphasized metric number (the "hero" stat). Text {colors.primary} (emerald), {typography.stat-xl}. Example: "352.6m" sessions tracked.

{component.stat-label} — Descriptive label beneath a stat value. Text {colors.muted}, {typography.caption} (12px, 500 weight). Examples: "productive", "in voice rooms", "SESSIONS TRACKED ALL-TIME".

{component.stat-row} — Horizontal grouping of a value + label pair. Padding {spacing.sm} vertical. Separator may exist via whitespace only.

{component.avatar-stack} — Cluster of user/community avatars. Circular images at 32px with {rounded.full}, slight negative margin overlap (+10k overflow indicator). Inside {component.stats-card} bottom area and {component.social-proof-section}.

{component.avatar-circle} — Individual avatar. Background {colors.surface-strong} (fallback), rounded {rounded.full}, size 32px. May contain image or initial.

{component.verification-check} — Checkmark icon indicating verified status. Color {colors.primary} (emerald). Paired with text like "Top.gg verified".

Social Proof Components

{component.social-proof-stat} — Large aggregate number in footer. Text {colors.ink}, {typography.title-lg} (30px, 700 weight). Examples: "83.4k", "4.6m", "352.6m".

{component.social-proof-label} — Uppercase caption beneath footer stat. Text {colors.muted}, {typography.label-sm} (10px, 600 weight, 0.06em tracking). Examples: "ACTIVE SERVERS", "MEMBERS TRACKED", "PRODUCTIVE SESSIONS".

Do's and Don'ts

Do

• Do reserve {colors.accent} (#eb4799) exclusively for primary conversion actions—"Invite Bot," "Add to Discord," and key CTAs. It should be the scarcest, highest-voltage color on any given screen.
• Do apply {typography.display-lg} (60px, 700 weight, -0.025em tracking) to exactly one H1 per page—the hero headline. Any other text at this size dilutes impact.
• Do use {colors.primary} emerald (#34d399) for all quantitative proof points: session counts, user numbers, verification badges, and "live" status indicators. This creates a consistent "metrics = green" mental model.
• Do give {component.stats-card} the {rounded.2xl} (24px) radius combined with {colors.surface-card} opacity background—this specific combination produces the signature glass-morphic look.
• Do maintain the 144px ({spacing.section}) vertical padding around the hero. This extreme whitespace is intentional and separates LionBot from cramped SaaS templates.
• Do render body copy at {typography.body-md} (14px, 500 weight) minimum—never drop to 400 weight or below 14px for readable paragraphs on the dark canvas.
• Do apply {rounded.pill} (9999px) to trust badges, tags, and the "Trusted by..." pill. These infinitely-round shapes read as "friendly" and "verified" in the gaming context.
• Do use the gradient banner ({component.gradient-banner}) as a dismissible, full-width promotional element with the × close button aligned right.
• Do keep nav link hover states subtle—{colors.surface-elevated} at 40% opacity—not full-color fills that compete with the active state.
• Do place the mascot illustration behind/adjacent to the stats card with overflow allowed, creating layered depth rather than boxed containment.

Don't

• Don't substitute {colors.primary} (emerald) for {colors.accent} (pink) on CTAs. The pink is for actions; the green is for metrics. Swapping them breaks the semantic color system.
• Don't reduce display headline weight below 700. The 700–800 weight range is non-negotiable for readability at 60px on a dark canvas—thinner weights vanish.
• Don't add white or light gray backgrounds anywhere in the main page flow. The entire experience lives on {colors.surface} (#1a0f16) or darker. Light backgrounds exist only inside the gradient banner.
• Don't expand beyond the established radius vocabulary: {rounded.DEFAULT} (8px), {rounded.md} (10px), {rounded.xl} (16px), {rounded.2xl} (24px), and {rounded.pill}. Introducing new radii (e.g., 4px, 20px, 32px) fragments the shape system.
• Don't apply shadows without color tinting. Neutral grayscale shadows look dead on this palette—always use the pink-glow variants ({shadows.glow-pink-*}) for brand-coherent depth.
• Don't use italic or oblique styles for emphasis. The system conveys emphasis through weight, color (especially {colors.primary} and {colors.accent}), and uppercase transforms only.
• Don't crowd the hero with more than one primary CTA. The "Add to Discord" button gets {component.button-primary}; the secondary action ("View Dashboard") must be {component.button-secondary} or ghost.
• Don't let stat values in {component.stats-card} exceed two lines. If numbers grow large (e.g., "1,234,567"), consider abbreviating ("1.2m") to preserve the {typography.stat-xl} single-line impact.
• Don't remove the radial gradient atmosphere layers from the page background—they provide essential depth that prevents the dark canvas from feeling flat.
• Don't mix font families outside the Rubik/Inter division. Keep Rubik for display (≥18px) and Inter for UI (<18px). Using Inter at 60px or Rubik at 14px undermines the pairing logic.

Motion & Animation

Transition Tokens

/* Core transition */
--transition-base: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

/* Color-aware transition (covers bg, border, text decoration, fill, stroke) */
--transition-colors: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                     background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                     border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                     text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                     fill 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                     stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);

/* Transform-only (for movement/scale) */
--transition-transform: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

/* Opacity fade (slower, for enter/exit) */
--transition-opacity: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);

/* SVG stroke animation (for icon draws) */
--transition-stroke: stroke-dashoffset 1s linear;

Keyframe Animations

The following keyframe names were detected in the stylesheet, suggesting a rich animation library:

• check-pop — Scale-bounce for verification checkmarks when they appear.
• fade-in — Opacity 0→1 entrance for content blocks.
• ping — Radial pulse for the "live" status dot (green dot expanding outward).
• pulse — Gentle opacity oscillation for attention-drawing elements.
• spin — Continuous rotation for loading spinners.
• enter / exit — Orchestrated entrance/exit sequences (likely for modals or dropdowns).
• sway-slow / sway-fast — Subtle rotation oscillation for the mascot illustration or decorative elements.
• bob — Vertical translation bounce (Y-axis float) for floating elements.
• sparkle-cycle — Twinkle/shimmer effect for trust badge icons or premium accents.
• shimmer — Horizontal highlight sweep (likely for skeleton loaders or premium card sheens).
• harvest-pulse, water-drop, drift, firefly-blink, rain-fall, glow-pulse, sweep, plant-burst — Thematic/game-inspired animations likely used in seasonal campaigns or easter eggs, possibly dormant on the homepage.

Interaction Patterns

• Button hover lift: {component.button-primary} gains brighter background ({colors.accent-hover}) and enhanced pink glow shadow ({shadows.glow-pink-lg}) over 150ms.
• Nav item pill reveal: {component.nav-link-hover} transitions to {colors.surface-elevated} background with 150ms ease, creating a subtle "highlight bar" effect.
• Live dot ping: The green status indicator runs a continuous {animation: ping} loop, emitting concentric fade-out rings.
• Stats card float: {component.stats-card} may have a gentle {animation: sway-slow} or Y-axis drift when in viewport, suggesting "living dashboard" energy.
• Gradient banner slide-down: The promotional banner likely animates from translateY(-100%) to 0 on mount using {animation: enter}.
• Trust badge sparkle: The sparkle icon beside "Trusted by..." cycles through {animation: sparkle-cycle}.
• Focus rings: Interactive elements gain a {shadows.focus-ring} (2px offset border + minimal shadow) on keyboard focus.
• Scroll-triggered fades: Content blocks (hero text, stats card, social proof) likely use IntersectionObserver-backed {animation: fade-in} with staggered delays.

Imagery Style

• Illustration style: Soft, painterly digital art with warm ambient lighting—the lion mascot features visible brush-texture shading and gentle rim lighting against the dark background.
• Color treatment: Illustrations use a warm palette (oranges, browns, soft purples) that complements but doesn't compete with the UI's pink/green brand colors. The mascot is partially occluded by the stats card, suggesting intentional layered composition.
• Role: Imagery supports rather than dominates—the hero's visual weight is carried by typography first, the stats card second, and illustration third (as atmospheric depth).
• Avatar style: Community/user avatars are circular cropped at 32px, rendered with subtle border or shadow, stacked with 4–6px negative-margin overlap.
• No photography: The page contains no photographic elements—pure vector/raster illustration and UI chrome.
• Gradient usage: Beyond the banner, imagery incorporates soft radial gradients (the atmospheric background blobs) that feel like colored stage lighting rather than graphic shapes.
• Opacity layering: The stats card's background at 60% opacity over the illustration creates a frosted-glass effect allowing the mascot's colors to subtly show through.
• Icon style: All UI icons (Lucide-based) use uniform 1.5–2px stroke width, currentColor inheritance, and 16–20px sizing, maintaining geometric consistency with the typefaces.
• Decorative elements: Sparkle icons (✦) appear beside trust signals, rendered in {colors.accent} or {colors.primary} depending on context.

Icon System

• Library: Lucide React (detected via framework analysis—icon naming conventions and stroke characteristics match lucide-kit patterns).
• Specific icons observed: LogIn (Sign In arrow-right + text), Sparkles (trust badge), Gift (gradient banner gift box), X (banner close), CheckCircle (verification checks), Menu (mobile hamburger), ChevronDown (Guides dropdown caret), ExternalLink (arrow in "Add to Discord"), Diamond (Premium badge), Users (server count context), Zap (productivity/activity symbol).
• Treatment: Stroke-based (not filled), currentColor for color inheritance, 1.5px–2px stroke width, 16px–20px sizing aligned to cap-height of adjacent text, 1.5px–2px optical padding from text baselines.
• Alignment: Icons inline with text use align-items: center flexbox with {spacing.xs} (4px) gap between icon glyph and text label. Standalone icons (close button, status dot) center themselves in their tap target.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router, detected via _next/static asset paths & RSC patterns)
- Styling:        Tailwind CSS v3.4+ (utility-first, custom theme extension in tailwind.config.ts)
- Fonts:          Self-hosted Rubik (WOFF from /_next/static/) + Inter (system/CDN fallback)
                 Google Fonts fallback: @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Rubik:wght@400;500;600;700;900&display=swap');
- Animation:      Tailwind animate utilities + custom @keyframes (ping, shimmer, fade-in, etc.)
                 Optional: Framer Motion for scroll-triggered orchestration (enter/exit keyframes suggest this)
- Icons:          Lucide React (lucide-react package)
- Component lib:  Custom components (no shadcn/ui detected—radius values and shadow tokens are bespoke)
- i18n:           next-intl (detected via _nextI18Next in pageProps JSON)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column hero, collapsed nav (hamburger), stats card stacks below headline, gradient banner text truncates | | Tablet | 640px–1024px | Two-column hero emerges (headline left, card right but narrower), nav links may hide behind "More" | | Desktop | 1024px–1280px | Full nav visible, hero at designed proportions, stats card ~350px wide | | Wide | > 1280px | Max-width container (1440px) centered, extra horizontal padding, largest display sizes |

Touch Targets

• {component.button-primary}: ~120px × 36px (padding 8px 20px + text) — exceeds 44×44px WCAG AAA minimum comfortably.
• {component.button-secondary}: ~108px × 36px (padding 8px 16px) — meets minimum.
• {component.nav-link}: ~80px × 36px (padding 8px 12px) — adequate for thumb access.
• {component.text-input} (if present): 44px height recommended for mobile forms.
• {component.gradient-banner-close}: 20px × 20px — below 44px minimum; should expand invisible hit area to 44px on touch devices.

Collapsing Strategy

• Navigation: Below tablet breakpoint, nav links (Guides, Updates, Support) collapse into a {component.button-ghost} hamburger menu triggering a slide-down panel. "Invite Bot" and "Sign In" remain visible as compact buttons.
• Hero columns: On mobile, the left column (headline + CTAs) stacks vertically at full width, and {component.stats-card} drops beneath it (also full-width, losing its float position). The trust badge moves above the headline.
• Stats card interior: Metric rows may reflow from 2-column (value + label inline) to stacked (value above label) on narrow screens.
• Social proof grid: The four-element row (avatars + 3 stats) collapses to 2×2 or 1×4 on mobile, with stat values potentially scaling down from {typography.title-lg} (30px) to {typography.title-md} (24px).
• Gradient banner: Text may truncate with ellipsis on mobile; the close button remains accessible. Height may reduce from ~40px to ~32px.
• Avatar stacks: Reduce visible count on mobile (show 3–4 avatars instead of 5–6), maintaining the "+Nk" overflow indicator.

Image Behavior

• Mascot illustration: Likely uses object-fit: cover or contain within a positioned container. On mobile, may scale down to 50–60% width or hide entirely to prioritize text hierarchy.
• Stats card background: As a CSS-background-opacity effect (not an <img>), it scales with its container automatically—no srcset concerns.
• Avatar images: Fixed 32px × 32px circles with border-radius: 50%. Should use srcset for retina (2×) displays serving 64px source into 32px CSS box.

Iteration Guide

1. Initialize with Next.js + Tailwind. Set up a Next.js 14+ project with App Router, install Tailwind CSS v3.4+, and configure tailwind.config.ts extending the theme with all tokens from this file's YAML frontmatter under theme.extend.colors, theme.extend.fontSize, `theme.extend.borderRadius.*, etc.
2. Define CSS custom properties. Map every frontmatter token to a :root CSS variable (e.g., --color-primary: #34d399) and reference them in Tailwind's config via theme.extend.colors.primary: 'var(--color-primary)'. Never hard-code hex values in component JSX.
3. Build the dark-mode shell. Set html background to {colors.surface} (#1a0f16) and text to {colors.ink} (#f4f0f2). Add the three radial-gradient atmosphere divs as fixed/inset/pointer-events-none children of body.
4. Implement components top-down. Start with {component.top-nav-sticky}, then {component.gradient-banner}, then {component.hero-band} containing the two-column layout. Build each component referencing only its YAML entry for colors, radii, padding, and typography tokens.
5. State variants as siblings. For every interactive component, create separate exported components or className variants: ButtonPrimary and ButtonPrimaryHover (or button-primary and button-primary-hover classes). Never nest hover styles inside the default component—keep them flat for the linter to validate.
6. Add motion progressively. After static layout matches the screenshot, wire up the transition tokens (--transition-base, --transition-colors) to interactive elements. Then layer keyframe animations (ping for live dots, fade-in for scroll reveals) using Tailwind's animate-* utilities or CSS @keyframes.
7. Test the stats card glass effect. The {component.stats-card} requires background: rgba(37, 24, 33, 0.6) with backdrop-filter: blur() (if supported) plus border: 1px solid {colors.border-strong} and {shadows.card}. Verify the mascot illustration shows through at the correct opacity.
8. Responsive pass. Implement the breakpoint behaviors described above, prioritizing mobile-first. Ensure the hero stacks gracefully, nav collapses cleanly, and touch targets meet 44×44px.
9. Run the linter. Execute npx @google/design.md lint DESIGN.md after any token additions or renames. Fix broken-ref (typos in {token.path}), contrast-ratio (accessibility warnings), and orphaned-tokens (defined but unused entries) immediately.
10. Font setup for development. Add to your global CSS or layout:

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Rubik:wght@400;500;600;700;900&display=swap');
    :root {
      --font-heading: 'Rubik', 'Inter', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;
      --font-mono: 'SF Mono', 'Fira Code', ui-monospace, monospace;
    }
    

Known Gaps

• Hover state exact values: Per the no-hover policy, hover background colors, shadow intensities, and transform offsets are documented as separate components (-hover suffix) but pixel-exact values for transform: translateY(-2px) or shadow-spread changes are inferred, not extracted.
• Loading/skeleton states: No loading skeletons, spinners (beyond the generic spin keyframe), or pending-state treatments were visible in the static screenshot. These need design decisions for dashboard views.
• Form validation states: Error ({colors.error} red) and warning ({colors.warning} amber) states for inputs exist as semantic tokens but no red/warning-tinted input borders or error-message components appeared in the extraction.
• Authenticated/dashboard surfaces: The "View Dashboard" link implies a post-auth UI that wasn't captured. Dashboard-specific components (sidebar nav, data tables, settings panels) are absent from this spec.
• Modal/dialog patterns: No modals, tooltips, or popover dropdowns were open or extractable. Their surface treatment (likely {colors.surface-soft} with {shadows.glow-pink-md}) is inferred from button shadow tokens.
• Mobile navigation drawer: The hamburger menu's expanded panel (slide-down or off-canvas drawer) wasn't visible. Its contents, animation, and close behavior require implementation-time design.
• Seasonal/easter egg animations: The extensive keyframe list (harvest-pulse, firefly-blink, plant-burst, etc.) suggests event-specific animations not active on the homepage screenshot. Their triggers and contexts are unknown.
• Pixel-exact gradient coordinates: The radial-gradient atmosphere layers use approximate values (600px_circle_at_0%_0%). Exact stop percentages, color-stop positions, and blend modes may differ slightly from the extracted Tailwind arbitrary-value syntax.
• Misleading variable name risk: The canvas token (#60a5fa sky blue) technically maps to a gradient-terminus color rather than the page's actual background ({colors.surface} #1a0f16). Implementers should treat canvas as "banner-gradient-end" semantically, not "page-background."