Core Design System & Tokens v1.0
// UTILITY PAGES — STACKER STUDIO DESIGN FOUNDATIONS

The Anatomy Of Uncompromising Digital Craft.

A rigorous living design system documenting typographic scales, color variables, interactive component states, spatial rhythm, and motion curves powering Stacker Studio.

12
Core Color Tokens
10
Typographic Scales
8pt
Baseline Spatial Grid
AAA
WCAG Contrast Standard
// 01. TYPOGRAPHY ARCHITECTURE

Typographic Hierarchy

Set primarily in General Sans with deliberate letter-spacing, aggressive leading clamps, and monospaced metadata labels for brutalist precision.

Display & Headings Scale FONT-FAMILY: 'General Sans', Arial, sans-serif
.display1 clamp(3.5rem, 6.5vw, 6.25rem) / 500 / tracking -0.03em
Radical Vision.
.display2 clamp(2.5rem, 4.5vw, 4.5rem) / 500 / tracking -0.02em
Digital Flagships.
.h1 clamp(2rem, 3.2vw, 3rem) / 500 / tracking -0.02em

Selected Studio Works

.h2 clamp(1.75rem, 2.5vw, 2.25rem) / 500

Uncompromising Strategy & Execution

.h3 clamp(1.35rem, 2vw, 1.75rem) / 500

Interactive WebGL & Modern Frameworks

.h4, .h5, .h6 1.25rem / 1.125rem / 0.875rem (Upper)

Heading 4 — Architectural Foundations

Heading 5 — Design Systems & Guidelines
HEADING 6 — METADATA NAVIGATION SECTION
.subtitle 0.8125rem / 500 / uppercase / tracking 0.08em
// CURATED ARCHIVE — SECTION OVERLINE SPECIMEN
.body-text / p 1.05rem / 1.65 line-height / whitesmoke-200

Stacker Studio is an independent creative direction and digital design practice. We operate at the convergence of bold visual culture and high-performance digital systems, transforming ambitious companies into unforgettable industry leaders through purposeful restraint.

// 02. COLOR TOKENS & PALETTE MATRIX

Color System

A high-contrast monochrome foundation grounded in obsidian dark values, frosted translucent overlays, and deliberate electric accents.

Obsidian Canvas
#070707
Global canvas background base
Carbon Surface
#121212
Elevated module & card fill
Stacker White 100
#FFFFFF / #FDFDFD
Primary headings & active buttons
White Smoke 200
#D1D5DB
Body typography & descriptions
White Translucent 10
rgba(255, 255, 255, 0.05)
Container backdrops & resting cards
White Translucent 20
rgba(255, 255, 255, 0.12)
Default structural borders & lines
Electric Cobalt
#3B82F6
Live status dot & active telemetry
Signal Crimson
#EF4444
Alert states & critical overrides
// 03. BUTTON ANATOMY & ACTIONS

Interactive Components

Engineered with dual-layer kinetic slide text, tactile hover states, and polygon direction indicators.

Solid White Primary Button VARIANT: [data-wf--button--variant="white"]

High-priority calls to action and active navbar indicator pill. Uses a pure white background with inverted dark typography.

Ghost Line Pill Button VARIANT: [data-wf--button--variant="small-white-line-no-icon"]

Secondary actions, card exploration links, and resting state navbar navigation buttons.

Animated Text Link CLASS: .link-text

Footer navigation and inline text anchors. Features a smooth expanding bottom border line upon cursor hover.

Status Capsules & Tags CLASS: .badge-tag / .chip-item
Live Telemetry
Design System WebGL Shaders

Contextual chips, year indicators, and telemetry status badges used across project headers and card metadata.

// 04. SPATIAL RHYTHM & ELEVATION

Grid & Spacing Tokens

A strict 8-point spatial cadence coupled with modular container widths ensuring responsiveness across ultrawide displays and handheld viewports.

--size--extra-tiny
VALUE: 4px / 0.25rem
Border radii & micro chip padding
--size--tiny
VALUE: 8px / 0.5rem
Badge gap & baseline icon offsets
--size--small
VALUE: 16px / 1.0rem
Card gap & mobile container gutters
--size--medium
VALUE: 24px / 1.5rem
Standard desktop card padding
--size--large
VALUE: 48px / 3.0rem
Inter-module spacing & grid gap
--size--huge
VALUE: 96px / 6.0rem
Major vertical section padding
// 05. KINETIC ARCHITECTURE

Motion & Interaction Curves

Crafted for visceral responsiveness using bespoke GSAP easing profiles and hardware-accelerated 3D transforms.

Deceleration Curve (Enter)
cubic-bezier(0.16, 1, 0.3, 1) / 700ms

Our signature easing curve for card entrance, scroll triggers, and typography drop-ins. Snappy initial acceleration followed by a luxurious, gradual deceleration into rest.

Hover Micro-Interaction
cubic-bezier(0.2, 0.8, 0.2, 1) / 250ms

Subtle, low-latency feedback for cursor interaction on buttons, links, and card borders without inducing layout lag or visual hesitation.

motion blur experimental photo motion blur experimental photo motion blur experimental photo
// SYSTEM GOVERNANCE

Build Systems That Scale Without Friction