Arc Studio

Overview

Arc Studio embodies Architectural Minimalism—a design philosophy that prioritizes clarity, precision, and functional elegance. The brand serves early-stage startups and Y Combinator companies seeking unified design partnerships that span brand identity, product design, and web presence. The visual system is deliberately restrained: a near-white canvas (#fefefe) with deep charcoal text (#0a0a0a) creates maximum legibility, while a vibrant cobalt primary (#0a76ff) and warm orange accent (#ff6601) punctuate key interactions and moments of emphasis. The emotional response is one of confidence and professionalism—users perceive Arc as a studio that understands both creative vision and technical rigor.

The brand voice is direct, assured, and unpretentious. Arc speaks in active language without corporate jargon: "All-in-one design studio" rather than "comprehensive integrated design solutions." The tone avoids breathlessness; instead, it conveys calm expertise. Example: "We partner with early-stage startups to build brands that scale." Typography is set in TWKLausanne, a geometric sans-serif that balances geometric precision with humanist warmth, reinforcing the studio's blend of analytical thinking and creative intuition.

Colors

The Arc color system operates on a principle of high contrast and intentional restraint. The surface stack is anchored in near-white (#fefefe for surface, #f5f5f5 for surface-dim, #ffffff for surface-bright), providing a clean, minimal canvas that emphasizes content. On-surface text is set to deep charcoal (#0a0a0a), ensuring WCAG AAA contrast ratios (21:1) for accessibility and visual authority. The primary color, cobalt blue (#0a76ff), is the signature accent reserved exclusively for call-to-action buttons, active states, focus rings, and brand-critical interactive elements. It appears in the primary button with a layered shadow treatment (0px 4px 8px 0px rgba(3, 22, 47, 0.1), inset 0px -4px 24px 0px #0a76ff) that creates subtle depth without departing from the minimalist aesthetic. Seco

Typography

The typography system uses TWKLausanne across all scales, from display (60px, weight 700, -0.04em tracking) down to label-sm (12px, weight 500, 0.01em tracking). The type hierarchy communicates information architecture through size and weight rather than color or style variation. Display and headline-lg use tighter letter-spacing (-0.04em and -0.02em respectively) to create visual impact and reinforce the geometric precision of the brand; body text (16–18px, weight 400, 0em tracking) is set loose and generous, prioritizing readability over visual compression. The label-md weight of 550 (a deliberate mid-weight between regular and semibold) is applied to all button text, creating a subtle visual distinction that signals interactivity without the heaviness of full semibold. On small labels o

Layout

Arc's layout follows a 12-column grid with a fixed container max-width of 1234px, centered on the viewport. The page rhythm is built on a spacing scale of 4px units: xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Section separation uses lg spacing (40px) for major content blocks, creating breathing room that reinforces the minimalist aesthetic. The header padding is set to 48px vertical and 96px horizontal (on desktop), establishing a generous margin that frames the logo and navigation. Cards and containers use md padding (24px) internally, with sm (12px) gaps between nested elements. The gutter between grid columns is 24px, maintaining consistent horizontal rhythm. White-space is treated as a first-class design element: empty space is never wasted but rather used to guide the eye a

Elevation & Depth

Depth in Arc's design system is achieved through subtle shadow and surface-color shifts rather than dramatic layering. The elevation system uses three primary levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for micro-interactions like hover states on list items, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like dropdowns. Buttons employ a compound shadow strategy: a soft outer shadow (0px 4px 8px 0px rgba(3, 22, 47, 0.1)) combined with an inset shadow (inset 0px -4px 24px 0px #0a76ff for primary buttons) creates a subtle beve

Shapes

Arc's shape philosophy is Geometric Precision—all rounded corners are intentionally minimal, reinforcing the architectural minimalism of the brand. Buttons use a full radius ({rounded.full}, 9999px) to create pill-shaped forms that feel modern and approachable while maintaining geometric clarity. Cards and containers use md radius (0.75rem / 12px), a subtle rounding that softens edges without introducing organic curves. Input fields use the DEFAULT radius (0.5rem / 8px), a conservative rounding that signals form elements without visual noise. The logo itself uses sharp, geometric lines with mi

Components

Action Elements Buttons are the primary interactive element and use a two-tier system: primary (cobalt #0a76ff, full radius, 46px height, 0 18px padding) for main calls-to-action like "Book a call," and secondary (light gray #e2e2e5, full radius, 46px height, 0 18px padding) for lower-priority actions like "Send message." Both use label-md typography (14px, weight 550, -0.01em tracking) and apply a compound shadow: outer shadow (0px 4px 8px 0px rgba(3, 22, 47, 0.1)) plus inset shadow (inset 0px -4px 24px 0px [color]). On hover, the outer shadow intensifies to rgba(3, 22, 47, 0.15) and the inset shadow shifts to the hover color (#0a5cc4 for primary, #d0d0d5 for secondary), with a 200ms transition. On active, apply transform: scale(0.96) to provide tactile feedback. Focus states use a 2p

Do's and Don'ts

**Do**

• Do use the primary color (#0a76ff) exclusively for main CTAs, active states, and focus rings—never for decorative elements or backgrounds.
• Do maintain generous white-space (lg spacing, 40px) between major sections to reinforce the minimalist aesthetic and guide user attention.
• Do apply the compound shadow treatment (outer + inset) to all buttons to create subtle depth and signal interactivity without visual heaviness.
• Do use TWKLausanne at weight 600+ for headlines and weight 400 for body text, avoiding intermediate weights except for label-md (550) on buttons.
• Do constrain content to the 1234px container max-width and center it on the viewport to maintain focus and readability.
• Do use surface-container tonal shifts (not color shifts) to create depth, preserving the minimalist palette.

**Don't**

• Don't use secondary (#e2e2e5) or tertiary (#ff6601) as primary interactive colors—reserve them for supporting actions and accents only.
• Don't apply shadows heavier than lg (0 8px 24px rgba(0, 0, 0, 0.12)) to any element; the system prioritizes clarity over depth.
• Don't use rounded corners greater than 1.5rem (xl) except for full-radius buttons; excessive rounding contradicts the geometric precision of the brand.
• Don't reduce padding below sm (12px) on interactive elements; generous padding ensures accessibility and visual clarity.
• Don't apply text-shadow to body text or headlines; reserve it for small labels (12px or smaller) over busy backgrounds only.
• Don't use color to convey information hierarchy; use size, weight, and spacing instead, maintaining the minimalist palette.