Short North Studio

Overview

Short North Studio is a premium creative space booking platform that embodies 'Refined Maximalism'—a design philosophy that pairs bold, expressive typography with a soft, welcoming color palette to create an atmosphere of artistic confidence without pretension. The brand serves independent creators, small production teams, and event hosts seeking a flexible, professionally equipped studio in Columbus' vibrant Short North Arts District. The UI evokes a sense of creative possibility: the hero headline in Archivo Black (96px, -0.04em letter-spacing) commands attention with its architectural weight, while the blush background (rgb(248, 232, 238)) and violet accent (rgb(155, 114, 207)) create an inviting, contemporary energy. The emotional response is one of accessibility paired with sophistication—this is a space for serious creators who don't take themselves too seriously.

The brand voice is direct, warm, and action-oriented. Vocabulary favors concrete descriptors ('sun-drenched', 'tailored for creators, by creators', 'instantly bookable') over abstract marketing speak. Tone is conversational yet professional, never breathless or overly casual. Example sentence in brand voice: 'Book by the hour for shoots, rehearsals, workshops, pop-ups, and celebrations—no minimums, no surprises.'

Colors

The color system centers on a vibrant primary accent (Violet #9b72cf) paired with a warm, neutral surface palette to maximize contrast and legibility without visual fatigue. Primary (#9b72cf) is used exclusively for CTAs, interactive states, headlines, and focus indicators—it's the signature brand color that signals interactivity and brand presence. Secondary (Petal #f4a8c8) provides a softer, more approachable accent for supporting UI elements, badges, and hover states; it appears frequently in card backgrounds and decorative accents. Tertiary (Burnt Orange #fe7b02) is reserved for status indicators and accent highlights where warmth and urgency are needed.

The surface stack uses a warm off-white palette: surface-bright (#ffffff) for primary card backgrounds, surface (#fcfbf8) for the pa

Typography

The type system employs a two-family strategy: Archivo Black for all display and headline levels (96px down to 12px), and Hind for body and label content. Archivo Black's geometric, high-contrast letterforms (font-weight: 700 throughout) communicate creative confidence and visual authority, while Hind's warm, humanist proportions (300–700 weights available) ensure body text remains approachable and legible at small sizes. Display (96px, lineHeight: 104px, letterSpacing: -0.04em) is used exclusively for the hero headline 'Creative Space Refined'—the negative letter-spacing creates visual tension that reinforces the brand's artistic edge. Headline-lg (48px, -0.02em) is reserved for section titles; headline-md (32px, -0.01em) for subsections. Body-lg (18px, lineHeight: 28px) is used for descr

Layout

The layout employs a 12-column grid system with a max-width of 1280px (container-max), centered with 24px gutters on desktop and 16px on mobile. The hero section uses a 8-4 column split (md:col-span-8 and md:col-span-4) to balance the large headline card with stat cards on the right. Section spacing follows a semantic scale: 40px (lg) separates major sections (e.g., hero from 'Studio kit'), 24px (md) separates subsections, and 12px (sm) separates inline elements. The blush background (#fcfbf8) extends edge-to-edge, creating a cohesive visual container. Cards use 40px border-radius (rounded-[2.5rem]) and 56px padding (md:p-14) to create generous breathing room around content. The fixed header (z-40, transition-all duration-300) maintains a transparent background until scroll, preserving the

Elevation & Depth

Depth is conveyed through a layered shadow system that emphasizes card separation and interactive affordance. Level 1 (Base): the blush surface (#fcfbf8) with no shadow, establishing the visual foundation. Level 2 (Standard Card): box-shadow: 0 20px 48px rgba(244, 168, 200, 0.2) on hero cards and stat cards, using the secondary color (Petal) to create a warm, cohesive shadow that echoes the brand palette. Level 3 (Elevated/Interactive): box-shadow: 0 24px 56px rgba(244, 168, 200, 0.25) on hover states, increasing the blur radius and opacity to lift the element visually. Primary CTAs use a dedi

Shapes

The shape language follows 'Soft Architectural'—a philosophy that pairs sharp, geometric forms with generous rounding to balance precision with approachability. Hero and stat cards use 40px border-radius (rounded-[2.5rem] or 2.5rem), creating a soft, inviting container that feels premium without being overly playful. Primary CTAs use 16px border-radius (rounded-2xl or 1rem), striking a middle ground between button-like affordance and card-like softness. Secondary buttons and use-case cards employ 24px border-radius (rounded-3xl or 1.5rem), reinforcing the softer, more exploratory nature of sec

Components

Action Elements Primary buttons (button-primary) use backgroundColor: {colors.primary} (#9b72cf), textColor: white, padding: 20px 40px, height: 48px, rounded: 1rem, with boxShadow: 0 8px 24px rgba(155, 114, 207, 0.3). On hover (button-primary-hover), the background shifts to #8a5fb8 (a 10% darker violet) and the shadow expands to 0 12px 32px rgba(155, 114, 207, 0.4), creating a tactile lift effect. Transition: all 0.2s cubic-bezier(0.16, 1, 0.32, 1). Secondary buttons (button-secondary) invert the logic: transparent background with a 2px border in rgba(155, 114, 207, 0.2), textColor: {colors.primary}, same padding and height. On hover, the border strengthens to rgba(155, 114, 207, 0.6) and a subtle background tint (rgba(155, 114, 207, 0.04)) appears. Both button variants use font-displ

Do's and Don'ts

**Do**

• Do use Archivo Black for all headlines and CTAs to reinforce brand authority and visual hierarchy; reserve Hind for body copy and descriptive text.
• Do apply the primary violet (#9b72cf) exclusively to interactive elements (buttons, links, focus states) to create a consistent, predictable interaction model.
• Do maintain 40px border-radius on hero and stat cards to establish the 'Soft Architectural' shape language; never use sharp corners (0px) on primary containers.
• Do layer shadows using color-tinted values (rgba(155, 114, 207, x) for primary, rgba(244, 168, 200, x) for secondary) to create cohesive depth that echoes the brand palette.
• Do use the full 12-column grid with 24px gutters on desktop and collapse to single-column on mobile (md: 768px breakpoint) to maintain responsive legibility.
• Do apply uppercase text-transform and 0.08em+ letter-spacing to all label and button text to reinforce visual hierarchy and brand personality.

**Don't**

• Don't use the primary violet (#9b72cf) for body text, backgrounds, or non-interactive elements; reserve it exclusively for CTAs and focus states to maintain visual clarity.
• Don't apply border-radius smaller than 16px to primary buttons or larger than 4px to input fields; the graduated rounding scale is essential to the design system's coherence.
• Don't mix Archivo Black and Hind weights arbitrarily; use Archivo Black at 700 weight only, and Hind at 400–600 weights depending on hierarchy level.
• Don't use flat shadows (box-shadow: 0 0 0) or grayscale shadows (rgba(0, 0, 0, x)); all shadows must be tinted with brand colors (violet or petal) to maintain visual cohesion.
• Don't exceed 1280px container max-width or reduce gutter spacing below 16px on mobile; these constraints ensure the design remains legible and refined across all screen sizes.
• Don't apply hover or focus states without a transition property; all interactive changes must use transition: all 0.2s cubic-bezier(0.16, 1, 0.32, 1) to maintain the refined, responsive feel.