Studio Dialect

Overview

Studio Dialect is an interactive production studio that bridges culture and technology through immersive 3D, WebGL, and emerging-tech experiences for global brands. The design system embodies **Neon-Brutalist Minimalism**: a stark, high-contrast aesthetic that pairs deep charcoal (#242424) with electric neon-yellow accents (#dfff00), creating visual tension and commanding attention. The brand personality is precise, confident, and unapologetically technical—every pixel serves a purpose, every interaction is deliberate. The UI evokes a sense of cutting-edge digital craft: clean geometric forms, monospace typography for critical UI elements, and aggressive color contrast that demands engagement. Voice: direct, technical, never decorative. Example: "WebGL-powered retail experiences built for scale."

Colors

The color system operates on a **high-contrast, accent-driven model**. Primary (#dfff00, neon-yellow) is the signature brand accent—used exclusively on call-to-action buttons, interactive states, and focal points. It commands attention against the dark surface (#242424) with a luminance ratio exceeding 15:1, ensuring accessibility and visual hierarchy. Secondary (#d2d2d2, light gray) serves as the neutral companion for secondary CTAs, labels, and supporting UI. Tertiary (#ddff00, lime-yellow) provides a subtle variant for badges and accent states. The surface stack is deliberately minimal: surface (#242424) is the primary canvas, surface-container-low (#1a1a1a) darkens for recessed elements, and surface-container-high (#2f2f2f) elevates interactive surfaces. On-surface (#d2d2d2) is the pri

Typography

The type system uses **Geist for body and display, Geist Mono for interactive elements**. Display (189px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and establishes visual dominance; its tight tracking (-0.04em) creates a compressed, technical feel. Headline-lg (56px, 700 weight) and headline-md (40px, 600 weight) structure content hierarchy with consistent -0.01em to -0.02em letter-spacing, reinforcing the geometric aesthetic. Body-lg (18px, 500 weight, 28px line-height) and body-md (14px, 500 weight, 22px line-height) provide readable body copy with generous line-height (1.5–1.6x) to prevent cramping on dark backgrounds. Label-md and label-sm use Geist Mono exclusively (16px and 12px, 600 weight) for buttons, badges, and UI labels—the monospace treatment signals i

Layout

The layout follows a **12-column grid with a 1280px container max-width**, using fluid margins at viewport breakpoints. The gutter is 32px (4 × 8px unit), applied consistently between grid columns and section boundaries. Spacing is semantic: lg (40px) separates major sections, md (24px) groups related components, sm (12px) provides breathing room within components. The design favors generous white-space—minimum 24px padding on all sides of content blocks—to prevent visual congestion and emphasize the minimalist aesthetic. Viewport-relative units (vw) are used for loader and banner elements to maintain proportional scaling across devices. Container max-width (1280px) is enforced to prevent line-length bloat on ultra-wide displays. Horizontal rhythm is strict: all elements align to the 8px u

Elevation & Depth

Depth is conveyed through **subtle shadows and layered surfaces rather than dramatic drop-shadows**. Level 1 (Base): the surface (#242424) with no shadow. Level 2 (Standard Card): surface-container (#242424) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft separation from the background. Level 3 (Elevated/Hover): surface-container-high (#2f2f2f) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), used for modals, popovers, and active states. Shadows are always black (rgba(0, 0, 0, ...)) with blur radii of 8px (sm), 12px (md), or 24px (lg) and vertical offsets of 1px, 3px, or 8px res

Shapes

The shape philosophy is **Geometric Precision**: minimal, sharp corners with strategic rounding only where interaction demands it. Default border-radius is 4px (DEFAULT token), applied to cards, inputs, and standard containers—tight enough to feel technical, loose enough to avoid harshness. Buttons use 4px radius, maintaining a rectangular, button-like silhouette. Badges and pills use full (9999px) radius for circular emphasis. Modals and elevated surfaces use 8px (md) radius for subtle softening. No element uses radius > 16px; the design rejects organic, rounded aesthetics. The 4px default is

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** (backgroundColor: {colors.primary}, textColor: {colors.on-primary}, height: 44px, padding: 12px 24px, rounded: 4px) uses Geist Mono 16px 600 weight for maximum legibility and technical authority. On hover, backgroundColor transitions to {colors.primary-fixed-dim} (#d9fb0d) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied over 150ms ease-out. Active state darkens the shadow to 0 8px 24px rgba(0, 0, 0, 0.2). **button-secondary** mirrors the primary structure but uses {colors.secondary} (#d2d2d2) with {colors.on-secondary} text, providing a neutral alternative for less critical actions. Both buttons are uppercase (text-transform: uppercase) and include monospace brackets via CSS pseudo-elements (::before

Do's and Don'ts

**Do**

• Do use primary (#dfff00) exclusively for CTAs, focus states, and brand-critical interactions—never as a background fill or body text.
• Do apply 24px minimum padding to all content blocks; generous white-space is a core brand principle.
• Do use Geist Mono for all interactive labels (buttons, badges, inputs) to signal technical precision.
• Do maintain 4px border-radius as the default; reject organic, heavily-rounded aesthetics.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover for interactive elements; never use hard outlines.
• Do enforce 8px unit grid alignment for all spacing and sizing; no arbitrary pixel values.
• Do use {colors.on-surface} (#d2d2d2) for all body text on dark surfaces; never use pure white (#ffffff).
• Do test all color combinations for WCAG AA contrast (7:1 minimum for body text, 4.5:1 for UI components).

**Don't**

• Don't use border-radius > 16px; the brand rejects soft, organic curves.
• Don't apply primary color to more than 15% of the viewport; it loses impact through overuse.
• Don't use system fonts or fallback sans-serif; always load Geist and Geist Mono from Google Fonts.
• Don't apply shadows with blur > 24px or vertical offset > 8px; keep depth subtle and technical.
• Don't use pure black (#000000) or pure white (#ffffff) as text or background; use {colors.surface} and {colors.on-surface} instead.
• Don't mix Geist and Geist Mono in the same text block; reserve Mono for interactive elements only.
• Don't apply text-shadow or text-stroke to body copy; use only on small labels over complex backgrounds.
• Don't animate opacity or transform on non-interactive elements; reserve motion for user-triggered interactions (hover, focus, click).