Spade&Co.

Overview

Spade&Co. is a high-end VFX production studio operating at the intersection of cinematic ambition and technical precision. The brand serves film, drama, commercial, and music video creators who demand photorealistic visual effects and cutting-edge motion design. The aesthetic is rooted in "Digital Brutalism"—a movement that embraces the raw power of technology through stark contrast, neon accents, and motion-driven interfaces. The UI evokes the sensation of watching render progress unfold: dark, immersive, punctuated by electric cyan and vibrant accent colors that signal energy, precision, and creative mastery. The emotional response is one of controlled intensity—the user feels they are inside a high-performance creative engine.

The brand voice is direct, technical yet approachable, and unapologetically bold. Vocabulary patterns favor action verbs (render, craft, execute, transform) and concrete technical language (VFX, compositing, pipeline, frame rate) without jargon gatekeeping. The tone is confident but not arrogant—it respects the viewer's intelligence and assumes they understand the craft. Example sentence in brand voice: "We render the impossible at 24 frames per second."

Colors

The color system is built on a foundation of near-absolute black (#000000) as the primary surface, creating maximum contrast and visual focus. Primary accent cyan (#00ffd2) is the signature brand color—deployed on all interactive CTAs, focus states, and brand-critical UI elements. This neon cyan appears frequently (31 instances in the live DOM) and signals interactivity, energy, and the brand's forward-thinking creative stance. Secondary accent orange (#ff6900) and tertiary amber (#fcb900) provide supporting warmth and are used for status indicators, secondary CTAs, and highlight layers. Error red (#ff003d) is reserved for critical alerts and destructive actions. The surface stack progresses from #000000 (base) through #1d1d1d (container) to #333333 (highest), maintaining legibility while

Typography

The type system pairs Fjalla One (a geometric, all-caps display font) with Poppins (a humanist sans-serif) to create visual hierarchy and emotional contrast. Fjalla One is reserved for display, headline-lg, headline-md, and title-lg scales—its tight, architectural letterforms (fontWeight: 400, letterSpacing: -0.03em on display) reinforce the technical, precision-focused brand personality. Poppins handles all body and label scales at fontWeight: 500, providing warmth and readability for interface copy, metadata, and interaction labels. The display scale (72px, lineHeight: 80px, letterSpacing: -0.03em) is used sparingly for hero statements and section introductions; headline-md (32px, lineHeight: 40px) anchors major content blocks. Body-md (16px, fontWeight: 500, lineHeight: 24px) is the wor

Layout

The page layout uses a fluid 12-column grid with a max-width container of 1280px, allowing content to breathe on desktop while maintaining focus on large screens. The spacing scale is semantic: xs (4px) for micro-adjustments, sm (12px) for component padding, md (24px) for gutter and section separation, lg (40px) for major section breaks, and xl (64px) for hero/footer spacing. White-space is used aggressively—the dark background and neon accents mean that generous padding (md and lg spacing) prevents visual fatigue and draws attention to key interactive elements. The container-max-width of 1280px ensures that even on ultra-wide displays, content remains scannable and the eye is guided toward CTAs and portfolio work. Horizontal padding is consistently gutter (24px) on desktop, creating a bre

Elevation & Depth

Depth in this system is achieved through layered shadows and strategic use of surface-container tokens rather than blur or transparency. Level 1 (Base): solid #000000 background with no shadow. Level 2 (Standard Card/Container): backgroundColor: {colors.surface-container} (#1d1d1d) with boxShadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, close shadow that lifts content slightly from the base. Level 3 (Elevated/Modal/Overlay): backgroundColor: {colors.surface-container-high} (#2a2a2a) with boxShadow: 0 8px 24px rgba(0, 0, 0, 0.25)—a larger, more diffuse shadow that creates clear visual separation.

Shapes

The shape philosophy is "Soft-Technical"—a balance between the precision of engineering and the approachability of modern UI. Buttons and primary interactive elements use full border-radius (9999px), creating pill-shaped affordances that feel friendly and clickable while maintaining a contemporary aesthetic. Cards and containers use lg (1rem / 16px) border-radius, providing subtle rounding that softens the geometric grid without sacrificing visual clarity. Input fields and secondary containers use DEFAULT (0.5rem / 8px) border-radius, a conservative curve that signals form elements without dra

Components

Action Elements Buttons are the primary interaction mechanism and use full border-radius (9999px) with padding: 12px 28px and height: 44px for comfortable touch targets. button-primary uses backgroundColor: {colors.primary} (#00ffd2) with textColor: {colors.on-primary} (#000000), creating maximum contrast and visual dominance. On hover, transition to button-primary-hover (backgroundColor: {colors.primary-container} #00cc9f) with transition: all 200ms ease-out, signaling state change without jarring animation. button-secondary uses transparent background with border: 1px solid {colors.primary} and textColor: {colors.primary}, allowing secondary CTAs to coexist without visual competition. On hover, apply backgroundColor: rgba(0, 255, 210, 0.1) for subtle feedback.

Containers & Surfa

Do's and Don'ts

**Do**

• Do use primary cyan (#00ffd2) exclusively on CTAs, focus states, and brand-critical interactive elements—it is the signature accent and must remain visually dominant.
• Do maintain high contrast between text and background; white (#ffffff) on dark surfaces (#000000–#1d1d1d) ensures readability and technical clarity.
• Do apply transition: all 200ms ease-out on hover states to provide smooth, predictable feedback without feeling sluggish or over-animated.
• Do use the full 12-column grid and semantic spacing scale (md for gutters, lg for section breaks) to create visual rhythm and prevent cognitive overload.
• Do reserve Fjalla One for headlines and display scales; its geometric precision reinforces the technical brand voice and creates visual hierarchy.

**Don't**

• Don't use cyan (#00ffd2) on secondary elements, backgrounds, or non-interactive surfaces—it must remain the exclusive signal for primary actions.
• Don't apply blur, transparency, or glassmorphism effects; the Digital Brutalism aesthetic demands sharp, high-contrast interfaces with pure shadow-based depth.
• Don't mix rounded corner scales arbitrarily; use full (9999px) for buttons, lg (16px) for cards, DEFAULT (8px) for inputs, and sm (4px) for dividers.
• Don't exceed 200ms transition duration on interactive elements; faster feedback (150ms) feels more responsive and aligns with the technical, high-performance brand.
• Don't use warm colors (orange, amber) as primary accents; reserve them for secondary status indicators and supporting UI to maintain cyan as the dominant brand signal.