TOKEN2049

Overview

TOKEN2049 represents a premium, tech-forward aesthetic rooted in **Digital Maximalism with Precision Minimalism**—a design philosophy that pairs high-contrast dark surfaces (rgb(17, 17, 34)) with vivid electric blue accents (rgb(7, 118, 254)) to convey innovation, clarity, and global authority. The brand serves the crypto ecosystem's decision-makers, and the UI evokes a sense of cutting-edge sophistication: clean, purposeful, and unapologetically bold. Every interaction—from the hero gradient (linear-gradient(164.77deg, #0776FE 9.88%, #211CE5 61.87%)) to the button hover states—communicates precision and forward momentum.

The voice is direct, confident, and data-driven. TOKEN2049 speaks to industry leaders with respect and urgency: no fluff, no apologies, just clarity. Example: "Join 10,000+ ecosystem decision-makers in Singapore, 7–8 October 2026." The tone avoids hype; instead, it emphasizes scale, credibility, and the tangible value of connection. Typography choices—Oswald Variable for headlines (fontWeight: 600, fontSize: 48px, letterSpacing: -0.02em) and Open Sauce One for body (fontWeight: 400, fontSize: 16px)—reinforce this balance between authority and approachability.

Colors

The color system is built on a **dark-first, accent-driven** model. The primary surface is #111122 (rgb(17, 17, 34)), a near-black with a subtle blue undertone that prevents flatness and anchors the entire palette. The primary accent is #0776fe (rgb(7, 118, 254)), a vivid electric blue reserved exclusively for CTAs, focus states, and brand-critical interactive elements. This blue appears on "Join us in Singapore" buttons, link hovers, and active navigation states—it is the visual signal of actionability.

Secondary colors support specific use cases: #00b3ff (cyan) highlights secondary actions and data visualizations; #bb8964 (warm bronze) adds sophistication to tertiary elements and accent typography; #fc3838 (red) signals errors and critical alerts. The surface stack progresses from #060e

Typography

The type system employs a **two-family hierarchy**: Oswald Variable (a geometric, high-contrast sans-serif) for all headlines and display text, and Open Sauce One (a humanist sans-serif) for body, labels, and UI copy. This pairing creates visual tension—Oswald's bold, architectural presence (fontWeight: 600–700, letterSpacing: -0.02em to -0.04em) commands attention, while Open Sauce One's warmth (fontWeight: 400, letterSpacing: 0em) ensures readability and approachability. Display text (60px, lineHeight: 68px) is reserved for hero sections and major announcements; headline-lg (48px, lineHeight: 56px) anchors section titles; body-md (16px, lineHeight: 24px) is the default for paragraphs and card content. Labels are consistently set at 14px (label-md, fontWeight: 600) with 0.01em letter-spac

Layout

The layout system uses a **12-column fluid grid** with a max-width of 1440px, centered via margin-auto. The gutter is consistently 24px (spacing.md), applied as padding on grid columns to maintain breathing room. Container widths scale responsively: at 1440px+ the full width is used; at 991px and below, the layout shifts to a tablet-optimized 834px container; mobile (479px and below) uses full-width with 24px horizontal padding. Section spacing follows a semantic scale: major section breaks use lg spacing (40px margin-bottom), subsections use md spacing (24px), and inline elements use sm spacing (12px). The hero section occupies 100vh with a background image and gradient overlay, establishing visual dominance. Cards and content blocks are laid out in a 2–3 column grid on desktop, collapsin

Elevation & Depth

Depth is conveyed through **layered shadows and subtle transforms** rather than bright highlights. The shadow system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.12)) for subtle dividers and small UI elements; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and dropdowns; lg (0 8px 24px rgba(0, 0, 0, 0.2)) for modals and elevated surfaces. Hover states on cards trigger a combination: box-shadow shifts from md to lg, and transform: translateY(-2px) creates a lift effect, signaling interactivity. Buttons use a pulse animation on hover (box-shadow: 0 0 0 0.5rem rgba(7, 118, 254, 0.2), expanding

Shapes

The shape system follows a **Soft-Technical** philosophy: rounded corners are used strategically to soften the hard edges of a dark, minimalist interface while maintaining precision and clarity. Buttons and primary interactive elements use lg (1rem / 16px) border-radius, creating a balanced, approachable feel. Cards and containers use lg (1rem) or xl (1.5rem / 24px) depending on prominence—elevated modals use xl to signal importance. Input fields and form elements use DEFAULT (0.5rem / 8px) for a more utilitarian, technical appearance. Badges and small UI elements use full (9999px) for a pill

Components

Action Elements Buttons are the primary call-to-action mechanism. **button-primary** uses backgroundColor: {colors.primary} (#0776fe), textColor: white, padding: 12px 24px, height: 48px, rounded: lg (1rem), with a smooth transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1). On hover, the background shifts to {colors.primary-container} (#0769e2) and a 0.5rem blue glow (box-shadow: 0 0 0 0.5rem rgba(7, 118, 254, 0.2)) expands outward, creating a pulse effect. **button-secondary** is transparent with a 1px border in primary blue, textColor: primary, and the same padding and height. On hover, it gains a subtle background: {colors.surface-container-high} (#1a1f3a) while maintaining the border, creating a filled-on-hover effect. Both button variants use label-md typography (14px, fontWei

Do's and Don'ts

**Do**

• Do use primary blue (#0776fe) exclusively for CTAs, focus states, and brand-critical interactions—never for body text or neutral UI.
• Do maintain the dark surface (#111122) as the default background; it reduces eye strain and reinforces the premium, tech-forward aesthetic.
• Do apply lg (1rem) or xl (1.5rem) border-radius to all interactive elements; hard corners conflict with the brand's approachable positioning.
• Do use Oswald Variable for headlines (fontWeight: 600–700, letterSpacing: -0.02em to -0.04em) and Open Sauce One for body (fontWeight: 400, letterSpacing: 0em) to maintain the two-family hierarchy.
• Do combine hover states with both color shifts and subtle transforms (e.g., translateY(-2px), box-shadow expansion) to create clear affordances.
• Do use the surface-container stack (surface-container-low through surface-container-highest) to create visual hierarchy without introducing new colors.

**Don't**

• Don't use pure white (#ffffff) as a background; it breaks the dark-first aesthetic and reduces contrast with on-surface text.
• Don't apply primary blue to non-interactive elements (e.g., body text, dividers, backgrounds); reserve it for actions and focus states only.
• Don't use hard corners (0px border-radius) on buttons, cards, or inputs; the brand requires soft-technical shapes (lg, xl, or full).
• Don't mix typefaces within a single headline or body paragraph; Oswald is for headlines, Open Sauce One is for body—never reverse or blend them.
• Don't create shadows larger than lg (0 8px 24px rgba(0, 0, 0, 0.2)) on standard UI; excessive shadows flatten the hierarchy and cheapen the premium feel.
• Don't use secondary colors (cyan, bronze, red) as primary accents; they are supporting roles only. Primary blue is the only accent that commands attention.