Studio Apply

Overview

Studio Apply is a creative studio purpose-built for the AI era, serving brands and agencies who demand senior-level creative direction without the overhead of traditional agency structures. The design system embodies "Architectural Minimalism with Vibrant Punctuation"—a philosophy that treats the interface as a clean, grid-based canvas (predominantly white surfaces at #ffffff with deep charcoal text at #060606) punctuated by a bold, energetic orange accent (#f97316) that commands attention on all interactive moments. The brand personality is confident, direct, and unapologetically modern: the UI speaks in short, declarative sentences and uses monospace typography (apkMonogami) for labels and CTAs to signal precision and technical sophistication.

The emotional response is one of clarity and agency. Users feel they're working with a studio that understands their constraints—time, budget, creative ambition—and delivers without pretense. The voice is conversational yet authoritative, never breathless or hyperbolic. Example sentence in brand voice: "Senior creative, delivered on your timeline. No retainers, no politics."

Colors

The color system operates on a principle of "maximum contrast with strategic warmth." The primary surface is pure white (#ffffff, lab(100 0 0)), which provides an uncluttered canvas for content and establishes trust through transparency. The on-surface text is near-black (#060606, lab(1.5609 0 0)), delivering WCAG AAA contrast (21:1) for accessibility and legibility at all sizes. The secondary neutral palette—surface-container-high (#e9ecef), surface-dim (#f5f5f5), and outline (#666666)—creates a subtle hierarchy for dividers, disabled states, and secondary information without introducing color noise.

The primary accent is a vibrant, warm orange (#f97316, lab(55.4814% 75.0732 48.8528)) used exclusively on call-to-action buttons, active states, focus rings, and brand-critical interactive e

Typography

The type system pairs two custom typefaces: apkGaleria (a humanist sans-serif with generous proportions, used for body and display text) and apkMonogami (a monospace font used exclusively for labels, CTAs, and technical information). Display text uses apkGaleria at 60px, weight 700, with -0.04em letter-spacing to create visual compression and authority. Headlines scale from 40px (headline-lg, weight 600) down to 20px (title-lg, weight 600), each with progressively tighter line-heights (48px, 36px, 28px respectively) to maintain visual rhythm. Body text sits at 16px (body-md, weight 400, line-height 24px) with 0em letter-spacing for neutral readability. Labels and CTAs shift to apkMonogami at 12px, weight 400, with 0.05em letter-spacing to signal technical precision and clickability. On sma

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px (96rem), maintaining a 24px gutter on desktop and 12px on mobile. The spacing scale is semantic: unit (4px) for micro-adjustments, sm (12px) for component padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. White space is treated as a first-class design element—sections are separated by lg spacing (40px) to create visual breathing room and reduce cognitive load. The grid is fluid below 768px (md breakpoint), collapsing to single-column layouts with adjusted padding (12px gutter) to maintain the minimalist aesthetic on mobile. Container backgrounds remain white (#ffffff) throughout, with subtle surface-container dividers

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of the accent color rather than layered darkness. The base elevation (sm) uses 0 1px 2px rgba(0, 0, 0, 0.06) for subtle card separation. Mid-level elevation (md) applies 0 4px 12px rgba(0, 0, 0, 0.08) for modals and elevated containers. High elevation (lg) uses 0 16px 40px rgba(0, 0, 0, 0.12) for critical overlays. Accent-driven elevation is reserved for interactive elements: primary buttons and hover states use accent-sm (0 4px 18px rgba(249, 115, 22, 0.22), 0 0 0 1px rgba(249, 115, 22, 0.35)) to create a warm glow that si

Shapes

The shape philosophy is "Architectural Precision with Micro-Softness." All rounded corners use a minimal radius scale: sm (0.125rem / 2px) for buttons, inputs, and small components; DEFAULT (0.5rem / 8px) for cards and standard containers; md (0.75rem / 12px) for larger cards and modals; lg (1rem / 16px) for hero sections and full-width containers; xl (1.5rem / 24px) for oversized components; and full (9999px) for badges and pill-shaped elements. The rationale is that sharp corners (2px radius) on interactive elements like buttons and inputs signal precision and technical sophistication, align

Components

Action Elements Buttons are the primary interaction mechanism and use the accent color (#f97316) as the default state. Primary buttons (button-primary) are 40px tall with 12px vertical and 24px horizontal padding, apkMonogami typography at 12px weight 400, and 0.05em letter-spacing. They carry accent-sm shadow (0 4px 18px rgba(249, 115, 22, 0.22), 0 0 0 1px rgba(249, 115, 22, 0.35)) to create a warm glow. On hover (button-primary-hover), the background shifts to #fb923c and shadow elevates to accent-lg (0 6px 30px rgba(249, 115, 22, 0.5), 0 0 0 1px rgba(249, 115, 22, 0.55)). On active (button-primary-active), background darkens to #ea580c and transform: scale(0.98) provides tactile feedback. Secondary buttons (button-secondary) use transparent backgrounds with 1px solid outline-variant

Do's and Don'ts

**Do**

• Do use the orange accent (#f97316) exclusively on interactive elements—buttons, links, focus states, and badges—to create a clear visual hierarchy and guide user attention.
• Do pair apkGaleria for body and display text with apkMonogami for labels and CTAs to signal the distinction between content and interaction.
• Do maintain white (#ffffff) as the dominant surface color and let negative space breathe; avoid filling every container with background colors or patterns.
• Do apply accent-driven shadows (0 4px 18px rgba(249, 115, 22, 0.22)) to primary CTAs rather than dark shadows to create warmth and visual interest without sacrificing minimalism.
• Do use the 12-column grid with 24px gutters on desktop and 12px on mobile to maintain consistent rhythm across breakpoints.
• Do reserve the error color (#fb2c36) for validation failures and destructive actions; never use it for informational or neutral messaging.

**Don't**

• Don't use the accent color on non-interactive elements like headings, dividers, or decorative elements; it dilutes the signal and confuses users about what is clickable.
• Don't mix apkGaleria and apkMonogami within the same text block; use apkMonogami only for labels, CTAs, and technical information (timestamps, codes, metadata).
• Don't add background colors to cards or containers unless they are in a hover or active state; the white surface is the default and should remain neutral.
• Don't use dark shadows (rgba(0, 0, 0, 0.15) or higher) on primary CTAs; instead, rely on accent-driven shadows and the 2px border-radius to signal elevation.
• Don't exceed 1280px container width on desktop; this maintains focus and readability for long-form content.
• Don't apply rounded corners larger than xl (1.5rem / 24px) to interactive elements; sharp corners signal precision and technical sophistication, which is core to the brand.