Stokt

Overview

Stokt is a motion-forward creative studio that transforms ambitious brand visions into award-winning digital experiences. The design system embodies 'Architectural Minimalism'—a philosophy that combines stark geometric clarity with purposeful color accents, creating interfaces that feel both refined and energetic. The brand serves creative directors, product teams, and enterprises seeking bold, motion-led design that cuts through visual noise. The emotional response is one of confidence and forward momentum: clean lines, generous whitespace, and strategic use of a vibrant orange-red primary color (#ff6a37) create a sense of intentionality and creative power. Stokt's voice is direct, confident, and uncluttered—never apologetic, always purposeful. The vocabulary leans toward action verbs and concrete outcomes: 'We craft motion-led experiences,' 'We move brands forward,' 'We design for impact.' Example sentence in brand voice: 'Your brand deserves motion that matters—let's build something that moves.'

Colors

The Stokt color system is built on a warm, neutral foundation (#f5f0e9 surface) paired with two bold accent colors that drive interaction and hierarchy. Primary (#ff6a37) is the signature accent—a vibrant orange-red used exclusively on call-to-action buttons, active states, and brand-critical interactive elements. Secondary (#ff4d1d) is a deeper, more saturated red-orange reserved for hover states, secondary actions, and emphasis within content. Tertiary (#0099ff) provides a cool counterpoint for informational elements, links, and status indicators. The neutral stack ranges from near-white (#fafafa) through mid-grays (#a3a3a3) to near-black (#0a0a0a), enabling clear text hierarchy without relying on color. On-surface text is always #0a0a0a for maximum legibility. Primary-container (#fff3ed

Typography

The typography system is anchored in PP Neue Montreal—a geometric, contemporary typeface that conveys precision and forward-thinking design. Display (150px, 500 weight) is reserved for hero headlines and brand statements, set with -0.04em letter-spacing to tighten the generous size. Headline-lg (48px, 700 weight) and headline-md (32px, 500 weight) establish section hierarchy with -0.02em and -0.01em tracking respectively, creating visual rhythm without sacrificing readability. Body text (16–18px, 400 weight) uses PP Neue Montreal Regular with 24–28px line-height for comfortable scanning. Labels and UI text shift to PP Supply Mono (14px, 400 weight, 0.05em letter-spacing) to signal technical or actionable content—this monospace treatment creates visual distinction for buttons, badges, and f

Layout

Stokt uses a 12-column grid with a 1200px max-width container, centered on the viewport with 24px gutters on desktop (reducing to 16px on tablet, 12px on mobile). The spacing scale is semantic and hierarchical: unit (8px) for micro-spacing within components, sm (12px) for internal padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Whitespace is aggressive and intentional—never fill empty space with decoration. The page rhythm alternates between full-width hero sections (often with dark backgrounds and white text) and contained content blocks (light backgrounds, dark text). Container max-width is 1200px; content blocks never exceed this, ensuring comfortable line lengths (52–78 characters) for body t

Elevation & Depth

Stokt's elevation system is subtle and purposeful, using soft shadows and layering rather than dramatic depth. Level 1 (Base): flat surfaces with no shadow—the page background (#f5f0e9) and text layers sit flush. Level 2 (Standard Card): apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards, input fields, and dropdown menus; this creates gentle separation without visual heaviness. Level 3 (Elevated/Hover): on card-hover and modal overlays, use box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); the larger blur radius (24px vs 8px) and spread create a floating effect. Never use multiple stacked shad

Shapes

Stokt's shape philosophy is 'Geometric Precision'—rounded corners are used sparingly and consistently to soften hard edges without sacrificing the architectural feel. Buttons and small interactive elements use rounded.lg (1rem / 16px border-radius), creating a slightly softened rectangle that feels contemporary without being bubbly. Cards and larger containers use rounded.lg (16px) as well, maintaining visual consistency across component sizes. Input fields and form controls use rounded.DEFAULT (0.5rem / 8px) for a more subtle, technical appearance. Badges and tags use rounded.full (9999px) to

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#ff6a37) background with white text, 48px height, 12px vertical / 24px horizontal padding, and rounded.lg (16px). On hover, transition to #ff5722 (a darker orange) over 200ms. On active/pressed, apply transform: scale(0.98) and box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) for tactile feedback. Button-secondary is transparent with a 2px solid border in {colors.primary}, same padding and height, with white text. On hover, fill the background with {colors.primary-container} (#fff3ed) while keeping the border. All button text uses {typography.label-md} (PP Supply Mono, 14px, 600 weight, 0.05em letter-spacing) for technical clarity. Links use {colors.primary} text with no underline by defaul

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff6a37) exclusively on primary CTAs and active states—never on passive elements or backgrounds.
• Do maintain 24px gutters and 40px section spacing (lg token) to preserve the minimalist rhythm and prevent visual clutter.
• Do apply smooth 200ms transitions to all interactive state changes (hover, focus, active) using ease-out timing.
• Do use PP Neue Montreal for all headlines and body text; reserve PP Supply Mono only for labels, badges, and UI text.
• Do pair color changes with scale transforms (scale 0.98) or shadow elevation on interactive elements for tactile feedback.
• Do enforce consistent 16px border-radius (rounded.lg) across buttons and cards to maintain architectural cohesion.
• Do use text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) when placing body text over images or colored backgrounds.

**Don't**

• Don't use secondary (#ff4d1d) or tertiary (#0099ff) as primary button colors—these are supporting accents only.
• Don't apply shadows to buttons or links; use color and transform instead to maintain the flat, precise aesthetic.
• Don't mix border-radius values within a single component type (e.g., don't use 8px on some buttons and 16px on others).
• Don't exceed 1200px container max-width or reduce gutters below 24px on desktop—this breaks the grid rhythm.
• Don't use system fonts or generic sans-serif fallbacks; always load PP Neue Montreal and PP Supply Mono via @font-face.
• Don't add decorative elements, gradients, or patterns to surfaces—whitespace and typography are the primary design tools.
• Don't use color alone to signal interactivity; always pair with underline, icon, or state change (hover shadow, border).