Protix Design System

Overview

Protix presents itself as Nigeria's premier event marketplace—a digital stage where high-energy concert photography meets bold, unapologetic graphic design. The visual identity operates on a stark duality: a cinematic dark hero section saturated with live-event imagery gives way to lighter editorial sections that feel both contemporary and grounded in local cultural energy.

The brand's voltage lives primarily in its coral-orange palette ({colors.coral} — #f26d21), which powers every primary call-to-action from the persistent "Create Event" button in the navigation to the hero's dominant "Discover Events" treatment. This warm, energetic hue contrasts deliberately against deep blacks ({colors.surface-soft} — #000000) and crisp whites ({colors.canvas} — #ffffff), creating a visual rhythm that mirrors the excitement of live entertainment. A secondary highlight color—yellow-gold ({colors.primary} — #fde047)—appears sparingly to mark active states, such as the "Home" navigation link, adding a touch of premium warmth without competing with the coral dominance.

The typographic system is defined by its dramatic dual-family approach: Rajdhani, a geometric, condensed sans-serif with extreme weights (700–800), commands all headlines and display text, lending a muscular, almost athletic presence to the event-focused messaging. This is balanced by Spline Sans, a clean humanist face that handles all body copy, UI labels, and secondary information with understated clarity. At {typography.display-lg}, headlines reach 60px at weight 800—aggressively large for a landing page—ensuring the "Where Events Come to Life" proposition lands with maximum impact above the fold.

Shape language reveals a deliberate tension between minimal rounding and neo-brutalist sharpness. Most interactive elements—buttons, inputs, badges—carry only {rounded.sm} (2px), barely perceptible softening that keeps edges feeling technical and precise. However, the system deploys {rounded.pill} (9999px) for specific avatar or tag treatments where organic shapes signal social/community contexts. A signature design moment is the floating bottom card component, which employs a hard-edged offset shadow technique (black rectangle shifted 3px down-right behind a white card with thick black borders)—a neo-brutalist gesture that feels fresh within the African tech events space.

Sub-systems observed include: (1) the hero dialect—dark immersive band with overlaid typography on photographic backgrounds, using ghost buttons with translucent white fills; (2) the editorial section dialect—lighter textured surfaces (mint-green grain) with dark ink text and mixed-color headings; and (3) the floating utility dialect—persistent bottom-placed cards with offset shadows that persist across scroll positions.

Key Characteristics:

• Dark cinematic hero ({colors.surface-soft} background) with full-bleed concert imagery and white-on-dark typography
• Coral-orange CTAs ({colors.coral}) on all primary actions, with ghost variants ({colors.surface-ghost}) for secondary actions in dark contexts
• Rajdhani headlines at weights 700–800, scaled from 36px–72px, providing aggressive visual hierarchy
• Spline Sans body copy at 18–24px, maintaining readability across light and dark surfaces
• Minimal 2px radius ({rounded.sm}) on most interactive elements, reserving sharp corners for signature floating cards
• Neo-brutalist offset shadows ({extensions.shadows.brutalist-offset}) on floating UI elements
• Yellow-gold active state indicator ({colors.primary}) for navigation and emphasis
• Glassmorphic navigation bar ({colors.surface-glass}) with backdrop blur for depth perception

Colors

Brand & Accent

• Coral ({colors.coral} — #f26d21): The primary action color—used on "Create Event" buttons in the navigation bar, "Discover Events" hero CTA, and all primary conversion triggers throughout the interface.
• Coral Hover ({colors.coral-hover} — #ff6b00): Lightened coral variant for hover states on links and buttons, providing subtle interaction feedback.
• Coral Dark ({colors.coral-dark} — #e55a1a): Deepened coral for pressed/active button states, ensuring tactile response.
• Primary Gold ({colors.primary} — #fde047): Secondary brand accent marking active navigation items (the "Home" link) and premium highlight moments; intentionally distinct from coral to create a two-tone brand vocabulary.
• Primary Active ({colors.primary-active} — #facc15): Deepened gold for active/hover states on gold-colored elements.

Surface

• Canvas ({colors.canvas} — #ffffff): The default page background for non-hero sections—the mint editorial area, navigation bar interior, cards, and input fields.
• Surface Soft ({colors.surface-soft} — #000000): Pure black serving as the hero section background and footer ground, creating maximum contrast for overlaid content.
• Surface Dark ({colors.surface-dark} — #0a0a0a): Near-black alternative for slightly softened dark surfaces when pure black feels too harsh.
• Surface Elevated ({colors.surface-elevated} — #1a1a1a): Dark gray for elevated panels or dropdowns appearing within dark contexts.
• Surface Mint ({colors.surface-mint} — #e8eed9): Pale sage-green textured background for the "Discover Events by Top Locations" editorial section, providing visual relief after the dark hero.
• Surface Overlay ({colors.surface-overlay} — rgba(0, 0, 0, 0.7)): Heavy translucent black overlay applied atop hero imagery to ensure text readability.
• Surface Glass ({colors.surface-glass} — rgba(255, 255, 255, 0.95)): Near-opaque white with transparency hint for the fixed navigation bar, enabling backdrop-blur effects.
• Surface Ghost ({colors.surface-ghost} — rgba(255, 255, 255, 0.1)): Translucent white for ghost buttons and subtle dividers in dark contexts.

Text & Ink

• Ink ({colors.ink} — #171717): Near-black primary text color for all content on light backgrounds—navigation labels, body copy in editorial sections, headings.
• Body White ({colors.body} — #ffffff): Pure white for primary text on dark surfaces—hero headlines, hero body copy, button labels in dark contexts.
• Body Muted ({colors.body-muted} — rgba(255, 255, 255, 0.9)): Slightly transparent white for secondary body text in the hero area, creating subtle hierarchy against the dark background.
• Muted Gray ({colors.muted} — #464646): Medium gray for secondary text on light surfaces—descriptions, metadata, supporting content.
• Muted Soft ({colors.muted-soft} — #9c9c9c): Light gray for tertiary/disabled text, placeholders, timestamps.
• Muted Deep ({colors.muted-deep} — #586170): Blue-tinged gray for specialized muted contexts requiring cooler temperature.
• On Primary ({colors.on-primary} — #171717): Dark ink for text placed on the gold/yellow primary surface, ensuring WCAG contrast compliance.
• On Coral ({colors.on-coral} — #ffffff): White text for all elements on coral-colored backgrounds.
• On Dark ({colors.on-dark} — #ffffff): White text for any element on black/dark surfaces.
• On Surface ({colors.on-surface} — #171717): Default dark text for general surface contexts.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(229, 231, 235, 0.5)): Very faint gray divider for the navigation bar bottom border, providing subtle separation without harshness.
• Border Strong ({colors.border-strong} — #000000): Solid black borders for high-contrast outlining—used on the neo-brutalist floating card and outlined button variants.
• Border Ghost ({colors.border-ghost} — rgba(255, 255, 255, 0.2)): Translucent white borders for ghost buttons in dark contexts.
• Border Ghost Strong ({colors.border-ghost-strong} — rgba(255, 255, 255, 0.3)): More opaque variant for emphasized ghost button borders (secondary hero CTA).
• Border Input ({colors.border-input} — #e5e7eb): Standard light gray for form input field borders.

Semantic

• Error ({colors.error} — #dc2626): Red for validation errors, alert states, and destructive actions.
• Success ({colors.success} — #16a34a): Green for confirmation states, successful submissions, availability indicators.
• Warning ({colors.warning} — #f59e0b): Amber for cautionary notices, pending states.
• Link ({colors.link} — #ff6b00): Orange inline link color matching the coral hover shade for text-based navigation.
• Link Hover ({colors.link-hover} — #e55a1a): Darkened orange for link hover/active states.

Typography

Font Family

Protix employs a strategic two-face type system that balances expressive display performance with utilitarian body readability. Rajdhani, a geometric, condensed sans-serif originally designed for screen legibility in technical and sporting contexts, serves as the exclusive headline face. Its narrow proportions and available heavy weights (700–800) allow headlines to command significant horizontal real estate while packing visual density—an ideal fit for event titles and promotional messaging that must scan quickly. The font carries slight geometric personality through circular bowls and uniform stroke widths, giving it a modern, athletic character that aligns with the high-energy events theme.

Spline Sans handles all non-display typography: body paragraphs, navigation labels, button text, captions, and form inputs. This clean humanist sans-serif offers neutral, highly readable letterforms that recede visually, allowing Rajdhani headlines to dominate the hierarchy. Spline Sans's moderate x-height and open counters ensure readability even at smaller sizes (14px–16px) and across the site's varied background conditions—from pure white editorial sections to semi-transparent overlays on dark hero imagery.

Both faces fall back to system sans-serif stacks, ensuring graceful degradation. The font files are self-hosted via WOFF2 format with unicode-range splitting for optimal loading performance.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 72px | 800 | 1 | -0.02em | Oversized hero headlines (future use) | | {typography.display-lg} | 60px | 800 | 1 | 0 | Primary hero headline—"Where Events Come to Life" | | {typography.title-md} | 48px | 700 | 1 | 0 | Section headings—"Discover Events by Top Locations" | | {typography.title-sm} | 36px | 700 | 1.1 | 0 | Sub-section headings, card titles | | {typography.body-lg} | 24px | 400 | 1.33 | 0 | Hero body paragraph, lead copy | | {typography.body-md} | 18px | 400 | 1.5 | 0 | Section descriptive text, standard body | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Form labels, secondary descriptions | | {typography.button} | 16px | 500 | 1.25 | 0 | Primary button labels, large CTAs | | {typography.button-sm} | 14px | 600 | 1.25 | 0 | Small button labels—"Sign In" | | {typography.nav-link} | 15px | 400 | 1.5 | 0 | Navigation menu items | | {typography.badge-label} | 14px | 600 | 1.5 | 0.7px | Badge/tag text with tracking—"#1 Event Marketplace" | | {typography.caption} | 13px | 400 | 1.38 | 0 | Footer text, metadata, fine print |

Principles

The typographic system trusts weight contrast over size contrast as its primary hierarchy mechanism within each family. Rajdhani headlines sit at weight 700–800 against Spline Sans body text at weight 400, creating an immediate 2× weight differential that establishes clear reading order before size differences even register. Within the Rajdhani display scale, the jump from 700 (section headings) to 800 (hero headline) provides sufficient differentiation despite identical font families—there is no regular-weight Rajdhani usage in this system, reinforcing that this face exists exclusively for emphatic display purposes.

Size scaling follows a compressed ratio between display sizes (60px → 48px → 36px = roughly 0.75×–0.8× steps) but opens up more generously into the body range (24px → 18px → 16px). This compression at the top reflects the need for headlines to feel "stackable"—event titles, location names, and dates often appear in close proximity, and tighter vertical rhythm prevents excessive whitespace consumption in dense listing views.

Letter spacing remains neutral (0) for nearly all tokens, with two intentional exceptions: {typography.display-xl} applies -0.02em tracking to tighten very large characters and prevent visual "falling apart," while {typography.badge-label} applies +0.7px tracking (approximately 0.05em at 14px) to give small uppercase-leaning labels a more expansive, premium feel. No italic or uppercase transformations are systematically applied; the system relies entirely on weight, size, and color to carry emphasis.

Mixed-color text spans appear in key locations: the hero headline uses a gradient treatment transitioning from white through peach tones to coral, while the "Top Locations" section heading renders "Discover Events by" in {colors.ink} and "Top Locations" in {colors.coral}—a bicolor technique that draws the eye specifically to the searchable/geographic concept.

Note on Font Substitutes

Rajdhani is freely available on Google Fonts (weights 400, 500, 600, 700). For implementations unable to load the proprietary hosted version, substitute via: font-family: 'Rajdhani', 'Oswald', 'Roboto Condensed', sans-serif. Spline Sans is a commercial font from spline.design; the closest Google Fonts equivalent is DM Sans (which shares similar humanist proportions and open counters) or Inter (for neutral geometry). Define CSS variables:

--font-display: 'Rajdhani', 'Oswald', sans-serif;
--font-body: 'Spline Sans', 'DM Sans', 'Inter', system-ui, sans-serif;

Layout

Spacing System

• Base unit: 4px (with 6px intermediate step).

• Tokens:

  • {spacing.xxs} (4px): Tight internal spacing—icon gaps, badge padding-x.
  • {spacing.xs} (6px): Micro-adjustments—input padding-y, tight stack gaps.
  • {spacing.sm} (8px): Small component gaps—between related inline elements.
  • {spacing.md} (12px): Moderate internal spacing—card padding compact.
  • {spacing.base} (16px): Standard comfortable spacing—nav item gaps, button padding-y.
  • {spacing.lg} (24px): Paragraph spacing, card padding generous, element group gaps.
  • {spacing.xl} (32px): Section-internal major gaps, stacked block spacing.
  • {spacing.xxl} (40px): Large sectional breathing room.
  • {spacing.section} (80px): Vertical section padding—hero and editorial section top/bottom margins.
  • {spacing.nav-height} (56px): Fixed navigation bar height.

• Section padding (vertical): {spacing.section} (80px)—applied to {component.hero-band} and {component.section-mint} as consistent rhythmic breaks between major content zones.

• Card internal padding: Varies by context—{component.floating-card-inner} uses 16px 32px (compound value), while {component.hero-badge} uses 8px 16px.

• Gutters: Desktop containers constrain to ~1440px max-width with horizontal padding of 16px (mobile) to 24px (desktop) via responsive classes.

Grid & Container

The layout employs a single-column centered container pattern optimized for marketing narrative flow rather than dashboard density. Maximum content width sits at 1440px, though the actual readable text column narrows significantly within that (approximately 720px–800px for body copy, allowing headlines to break wider).

At desktop widths, the hero section uses an asymmetric split: headline and body text occupy the left ~60% of the container, while the right portion accommodates the photographic background bleed and potential illustrative elements. The navigation bar spans full viewport width but constrains its inner contents (logo left, nav center, actions right) to the same 1440px grid. The "Discover Events by Top Locations" section centers its heading and body text in a single column (~800px wide) with no multi-column grid detected in the current viewport—suggesting that location cards would render in a masonry or grid below the visible area.

No sticky side-rails or complex dashboard grids are present in the marketing surface; the architecture prioritizes vertical scrolling narrative over spatial efficiency.

Whitespace Philosophy

Protix embraces an expansive editorial whitespace approach in its upper funnel (hero and first editorial section) with generous {spacing.section} (80px) vertical padding allowing content to breathe. However, the system shows willingness to compress in utility zones: the fixed navigation bar maintains tight 4px–8px internal spacing, and the floating bottom card packs information densely within its bordered container. This duality suggests a "cinematic top, functional bottom" philosophy where marketing impression takes precedence over information density until the user reaches conversion-oriented areas.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [🔶 Protix]     Home  Browse Events  About Us  FAQ  Pricing   │
│                                    [Sign In] [Create Event]    │
└─────────────────────────────────────────────────────────────────┘
← 1440px max-width container, centered →
← glass background (white/95%), 56px height, fixed z-50, blur-md →

The navigation bar uses a flush-left logo, distributed-center navigation, flush-right utilities pattern. The "Home" link receives {colors.coral} active coloring, while other nav items use {colors.ink}. The right-side action cluster pairs an outlined "Sign In" button ({component.button-sign-in}) adjacent to a solid coral "Create Event" button ({component.button-create-event-nav}). A subtle bottom border ({colors.hairline}) separates the nav from content below, enhanced with backdrop-blur-md for glass effect.

Hero Section

┌─────────────────────────────────────────────────────────────────┐
│  ┌─────────────────────────★ #1 Event Marketplace────────────┐  │
│  │                                                         │  │
│  │     Where Events Come to Life                            │  │
│  │                                                         │  │
│  │     Catch the best shows, workshops, and meetups...     │  │
│  │                                                         │  │
│  │     [Discover Events]  [Create Event]                    │  │
│  │                                                         │  │
│  └─────────────────────────────────────────────────────────┘  │
│  █████████████████████ CONCERT CROWD PHOTO ████████████████████│
└─────────────────────────────────────────────────────────────────┘
← Full viewport width, black background, photo overlay at ~70% opacity →
← Content centered horizontally, vertically offset to upper-middle →

The hero occupies 100vw width × ~90vh height (full-screen minus nav) with a dark photographic background (concert crowd silhouette under stage lighting). Content stacks vertically: a small {component.hero-badge} pill at top, then the {typography.display-lg} headline with gradient text treatment, then {typography.body-lg} descriptive paragraph, then a horizontal CTA pair consisting of {component.button-discover-events} (coral-filled or ghost depending on exact variant) and {component.button-create-event-hero} (outlined ghost style). All text is rendered in white/light shades against the dark photographic base.

Floating Card Element

          ┌──────────────────────────────────────────┐
          │  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ ← Black offset shadow (translate 3px 3px)
          │  ┌────────────────────────────────────┐  │
          │  │  [Floating Card Content Here]      │  │ ← White card, 4px black border
          │  └────────────────────────────────────┘  │
          └──────────────────────────────────────────┘
← Fixed position: bottom-6 (24px), left-1/2 (centered), z-[100] →
← Width: 95% mobile, max-w-6xl (1152px) desktop →

This signature component uses neo-brutalist offset shadow technique: a black rectangle positioned 3px down and 3px right behind the main white card creates a hard-edged drop shadow. The main card has {rounded.none} (sharp corners), a 4px solid {colors.border-strong} (black) border, and internal padding of 16px 32px. The entire assembly is pinned to the viewport bottom center, floating above all other content with z-index: 100.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, no border | Base surfaces—canvas, hero band ground, section backgrounds | | 1 (Hairline Outline) | 1px border, no shadow | Outlined buttons ({component.button-sign-in}), input fields ({component.text-input}) | | 2 (Soft Shadow) | {extensions.shadows.sm} — 0 1px 2px rgba(0,0,0,0.05) | Navigation bar bottom edge definition | | 3 (Medium Elevation) | {extensions.shadows.md} — layered soft shadows | Dropdowns, tooltips, elevated panels (potential) | | 4 (High Elevation) | {extensions.shadows.lg} — pronounced layered shadows | Modals, fullscreen overlays (potential) | | 5 (Brutalist Offset) | {extensions.shadows.brutalist-offset} — 3px 3px 0 black | Floating card component ({component.floating-card-inner}) | | 6 (Glass Layer) | backdrop-blur-md + semi-transparent bg | Fixed navigation bar ({component.top-nav}) |

The elevation system is intentionally restrained—most surfaces remain flat (Level 0), with shadows reserved for true layer-separation needs. The navigation bar achieves perceived elevation through glass morphism (transparency + blur) rather than traditional drop shadows, keeping the aesthetic modern and lightweight. The standout exception is the brutalist offset treatment on the floating card, which abandons soft shadow conventions entirely for a graphic-design-inspired hard-edge shadow that reads as intentional stylistic choice rather than depth simulation.

Color-blocking serves as the primary depth mechanism: transitions between {colors.surface-soft} (hero black) and {colors.surface-mint} (sage green section) create strong visual strata without requiring shadows or gradients. When decorative depth does appear, it comes from the photographic hero background—real-world image depth (stage lights, crowd layers, atmospheric haze) provides environmental dimensionality that the UI layering complements rather than duplicates.

Decorative Depth

The hero section's background photograph constitutes the primary decorative depth element: a concert venue captured from the audience perspective showing raised hands silhouetted against bright stage lighting. This image is treated with a 70% opacity black overlay ({colors.surface-overlay}) to knock back luminance while retaining enough texture to communicate "live event energy." No gradient meshes, abstract shapes, or illustration-based depth layers are present in the current viewport—photography carries the full atmospheric load.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 2px | Buttons (all variants), inputs, badges, tags—default interactive rounding | | {rounded.DEFAULT} | 2px | System default (mirrors sm) | | {rounded.md} | 8px | Cards with softer treatment (potential expanded use) | | {rounded.lg} | 12px | Larger panel containers, modal corners (potential) | | {rounded.pill} | 9999px | Avatars, category pills, fully rounded tags | | {rounded.none} | 0px | Floating card component, signature sharp-cornered elements |

The shape vocabulary leans heavily toward minimal rounding—2px is the dominant radius across virtually all interactive components, giving buttons and inputs a subtly refined edge without approaching "soft" or "friendly" territory. This technical precision aligns with Rajdhani's geometric character and the overall high-energy, modern-tech positioning. The {rounded.pill} token exists for social/community elements (user avatars, event category chips) where organic shapes signal personhood or tag-like behavior.

The {rounded.none} application on the floating card is a deliberate stylistic exception: sharp corners combined with the thick black border and offset shadow create a "sticker" or "label" aesthetic that stands in direct contrast to the gently rounded buttons elsewhere. This juxtaposition is intentional—it makes the floating element feel like a distinct object (perhaps a notification, prompt, or persistent utility) rather than just another UI component.

Photography Geometry

Hero imagery uses full-bleed, uncropped panoramic treatment spanning the entire hero section width and height. No corner rounding is applied to photographs—they meet section edges at perfect 90° angles. Aspect ratio appears to be approximately 16:9 or wider (cinematic), with the photograph positioned to place visual interest (stage lights, crowd hands) in the upper-right quadrant, leaving the left-center area relatively darker for text overlay placement. Future implementation should maintain this uncropped, edge-to-edge approach for any hero-style photographic bands; if thumbnail or card imagery is added, consider {rounded.md} (8px) for those contained contexts.

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-create-event-nav} has implied hover states); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.top-nav} — The fixed-position navigation bar spanning full viewport width at 56px height. Background {colors.surface-glass} (95% opaque white), text defaults to {colors.ink}. Features backdrop-blur-md for frosted-glass effect, a subtle bottom border in {colors.hairline}, and shadow-sm. Contains logo, navigation links, and action buttons arranged in a flex row with justify-between. Remains position: fixed; z-index: 50 during scroll.

{component.nav-link} — Individual navigation menu items (Browse Events, About Us, FAQ, Pricing). Transparent background, {colors.ink} text at {typography.nav-link} size (15px). No padding specified beyond inherited flex spacing. On hover/focus, likely transitions to underline or color shift per convention.

{component.nav-link-active} — The currently active navigation item ("Home"). Inherits all structure from {component.nav-link} but overrides text color to {colors.coral} (orange), making the current section immediately scannable. This is the sole use of coral in a non-button, non-heading context in the navigation.

{component.nav-logo} — The "Protix" wordmark with associated icon (orange hexagonal symbol). Renders at {typography.title-sm} scale (36px, weight 700) in Rajdhani, colored {colors.ink}. Positioned flush-left within the nav container.

{component.button-sign-in} — Outlined button for authentication access. Transparent background with {colors.border-strong} (solid black) 1px border, {rounded.sm} (2px), padding 10px 24px, text at {typography.button-sm} (14px weight 600) in {colors.ink}. Paired directly beside the coral Create Event button in the nav's right-side cluster.

{component.button-create-event-nav} — Primary action button in the navigation bar. Solid {colors.coral} background, {colors.on-coral} (white) text at {typography.button} (16px weight 500), {rounded.sm}, padding 10px 20px. This is the highest-conversion-trigger element in the persistent chrome—always visible, always accessible. Transitions to {colors.coral-dark} on active press.

{component.button-discover-events} — The hero section's primary CTA. Uses {colors.surface-ghost} (10% white) background with {colors.border-ghost} (20% white) border, rendering as a translucent "glass" button against the dark hero. Text is {colors.on-dark} (white) at {typography.button}, padding 16px 32px (generous for thumb-friendly target), {rounded.sm}. In the screenshot this appears to have a coral-to-orange gradient fill—implementation may vary between ghost-fill and gradient based on A/B testing; the token represents the ghost-base version.

{component.button-create-event-hero} — Secondary hero CTA paired beside Discover Events. Similar ghost construction but with stronger border ({colors.border-ghost-strong} — 30% white, 2px weight) and potentially heavier font weight (600 vs 500). Same dimensions 16px 32px padding. Provides visual hierarchy where Discover Events is "recommended" and Create Event is "alternative path."

{component.link-inline} — Inline text link style seen in error/retry states ("Try again"). Transparent background, {colors.link} (orange) text at {typography.body-md}, with hover:underline behavior. Used for non-button navigational triggers within body copy.

Hero & Display Components

{component.hero-badge} — Small status pill positioned above the hero headline displaying "#1 Event Marketplace". Semi-transparent dark background (rgba(0,0,0,0.5)), white text at {typography.badge-label} (14px weight 600 with +0.7px letter-spacing), {rounded.sm}, padding 8px 16px. Contains a star/icon prefix (yellow star from Lucide set). Floats above the headline with moderate vertical spacing (~16–24px).

{component.hero-headline} — The primary headline "Where Events Come to Life." Transparent background, {colors.body} (white) text at {typography.display-lg} (60px weight 800) in Rajdhani. Line height is tightly set to 1 (60px on 60px font), creating a dense, impactful block. In the rendered output, text appears to have a gradient fill from white through warm peach to coral—this is a CSS background-clip: text treatment applied on top of the base white color token.

{component.hero-body} — Descriptive paragraph beneath the headline. Transparent background, {colors.body-muted} (90% white) text at {typography.body-lg} (24px weight 400) in Spline Sans. Line height 1.33 (32px) provides comfortable reading. Max-width constrained to ~700px for optimal line length (~50–65 characters).

{component.hero-band} — The full-width dark section containing all hero components. Background {colors.surface-soft} (pure black), vertical padding {spacing.section} (80px). Contains the photographic background layer (CSS background-image) with {colors.surface-overlay} (70% black) pseudo-element or gradient overlay for text legibility. Content is centered via flexbox with items-center (vertically centered) or slightly upper-biased alignment.

Editorial Sections

{component.section-mint} — The "Discover Events by Top Locations" content zone. Background {colors.surface-mint} (pale sage #e8eed9) with visible paper/grain texture, padding {spacing.section} vertically. Text content switches to {colors.ink} (near-black) mode. This section demonstrates the light-mode editorial dialect.

{component.section-heading} — Major section title within the mint area ("Discover Events by"). Background transparent, {colors.ink} text at {typography.title-md} (48px weight 700) in Rajdhani. Rendered as part of a bicolor line where adjacent words use different color tokens.

{component.section-subheading-accent} — The colored portion of the section heading ("Top Locations"). Identical typography to {component.section-heading} but text color overridden to {colors.coral} (orange), drawing immediate attention to the searchable/geographic concept. These two components are rendered inline within a single <h2> or equivalent using <span> color overrides.

{component.section-body} — Descriptive paragraph in the mint section ("Explore the most vibrant event scenes..."). Background transparent, {colors.muted} (gray #464646) text at {typography.body-md} (18px weight 400) in Spline Sans. Constrained to similar ~700px max-width as hero body for consistent measure.

Signature Components

{component.floating-card-container} — The outer wrapper for the neo-brutalist floating card positioned at the viewport bottom. Transparent background, contains positioning logic (fixed bottom-6 left-1/2 -translate-x-1/2), sets width to 95% mobile / max-w-6xl (1152px) desktop. Has z-index: 100 ensuring it floats above all content including the fixed nav.

{component.floating-card-inner} — The visible white card inside the floating container. Background {colors.canvas} (white), {colors.ink} text, {rounded.none} (sharp corners), padding 16px 32px, 4px solid {colors.border-strong} (black) border. This is the "face" of the component that users interact with. The offset shadow sits behind this element, created by a sibling div or pseudo-element.

{component.floating-card-shadow} — The hard-edged shadow element behind the floating card. Background {colors.surface-soft} (pure black), {rounded.none}, positioned absolutely at top: 3px; left: 3px (or via translate) relative to the inner card. Creates the signature neo-brutalist "offset" appearance. No blur, no spread—pure geometric displacement.

Forms & Inputs

{component.text-input} — Standard text/email input field (observed in form contexts). Background {colors.canvas} (white), {colors.ink} text at {typography.body-sm} (16px), {rounded.sm}, padding 8px 12px (compact vertical, moderate horizontal), 1px {colors.border-input} border. Height not explicitly constrained but approximates 38–40px based on padding + line-height.

{component.text-input-focus} — Focused state of text input. Maintains all structural properties of {component.text-input} but would typically receive a ring or border-color change (likely to {colors.coral} or focus-ring blue) per accessibility conventions. Focus ring detected in Tailwind classes as focus-visible:ring-2 focus-visible:ring-ring.

Footer & Utility

{component.footer} — Page footer area (partially visible/implied). Background {colors.surface-soft} (black), {colors.muted-soft} (light gray) text at {typography.caption} (13px), padding {spacing.xl} (32px) vertically plus horizontal base spacing. Likely contains legal links, copyright, privacy policy references. Observed including "PRIVACY PROTOCOL" text in the lower viewport.

Do's and Don'ts

Do

• Do use {colors.coral} (#f26d21) for all primary conversion CTAs—it is the singular color that signals "action" in this system and appears on both nav and hero buttons consistently.
• Do apply Rajdhani exclusively at weights 700 or higher for headlines—never use weight 400 or 500 with this face, as it undermines the muscular display intention and conflicts with Spline Sans's territory.
• Do maintain {rounded.sm} (2px) as the default radius for all buttons, inputs, and tags unless explicitly designing a pill-shaped avatar or the signature floating card which requires {rounded.none}.
• Do use {colors.surface-mint} (#e8eed9) with its inherent texture for editorial content sections that follow the dark hero—this sage-toned surface provides necessary visual rest and brand warmth.
• Do pair ghost buttons ({colors.surface-ghost} background with {colors.border-ghost}) against dark backgrounds only—on light surfaces, switch to outlined styles with {colors.border-strong}.
• Do keep hero body text at {typography.body-lg} (24px)—this unusually large body size is intentional for impact and readability over complex photographic backgrounds.
• Do use bicolor heading techniques (splitting phrases between {colors.ink} and {colors.coral} spans) for section titles that emphasize actionable keywords like "Top Locations."
• Do implement the floating card with the brutalist offset shadow ({extensions.shadows.brutalist-offset} — 3px black translate) as a distinctive signature element, never replacing it with a standard soft shadow.
• Do apply backdrop-blur-md to the fixed navigation along with {colors.surface-glass} background to achieve the frosted-glass effect that separates chrome from content.
• Do constrain body copy max-width to ~700px regardless of container width—both hero and editorial sections use this measure for optimal 60–75 character line lengths.
• Do use {colors.primary} (#fde047) gold strictly for active-state indicators (like the highlighted "Home" nav link) and avoid deploying it for primary CTAs—that role belongs to coral.

Don't

• Don't substitute {colors.link} (#ff6b00) orange for {colors.coral} (#f26d21) on buttons—link orange is slightly brighter and reserved for inline text navigation, while coral is the calibrated button fill.
• Don't round hero section photography or apply {rounded.md+} to full-bleed images—all photographic edges meet section boundaries at 90° angles.
• Don't use Rajdhani for body copy, captions, or UI labels—even at small sizes, this face is semantically "headline-only"; Spline Sans handles everything else.
• Don't add gradient backgrounds to the {component.top-navigation}—its elevation comes solely from glass transparency ({colors.surface-glass}) plus blur, not from color fills or shadows.
• Don't expand the radius vocabulary beyond the five defined tokens (sm, DEFAULT, md, lg, pill, none)—inventing intermediate values like 6px or 10px breaks the systematic precision.
• Don't place {colors.muted} (#464646) text on {colors.surface-soft} (black)—this fails contrast requirements; muted gray is exclusively for light-surface contexts.
• Don't remove the 4px black border from the floating card inner element—that border is essential to the neo-brutalist aesthetic and distinguishes the card from standard elevated panels.
• Don't use {typography.display-lg} (60px) outside the hero context—if you need a large heading in editorial sections, step down to {typography.title-md} (48px) to maintain hierarchical distance.
• Don't apply letter-spacing to body text or buttons—the system reserves tracking adjustments for badge labels (+0.7px) and oversized display (-0.02em) only.
• Don't implement hover states as color inversions or fills on ghost buttons—subtle opacity shifts or border-intensity changes align better with the subtle motion philosophy than jarring background swaps.
• Don't promote the mint texture ({colors.surface-mint}) to a system-wide background alternative—it is specifically the "editorial section" surface and should not replace {colors.canvas} for generic content zones.

Motion & Animation

Transition Tokens

/* Core UI transitions (150ms base) */
--transition-color-fast: 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);

/* Comprehensive property transitions (150ms) */
--transition-all-fast: 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 transitions (300ms slow) */
--transition-transform: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Slow color/state transitions (300ms) */
--transition-color-slow: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                         background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                         border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);

Keyframe Animations

• bounce — Standard Tailwind bounce utility (likely unused in production, available in framework).
• ping — Notification pulse/ring animation (available, may be used for real-time updates).
• pulse — Attention-drawing opacity pulse (available).
• spin — Loading spinner rotation (available).
• enter / leave — Custom enter/exit animations (likely for React transition groups or modals).
• go* series (go2264125279, go3020080000, etc.) — Framework-generated animation identifiers, possibly from shadcn/ui or Radix primitives for dropdown/list animations.

Interaction Patterns

• Button hover: Color transitions execute over 150ms using cubic-bezier(0.4, 0, 0.2, 1) easing—this is the "ease-out-quint" curve that feels snappy without being jarring. Background and border colors animate simultaneously.
• Focus rings: Interactive elements gain a 2px ring on focus (detected as focus-visible:ring-2 focus-visible:ring-ring), likely in a neutral or coral tint, with ring-offset to prevent background clash.
• Floating card entrance: The bottom-pinned card likely uses a slide-up + fade-in entrance (supported by the 300ms transform transition token), entering from below the viewport fold.
• Navigation glass effect: The backdrop-blur-md on the fixed nav creates a real-time blur of scrolling content beneath—this is a continuous visual effect rather than a discrete animation.
• Scroll-triggered reveals: While not explicitly detected in static CSS, the section-based layout (dark hero → light editorial) suggests potential parallax or fade-up behaviors on scroll-into-view for the mint section content.
• Dropdown/menu transforms: The 300ms transform transition suggests that any dropdown menus, mobile nav panels, or accordion expansions use smooth Y-axis translations rather than instant display toggles.

No explicit page-level entrance animations (hero text staggering, headline word-by-word reveal) were detected in the extracted keyframes—motion is treated functionally (state transitions) rather than theatrically (narrative choreography).

Imagery Style

• Photographic hero: Full-bleed concert venue photography capturing audience perspective—silhouetted raised hands against bright stage lighting, atmospheric haze, high-contrast chiaroscuro between lit subjects and dark crowd masses. Images are candid/documentary in feel, not staged stock.
• Color grading on photos: Warm color temperature (amber/orange stage lights bleeding into the frame) that harmonizes with the {colors.coral} brand palette. Shadows crushed toward pure black to blend seamlessly with {colors.surface-soft} overlay.
• Texture overlay on sections: The mint editorial section displays a subtle paper-grain or noise texture (visible in screenshot as fine stippling across {colors.surface-mint}). This is likely a repeating SVG noise pattern or low-opacity PNG overlay at 2–3% opacity.
• Imagery dominance: Photography commands the hero completely (background layer), while subsequent sections appear to be typography-driven with potential for card thumbnails or location imagery below the visible fold.
• No illustration or 3D: The current viewport contains no vector illustrations, flat icons-as-art, or 3D renders—the brand relies on photography and typography as its primary visual media.
• Image aspect ratios: Hero photo appears to be 16:9 or wider (cinematic 2.35:1 possible). If event thumbnail cards are implemented, expect 4:3 or 1:1 squares for grid consistency.
• Treatment consistency: All imagery should be treated with either full-bleed (hero) or contained-with-radius (card thumbnails) approaches—no mixed treatments within the same section.
• Dark mode consideration: Since the hero is already dark, "dark mode" for this brand might invert the editorial sections to dark surfaces with light text, or introduce a deeper charcoal option. Current implementation is light-mode dominant with dark hero exception.

Icon System

• Library: Lucide React (detected from Tailwind icon class patterns and framework analysis).
• Specific icons observed:
  • Star/Fill (★) — Used in {component.hero-badge} as "#1 Event Marketplace" prefix, rendered in {colors.primary} gold.
  • Hexagonal brand mark — The Protix logo icon (custom, not from Lucide), an orange hexagon with interior geometric detail.
  • Potential unseen icons: Calendar, MapPin, Clock, Users, Ticket, Search (standard for event marketplaces, expected in expanded pages).
• Treatment: Stroke-based icons (Lucide default) with stroke-width: 2 (or 1.5), sized at 16px–20px for inline use (badge context) and 24px for standalone feature icons.
• Color behavior: Icons inherit currentColor from parent text color, except the brand logo which uses fixed {colors.coral}. The hero badge star explicitly renders in gold/yellow ({colors.primary}) rather than white, making it pop against the dark badge background.
• Alignment: Icons are vertically center-aligned with adjacent text using flexbox items-center, with 6px–8px gap between icon and label text.
• Button icons: Not detected on primary CTAs in the current viewport (text-only buttons), but icon-prefix or suffix support should be built in for "Search Events" or external-link actions.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) — detected via __next_f chunks, RSC patterns, file-based routing signatures
- Styling:        Tailwind CSS v3.4+ with custom design tokens mapped to tailwind.config.js theme extension
- Fonts:          Self-hosted WOFF2 via @font-face (Geist, Geist Mono loaded in source) + Google Fonts fallback for Rajdhani/Spline Sans substitutes
- Animation:      Tailwind built-in transitions (cubic-bezier) + Framer Motion for complex scroll/entrance choreography if needed
- Icons:          Lucide React (npm: lucide-react)
- Component lib:  shadcn/ui (detected from class patterns: ring-offset-background, focus-visible:ring-ring conventions) + Radix UI primitives underneath
- State:          React Context or Zustand for auth/cart state (implied by Sign In / Create Event flows)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout, hamburger nav (implied), hero headline scales down (~36–40px), floating card goes full-width minus gutters, CTA buttons stack vertically | | Tablet | 640px – 1024px | Two-column potential for location grids, nav links may condense or wrap, hero maintains single-column text | | Desktop | 1024px – 1440px | Full navigation visible, hero headline at full 60px, floating card at max-width constraint (1152px), optimal reading column achieved | | Wide | > 1440px | Container maxes at 1440px with auto margins, no further expansion—content does not stretch to fill ultra-wide viewports |

Touch Targets

• {component.button-create-event-nav}: ~140px × 40px (padding 10px 20px + text) — exceeds 44×44px minimum comfortably.
• {component.button-discover-events}: ~160px × 52px (padding 16px 32px + text) — exceeds AAA minimum easily, designed for primary thumb access.
• {component.button-sign-in}: ~120px × 40px — meets minimum, adequate for secondary action.
• {component.text-input}: Height ~38px (padding 8px + line-height) — falls slightly short of 44px AAA recommendation; consider increasing to padding: 12px 12px (44px total) for mobile touch optimization.
• Nav links: Implicitly ~40px+ height via nav bar height — acceptable for tap targets.

Collapsing Strategy

• Navigation: At mobile breakpoints (< 768px), the horizontal nav links (Home, Browse Events, About Us, FAQ, Pricing) collapse into a hamburger menu or slide-over panel. The logo remains visible, and the right-side action buttons (Sign In, Create Event) may reduce to icon-only or stack vertically.
• Hero columns: The asymmetric text/photo split collapses to single-column stacking—headline and CTAs occupy full width above the photo (which may crop to a shorter height or become hidden on smallest screens where bandwidth is concern).
• CTA pair: The horizontal [Discover Events] [Create Event] button pair stacks vertically on mobile, with Discover Events (primary) positioned above Create Event (secondary), maintaining visual hierarchy.
• Floating card: The bottom-pinned floating card reduces from max-w-6xl (1152px) to w-[95%] on mobile, maintaining its fixed-bottom position but consuming more viewport width proportionally. Internal padding may reduce from 16px 32px to 16px 16px.
• Section headings: {typography.display-lg} (60px) scales down via responsive font sizing—likely to 36–40px on mobile—to prevent headline overflow and maintain 2–3 words per line maximum.
• Mint section: The bicolor heading ("Discover Events by Top Locations") may wrap such that the colored span splits across lines; implementation should test for awkward line-breaks within the <span>.

Image Behavior

• Hero photograph: Should maintain aspect ratio and use object-cover: cover to fill the hero container at all breakpoints. On mobile, the photo's focal point (stage lights, upper-right) should be preserved via object-position: center top or similar to prevent cropping away the atmospheric lighting.
• Location/event cards (anticipated): If thumbnail images exist below the fold, they should switch from horizontal card layouts (desktop) to vertical stacks (mobile) with images at 2:1 or 16:9 aspect ratio, constrained to column width.
• Avatar imagery: If user avatars appear in testimonial or host cards, use {rounded.pill} (circle) at 48px–64px diameter, scaling to 40px on mobile.

Iteration Guide

1. Initialize with Next.js + Tailwind — Set up a new project using the App Router pattern, configure tailwind.config.js to accept the full token set from this DESIGN.md's YAML frontmatter as theme extensions (theme.colors.primary, theme.borderRadius.sm, etc.). Never hard-code values that have corresponding tokens.

2. Map fonts immediately — Add @font-face declarations for Rajdhani (Google Fonts CDN or self-hosted) and Spline Sans (commercial source or DM Sans fallback). Define CSS custom properties --font-display and --font-body referencing these families. Ensure Rajdhani loads at weights 600, 700, 800; Spline Sans at 400, 500, 600.

3. Build the fixed navigation first — Implement {component.top-nav} as a fixed top-0 element with backdrop-blur-md, {colors.surface-glass} background, 56px height, and the three-zone layout (logo left, nav center, actions right). Get the glass effect working early as it's a persistent chrome element.

4. Implement the hero band with photo overlay — Create {component.hero-band} at full viewport height minus nav, applying the concert background image with a {colors.surface-overlay} pseudo-element or gradient. Stack {component.hero-badge}, {component.hero-headline} (with gradient text via background-clip: text), {component.hero-body}, and the CTA button pair using flex column centering.

5. Build the neo-brutalist floating card — Construct {component.floating-card-container} with fixed bottom-6 left-1/2 -translate-x-1/2 positioning. Inside, place two children: the shadow div (absolute inset-0 bg-black translate-x-[3px] translate-y-[3px]) and the inner card (relative, white bg, 4px black border, sharp corners, padding). This component is non-negotiable for brand fidelity.

6. Create the mint editorial section — Below the hero, build {component.section-mint} with the {colors.surface-mint} background (add a CSS noise texture if possible using SVG data URI or subtle image overlay). Implement the bicolor h2 using nested spans with {component.section-heading} and {component.section-subheading-accent} color overrides.

7. Implement all button variants as separate components — Each button in the frontmatter (sign-in, create-event-nav, discover-events, create-event-hero) should be its own component or variant, not conditional styling on a single component. This matches the spec's state-variant-as-top-level-entry pattern.

8. Add responsive breakpoint logic — After desktop layout is complete, add md: and sm: prefixes to scale typography (hero headline 60px → 40px → 32px), adjust padding (section 80px → 48px → 32px), stack the CTA buttons, and collapse navigation. Test the floating card at 375px width to ensure it doesn't obstruct critical content.

9. Wire up focus and hover states — Though not documented in spec, implement hover:bg-{color-dark} on all buttons, focus-visible:ring-2 ring-{color} on interactive elements, and active:scale-[0.98] micro-press feedback on primary CTAs using the 150ms timing from the Motion section.

10. Run linting and contrast checks — Execute npx @google/design.md lint DESIGN.md to verify no broken token references. Manually verify WCAG AA contrast ratios: {colors.coral} on white passes for large text; {colors.ink} on {colors.canvas} passes for body text; {colors.body-muted} on black requires verification (90% white on #000 should exceed 7:1). Fix any failures by adjusting token values in config.

Font Setup for Implementation:

/* Google Fonts import for Rajdhani (free substitute for proprietary hosting) */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

/* If Spline Sans unavailable, use DM Sans as closest open-source match */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --font-display: 'Rajdhani', 'Oswald', sans-serif;
  --font-body: 'Spline Sans', 'DM Sans', system-ui, sans-serif;
}

Known Gaps

• Hover state styling: Per the no-hover policy, exact color values for :hover on buttons, links, and cards were not extractable from a single static screenshot. Implementation should derive hover shades by darkening background colors 8–12% or consulting the -hover and -active token variants provided.
• Mobile navigation pattern: The screenshot shows only the desktop expanded nav. Whether mobile uses a hamburger drawer, bottom sheet, or full-screen overlay is unknown—implement based on platform conventions (hamburger recommended for this content density).
• Loading/skeleton states: No skeleton loaders, shimmer effects, or pending-state UI were visible in the DOM snapshot. Design these using {colors.hairline} borders and {colors.surface-strong} backgrounds for placeholder blocks.
• Form validation states: Only the default {component.text-input} was captured; error (red border + message), success (green border), and disabled (opacity reduced) states require design decisions following semantic color tokens.
• Event card components: The viewport cuts off before any event listings, location cards, or ticket cards appear. Their design (image placement, pricing typography, date badges) must be extrapolated from the existing system—likely using {component.card} patterns with {rounded.md} and {colors.canvas} surfaces.
• Authentication flow screens: Sign-in modals, registration forms, and OAuth provider buttons were not visible. These should extend the input and button systems already defined.
• Dashboard/organizer surfaces: Post-login interfaces for event creators (analytics dashboards, attendee lists, ticket management) follow different density and information-hierarchy rules than this marketing landing page and would require separate documentation.
• Pixel-exact mint texture: The {colors.surface-mint} hex (#e8eed9) is accurate for the base color, but the visible paper-grain/noise texture overlay could not be quantified into CSS parameters from the screenshot alone. Implement as a subtle SVG filter or low-opacity tiled PNG at 2–4% opacity.
• Hero gradient text specifics: The headline's apparent white→peach→coral gradient uses background-clip: text with unspecified angle/stops. Approximate as a 135-degree linear gradient from #ffffff through #ffd4bf (warm peach) to {colors.coral} (#f26d21).
• Misleading CSS variable naming: No --theme_* variables detected that would mislead extraction; the codebase appears to use Tailwind's utility-first approach with minimal custom properties, reducing mapping ambiguity.