Metropolis

Overview

Metropolis is a high-energy hackathon platform that celebrates startup ambition through a bold, tech-forward aesthetic rooted in Cyberpunk Maximalism. The design embraces vibrant gradients (purples #6e54ff, pinks #ff72b1, cyans #57c8ff), geometric abstraction, and layered 3D city environments to evoke innovation, scale, and the electric excitement of building the next generation of products. The interface treats the user as a protagonist entering a digital metropolis—every interaction feels consequential, every surface hums with possibility. Voice: energetic yet precise, ambitious without pretension. Example: "Six weeks to build the next generation of startups on Monad."

Colors

The color system anchors on a deep void (#0e100f) that grounds the experience, contrasted against a luminous off-white (#fbfaf9) for maximum legibility. Primary accent is Monad Purple (#6e54ff), used exclusively for CTAs, focus states, and brand moments—it commands attention without overwhelming. Secondary Berry (#a0055d) and Tertiary Deep Blue (#200052) provide supporting accents for status, highlights, and layered UI depth. The surface stack (void → surface → raised → container-high) creates visual hierarchy through subtle darkness shifts (0e100f → 0f0f12 → 16161a → 1d1d1d), avoiding pure black to maintain warmth. Outline colors (#565666 for primary, #727285 for variant) sit at 40–45% luminance, ensuring borders read clearly against dark surfaces without harsh contrast. Error red (#ff72b

Typography

The type system pairs brittiSans (a geometric, tech-forward display face) for headlines and display text with Inter (humanist sans-serif) for body and UI labels. This pairing communicates both innovation (brittiSans's sharp, modular geometry) and accessibility (Inter's warm, open letterforms). Display text (80px, 400 weight, -0.02em tracking) anchors hero moments; headline-lg (48px, 400 weight) structures major sections; body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at 1.5 line-height ratio. Labels use Inter at 14px (600 weight, 0.05em tracking) for buttons and 12px (600 weight, 0.08em tracking) for badges, creating visual distinction through weight and spacing rather than size. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.3) on small labels over gradient backgrou

Layout

The page uses a 12-column grid with a max-width of 1080px and 36px gutters, creating a spacious, breathing layout that accommodates both dense information and dramatic visual moments. Section separation uses lg spacing (40px) between major blocks, md spacing (24px) for subsections, and sm spacing (12px) for related elements. The hero occupies full viewport height with a dynamic gradient background (pinks, purples, cyans layered at 45° angles), establishing visual energy immediately. Cards and containers use md padding (24px) internally, with lg spacing (40px) between card groups. Container max-width of 1080px ensures text remains readable while allowing full-bleed gradient backgrounds to extend edge-to-edge. Whitespace is aggressive—never cramped—reflecting the brand's confidence and premi

Elevation & Depth

Depth is conveyed through layered surfaces and inset shadows rather than drop shadows, creating a cohesive, grounded aesthetic. Level 1 (Base): dynamic gradient background with subtle grain texture, no shadow. Level 2 (Standard Card): background #16161a with 1px border rgba(255, 255, 255, 0.1) and inset shadow 0px -1px 3px 0px inset rgba(0, 0, 0, 0.25), 0px 1px 1px 0px inset rgba(0, 255, 255, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.25). Level 3 (Elevated/Modals): background #1d1d1d with the same inset treatment plus a soft drop shadow 0 4px 12px rgba(0, 0, 0, 0.4). Hover states transition to Le

Shapes

The shape philosophy is Geometric Precision—sharp, intentional, tech-forward. Border-radius follows a strict scale: sm (2px) for micro-interactions and subtle softening; DEFAULT (4px) for inputs and small components; md (8px) for cards and medium containers; lg (12px) for buttons and primary interactive surfaces; xl (16px) for modals and hero-scale elements; full (9999px) for badges and pill-shaped elements. Buttons use lg (12px) to signal importance and clickability; cards use md (8px) to balance approachability with tech aesthetics; inputs use DEFAULT (4px) to feel precise and controlled. Th

Components

Action Elements Buttons are the primary interaction surface. Primary buttons (#6e54ff on dark, 48px height, 12px 32px padding, 12px border-radius, label-md typography) use a solid fill with no border. Hover state transitions to #7259ea over 150ms. Secondary buttons use a transparent fill with 1px outline at #565666, same dimensions, transitioning to surface-container-high (#1d1d1d) on hover. Ghost buttons (40px height, 12px 24px padding) have no border or fill, text only, and reveal a subtle background (rgba(251, 250, 249, 0.08)) on hover. All buttons use cubic-bezier(0.4, 0, 0.2, 1) easing for 150ms transitions.

Containers & Surfaces Cards are the primary content container: #16161a background, md padding (24px), md border-radius (8px), 1px border at rgba(255, 255, 255, 0.1), and

Do's and Don'ts

**Do**

• Do use primary purple (#6e54ff) exclusively for CTAs, focus states, and brand moments—it's the signature accent and must remain distinctive.
• Do maintain the void-to-raised surface stack (0e100f → 0f0f12 → 16161a → 1d1d1d) for visual hierarchy; never skip levels or invert the order.
• Do apply inset shadows to cards and containers as specified; they create depth without the flatness of drop shadows and reinforce the architectural metaphor.
• Do use brittiSans for all headlines and display text; Inter is reserved for body, labels, and UI. This pairing is non-negotiable and defines the brand voice.
• Do pair geometric precision (sharp border-radius values: 4px, 8px, 12px) with generous whitespace (lg spacing 40px between sections) to balance tech rigor with premium breathing room.

**Don't**

• Don't use drop shadows on primary surfaces; the inset shadow + border treatment is the brand's depth language. Drop shadows are reserved for Level 3 elevated states only.
• Don't apply primary purple to body text, backgrounds, or non-interactive elements; it dilutes the accent's power and confuses interaction affordance.
• Don't mix border-radius values arbitrarily (e.g., 6px, 10px, 14px). Stick to the defined scale (2px, 4px, 8px, 12px, 16px, 9999px) to maintain visual consistency.
• Don't use system fonts or generic sans-serif fallbacks in production; brittiSans and Inter are loaded via @font-face and are essential to the brand identity.
• Don't reduce contrast below 4.5:1 on text over dark backgrounds; #fbfaf9 on #0e100f is the minimum safe ratio. Avoid mid-tone text (#9d9db2) on dark surfaces for body copy.