SmartGig

Overview

SmartGig is a modular event operating system designed for event organizers who demand unified control over complex, multi-stakeholder operations. The brand embodies a "Command-Center Minimalism" aesthetic—a high-contrast, data-forward visual language that prioritizes clarity and operational authority. The interface uses a stark black hero (rgb(11, 11, 11)) paired with white typography and strategic accent colors (indigo #4f46e5 for interactive elements, red #ef4444 for alerts) to evoke a sense of professional command and precision. The emotional response is one of control and confidence: users feel empowered to orchestrate events at scale without cognitive overload.

The brand voice is direct, authoritative, and action-oriented. SmartGig speaks in imperative language: "Plan. Manage. Execute. Elevate." Vocabulary favors operational terms (lifecycle, modules, orchestrate, unified) over marketing flourish. The tone avoids breathlessness; instead, it conveys earned expertise. Example sentence in brand voice: "Retire the spreadsheet and shared-inbox routine—SmartGig consolidates 12 event workflows into a single operating system."

Colors

SmartGig's color system reflects a command-center aesthetic built on high contrast and functional clarity. The primary color is pure white (#ffffff), used for CTAs ("Book a Demo", "Build your package") and interactive surfaces. This is not a neutral background—it is the brand's signature accent, commanding attention against dark contexts. The secondary color is indigo (#4f46e5), deployed for progress indicators, focus states, and secondary CTAs; it appears in the NProgress bar (box-shadow: 0 0 10px #4f46e5, 0 0 5px #4f46e5) and ring colors (--tw-ring-color: #2563eb for input focus). The tertiary color is red (#ef4444), reserved for error states, alerts, and status badges. The surface stack is anchored in light neutrals: surface (#f8fafc) for page backgrounds, surface-container (#ffffff) fo

Typography

SmartGig's type system is built on Cabinet Grotesk (headline/display) and system-ui sans-serif (body), creating a hierarchy that balances geometric precision with accessibility. Display (69px, 600 weight, -0.02em tracking) is reserved for hero headlines like "The Event Operating System"—large, commanding, and set in white on dark backgrounds. Headline-lg (40px, 600 weight) is used for section titles and module names. Body-lg (18px, 400 weight, 28px line-height) carries descriptive copy and feature descriptions, ensuring readability at scale. Label-md (14px, 700 weight, Cabinet Grotesk) is applied to button text and interactive labels, creating visual weight and affordance. On small labels over busy backgrounds (e.g., status badges), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure

Layout

SmartGig uses a 12-column fluid grid with a max-width of 1280px (container-max-width: 1280px), allowing responsive scaling from mobile to desktop without breakpoint-heavy complexity. The page rhythm is driven by semantic spacing: lg (40px) separates major sections (hero to features, features to case studies), md (24px) is used for card padding and section margins, and sm (12px) for internal component spacing. The hero section spans full-width with 80px vertical padding (top and bottom) and centered content, creating breathing room around the primary CTA. Cards use 28px padding with 1px borders, establishing a consistent container language. White-space is treated as a design material: the light background (#f8fafc) is never cluttered; negative space around CTAs ("Book a Demo" sits in a 24px

Elevation & Depth

SmartGig's depth model is achieved through layered shadows and border treatments rather than color gradients. Level 1 (Base) uses no shadow—flat surfaces like body backgrounds (#f8fafc) and text. Level 2 (Standard Cards) applies elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) with a 1px border in outline (#d1d5db), creating subtle separation from the background. Level 3 (Elevated/Modals) uses elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)) with a 1px border, reserved for modals, popovers, and hero overlays. The hero section (#0b0b0b) uses no shadow but achieves depth through color contrast and a s

Shapes

SmartGig employs a "Geometric Precision" shape philosophy—sharp, rectilinear forms that reinforce the command-center aesthetic. Buttons use rounded.DEFAULT (0.5rem / 8px) for a subtle, professional appearance; this radius is applied to all interactive elements (inputs, selects, badges) to create visual cohesion. Cards use the same 8px radius, avoiding the softness of larger radii while maintaining approachability. The hero section and full-width overlays use 0px radius (sharp edges), emphasizing authority and structure. Badge elements use rounded.full (9999px) for pill-shaped containers, creat

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary (white background, black text, 12px 24px padding, 44px height, 0.5rem radius) is the dominant CTA, appearing in high-contrast contexts (dark hero, light cards). On hover, background shifts to primary-fixed-dim (#ededed) with a 150ms ease-in-out transition, signaling interactivity without jarring color shifts. Button-secondary (transparent background, 1px outline border, 8px 16px padding) is used for secondary actions like "Build your package"; on hover, the background fills with surface-container-high (#ededed) and the border darkens to on-surface-variant (#374151). Both button variants use label-md typography (14px, 700 weight, Cabinet Grotesk) for visual weight.

Containers & Surfaces Cards (background:

Do's and Don'ts

**Do**

• Do use white (#ffffff) as the primary accent on dark backgrounds—it commands attention and signals the most important CTA.
• Do apply 28px padding to cards and 12px to internal component spacing; this maintains the semantic spacing scale across all surfaces.
• Do use Cabinet Grotesk for headlines and interactive labels to reinforce the geometric, command-center aesthetic.
• Do apply 1px borders in outline (#d1d5db) to all cards and containers; this reinforces structure without visual noise.
• Do use the secondary color (#4f46e5) for focus states, progress indicators, and secondary CTAs to create a consistent accent language.
• Do apply elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) to hovered cards and elevation.lg to modals to create clear depth hierarchy.

**Don't**

• Don't use rounded corners larger than 1rem on buttons or cards; the brand relies on geometric precision, not softness.
• Don't apply shadows to the hero section or full-width overlays; use color contrast and borders instead to maintain the command-center aesthetic.
• Don't mix Cabinet Grotesk and system-ui sans-serif in the same headline; use Cabinet Grotesk exclusively for display/headline levels.
• Don't use the tertiary color (#ef4444) for anything other than errors, alerts, and destructive actions; it is reserved for high-priority states.
• Don't exceed 1280px container max-width; this ensures readability and maintains the focused, operational feel.
• Don't apply opacity or transparency to primary text (on-surface, #111827); maintain full contrast for accessibility and clarity.