ActiUp

Overview

ActiUp is a Southeast Asian event ticketing platform that democratizes access to running races, concerts, workshops, and community events. The design system embraces a "Material-Driven Pragmatism" aesthetic—combining Google Material Design 3's structured color tokens and typography hierarchy with a clean, transaction-focused interface that prioritizes trust and speed. The brand serves both casual event attendees and professional event organizers, evoking confidence through clarity: every interaction is predictable, every CTA is unmistakable, and every data point is legible at a glance.

ActiUp's voice is direct, helpful, and locally aware. The tone avoids hype; instead, it speaks in concrete details: "Register for Ultra Trail Cao Bàng on 2/9 — 25% off this week" rather than "Amazing events await!" The vocabulary is transaction-oriented (register, secure, confirm, discover) and community-focused (join, share, celebrate). The brand personality is that of a reliable friend who knows the event scene and makes booking effortless—professional without being corporate, friendly without being casual.

Colors

ActiUp's color system is rooted in Material Design 3's semantic token structure, with a primary accent of #1a73e8 (Google Blue) used exclusively for CTAs, links, focus states, and key interactive elements. This blue is the visual signature of trust and action—every "Register," "Buy Now," and "Learn More" button uses this hex. The secondary color, #2196f3 (a lighter, more vibrant blue), supports secondary actions and informational highlights. The tertiary accent, #ff9800 (Material Orange), is reserved for promotional badges, limited-time offers, and event category tags—drawing attention without competing with primary actions.

The surface stack is anchored in pure white (#ffffff) for the main canvas, with a carefully calibrated container hierarchy: surface-container-low (#f5f6f7) for subtle

Typography

ActiUp's type system pairs Montserrat (bold, geometric, modern) for all headlines and display text with Roboto (neutral, highly legible, Google-native) for body copy and labels. This pairing communicates professionalism and approachability: Montserrat's weight and geometry command attention for event titles and section headers (28–60px, weights 600–700), while Roboto's open counters and consistent metrics ensure body text remains scannable at 16–18px, weight 400. Headlines use tight line-height (1.2–1.3x) and negative letter-spacing (-0.02em to -0.04em) to create visual density and urgency; body text uses 1.5x line-height (24–28px) and +0.01em letter-spacing for breathing room. Labels and CTAs use Roboto at 12–14px, weight 600, with +0.01em to +0.02em letter-spacing to emphasize action. On

Layout

ActiUp uses a fluid 12-column grid with a max-width of 1280px, centered on desktop and edge-to-edge on mobile (15px padding on each side, per the live computed styles). The page rhythm is driven by a semantic spacing scale: xs (4px) for micro-adjustments, sm (12px) for component internals, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Event cards occupy 3–4 columns on desktop, 2 on tablet, and full-width on mobile, with md spacing between them. The container max-width of 1280px ensures content never stretches beyond comfortable reading width; on wider screens, symmetric margins expand. White-space is generous but purposeful: lg spacing between major sections (hero, featured events, category grid) preve

Elevation & Depth

Depth in ActiUp is conveyed through a three-tier shadow system that mimics physical paper layers. Level 1 (Base/Surface) has no shadow—the white canvas is the foundation. Level 2 (Standard Cards & Dropdowns) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift that separates cards from the background without visual drama. Level 3 (Modals, Hovered Cards, Popovers) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a softer, more diffuse shadow that suggests greater distance. All interactive elements (buttons, inputs, cards) transition between shadow levels on hover: a card at re

Shapes

ActiUp employs a "Soft-Technical" border-radius philosophy: rounded corners are present but restrained, signaling approachability without sacrificing precision. The rounded scale progresses from sm (0.25rem / 4px) for small UI elements like chips and badges, DEFAULT (0.5rem / 8px) for input fields and minor components, md (0.75rem / 12px) for list items and secondary cards, lg (1rem / 16px) for primary cards and buttons, xl (1.5rem / 24px) for modals and hero sections, and full (9999px) for pill-shaped buttons and badges. Buttons use lg (16px) to feel substantial and clickable; input fields us

Components

Action Elements Buttons are the primary driver of user intent. The button-primary component uses {colors.primary} (#1a73e8) with white text, 12px vertical / 24px horizontal padding, 48px height, and lg rounding (16px). On hover, the background darkens to #1565c0 and the shadow elevates from md to lg (0 8px 24px rgba(0, 0, 0, 0.12)), with a 200ms ease transition. On active/press, the background further darkens to #0d47a1. The button-secondary variant uses a transparent background with a 2px primary-colored border and primary text; on hover, it fills with primary-container (#d2e3fc) while maintaining the border. Button-tertiary uses the tertiary accent (#ff9800) for promotional or secondary CTAs (e.g., "Explore More Events"); on hover, it darkens to #f57c00. All buttons use {typography.l