Blit Studio

Overview

Blit Studio is a design and technology studio operating at the intersection of art, design, and technology—a philosophy embodied in its aesthetic of "High-Contrast Minimalism with Kinetic Energy." The brand personality is bold, intellectually rigorous, and visually uncompromising. The UI employs a stark white canvas (#ffffff) punctuated by a vivid orange-red primary accent (#ff4200) and a neon lime secondary (#00ff00), creating an almost jarring visual tension that mirrors the studio's experimental approach. The emotional response is one of precision and creative audacity: the interface feels like a gallery wall where every element has been deliberately placed, nothing is accidental, and silence speaks as loudly as color. Voice: direct, confident, never apologetic. Example sentence: "We design at the edge where art stops explaining itself."

Colors

The color system is deliberately polarized: a near-pure white background (#ffffff, surface) provides maximum contrast and clarity, while the primary accent—a saturated orange-red (#ff4200)—commands attention on CTAs, navigation highlights, and interactive states. This primary is used sparingly but decisively: on the 'let's talk' button, hover states, and focus indicators. The secondary accent, a vivid lime green (#00ff00), serves as a secondary brand color for status indicators, badges, and experimental UI elements, creating visual rhythm through complementary saturation. Supporting colors include a professional blue (#2fa1d6) for tertiary information and a warm tan (#b0a58f) for subtle borders and dividers. The surface stack remains minimal: surface (#ffffff), surface-container (#eeeeee),

Typography

The type system uses Archivo exclusively—a geometric sans-serif that pairs technical precision with humanist warmth. Display (72px, 700 weight, -0.04em tracking) anchors hero sections and major headlines with commanding presence; Headline-lg (48px, 700 weight) breaks content into scannable sections; Body-md (16px, 400 weight, 24px line-height) maintains readability at 16px minimum on all interactive elements. The hierarchy is reinforced through weight rather than size: body text at 400 weight contrasts sharply with 600–700 weight labels and headlines, creating visual rhythm without excessive size variation. Apply text-rendering: optimizeLegibility and -webkit-font-smoothing: antialiased on all typography to ensure crisp rendering on the high-contrast white background. Labels and CTAs use 6

Layout

The page layout follows a fluid 12-column grid with a max-width of 900px, centered on the viewport. Spacing is semantic and generous: lg spacing (40px) separates major sections, md spacing (24px) creates breathing room between cards and content blocks, and sm spacing (12px) is reserved for internal component padding. The white background extends edge-to-edge, with content inset by gutter spacing (24px) on desktop, reducing to 12px on tablets and 8px on mobile. The grid is asymmetrical and deliberately unbalanced—images and text blocks are offset rather than perfectly aligned, reinforcing the studio's experimental ethos. Container max-width of 900px ensures readability while allowing full-width hero images to break the grid. Whitespace is treated as an active design element: empty space aro

Elevation & Depth

Depth is achieved through minimal, precise shadows rather than layering. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, modals) uses a subtle shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied on hover to create a gentle lift effect. Level 3 (dropdowns, overlays) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) for pronounced separation. Transitions between states are smooth: transition: all 200ms ease-out on hover and focus states. The high-contrast aesthetic means shadows are visible but never dominant; they serve as functional indicators of in

Shapes

The shape philosophy is "Architectural Precision with Minimal Ornamentation." Border-radius follows a strict scale: sm (0.25rem / 4px) for small interactive elements like badges and inputs, DEFAULT (0.5rem / 8px) for standard cards and buttons, md (0.75rem / 12px) for larger containers, lg (1rem / 16px) for modals and overlays, and full (9999px) for circular badges and accent elements. The circular orange accent (#ff4200) that appears throughout the design uses border-radius: 50% to create a perfect circle—this becomes a visual signature. Buttons use rounded corners at 4px (sm) to maintain a t

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses background-color: #ff4200, color: #ffffff, padding: 12px 24px, height: 44px, border-radius: 4px, font-weight: 600, and font-size: 14px. On hover, the background shifts to #e63a00 with a 200ms ease-out transition. Secondary buttons use a transparent background with a 2px solid border in #ff4200, maintaining the same padding and height. The accent green button (for secondary CTAs) uses background-color: #00ff00, color: #000000, border-radius: 9999px (full circle), and padding: 8px 16px for a more playful, experimental feel.

Containers & Surfaces Cards are the primary container component: background-color: #ffffff, border: 1px solid rgba(94, 101, 125, 0.502), border-radius: 8px, padding: 24px. On hov

Do's and Don'ts

**Do**

• Do use the orange-red primary (#ff4200) sparingly and decisively—reserve it for CTAs, focus states, and brand moments that demand attention.
• Do maintain maximum contrast: pure black text on white, white text on colored backgrounds, never gray-on-gray or low-contrast combinations.
• Do apply consistent border-radius values across components (4px for buttons, 8px for cards, 50% for circular accents) to reinforce the systematic design language.
• Do use Archivo exclusively for all typography; its geometric precision is the brand's typographic signature.
• Do treat whitespace as an active design element; empty space around key elements (like the orange accent circle) is as important as the elements themselves.
• Do apply smooth transitions (200ms ease-out) on all interactive state changes to signal interactivity without sacrificing the brand's technical precision.

**Don't**

• Don't use drop shadows or blur effects that soften the brand's sharp, architectural aesthetic; keep shadows minimal and functional (0 3px 8px rgba(0, 0, 0, 0.15) maximum).
• Don't mix typefaces; Archivo is the exclusive font family across all scales and weights.
• Don't apply border-radius: 50% to buttons or cards; reserve full-circle radius for accent badges and circular graphic elements only.
• Don't use the secondary green (#00ff00) as a dominant background color; it should accent and highlight, never overwhelm.
• Don't reduce contrast for aesthetic reasons; all text must meet WCAG AA standards (4.5:1 minimum for body text, 3:1 for large text).
• Don't add decorative elements, gradients, or patterns that compete with the high-contrast minimalist aesthetic; every pixel must earn its place.