Studio 614

Overview

Studio 614 is a vibrant, family-friendly painting studio in Columbus, Ohio, specializing in guided group art experiences for kids' birthday parties, fundraisers, summer camps, and youth organizations. The design system embraces a "Playful Clarity" aesthetic—clean, light surfaces paired with bold accent colors that evoke the joy and creative energy of painting. The UI celebrates the studio's core mission: making art accessible, fun, and memorable for young artists. Voice: warm, encouraging, and straightforward. The brand speaks to both kids and parents with equal respect—never condescending, always action-oriented. Example sentence: "Pick your painting, grab a brush, and let's create something amazing."

Colors

The color palette is anchored in a light, optimistic foundation with strategic accent colors that drive engagement. Primary (#428bca, a confident medium blue) is used for all call-to-action buttons, links, and interactive focus states—it signals trust and approachability. Secondary (#3858e9, a deeper saturated blue) supports secondary actions and highlights, adding visual rhythm without competing for attention. Tertiary (#cc1818, a bold red) is reserved for error states, alerts, and high-priority messaging. The surface stack (white #ffffff down to light gray #cccccc) provides clean breathing room, with on-surface text at #333333 for strong readability at 16px and above. Form inputs use a 1px border at rgba(0, 0, 0, 0.25) with a white background (#ffffff), and on focus receive a 3px glow of

Typography

The type system is built on Roboto Condensed, a geometric sans-serif that balances playfulness with professionalism—ideal for a brand that speaks to both children and parents. Display (56px, 700 weight) and Headline-lg (40px, 700 weight) are reserved for hero sections and major page titles, using tight line-height (64px and 48px respectively) to create visual impact. Body-lg (22px, 300 weight) is the workhorse for hero copy and prominent descriptions, delivering warmth through its light weight while maintaining legibility. Body-md (16px, 400 weight) handles form labels, input text, and secondary content. Label-md (14px, 600 weight) is applied to button text and small UI labels, with 0.02em letter-spacing to add subtle sophistication. On small labels over busy backgrounds or in dense layout

Layout

The layout follows a 12-column grid with a max-width of 1170px, centering content on desktop and reflow to full-width on mobile. White-space is generous: section separation uses lg spacing (40px) vertically, with md spacing (24px) for component-level padding. The hero section spans full-width with a semi-transparent overlay (rgba(0, 0, 0, 0.2)) over a vibrant background image, creating visual hierarchy without heavy shadows. Container padding uses gutter spacing (24px) on desktop, reducing to sm spacing (12px) on tablets. The grid accommodates both image-heavy layouts (painting galleries) and text-driven sections (party packages) with equal visual weight, ensuring no single content type dominates the rhythm.

Elevation & Depth

Depth is conveyed through subtle, layered shadows rather than dramatic drop-shadows. Level 1 (Base): flat white surface (#ffffff) with no shadow, establishing the foundation. Level 2 (Cards & Containers): 0 3px 8px rgba(0, 0, 0, 0.15) creates gentle separation from the background, appropriate for package cards and form containers. Level 3 (Modals & Overlays): 0 8px 24px rgba(0, 0, 0, 0.2) lifts interactive elements like modals or expanded menus. On hover, cards transition from Level 2 to Level 3 over 200ms, signaling interactivity. The hero section uses no shadow but relies on a semi-transpare

Shapes

The shape language is "Soft-Technical"—subtle rounding that feels friendly without being whimsical. Buttons use 3px border-radius (DEFAULT), providing just enough softness to feel approachable while maintaining a professional edge. Cards and containers use 4px (md) for slightly more breathing room, reinforcing their role as content containers. Input fields match buttons at 3px for visual consistency across interactive elements. Full-width elements like the hero section have no rounding, anchoring the design to a clean, structured foundation. Badges and pills use full (9999px) rounding to signa

Components

Action Elements Buttons are the primary driver of engagement. Button-primary uses #428bca background with white text (16px, 400 weight), 12px 24px padding, and 44px height for comfortable touch targets. On hover, the background darkens to #3a7ab0 with a 200ms ease-in-out transition, providing clear feedback. Button-secondary uses a transparent background with a 2px solid #428bca border and matching text color, allowing secondary actions to coexist without visual competition. Both variants use 3px border-radius and are never smaller than 44px tall to ensure mobile accessibility.

Containers & Surfaces Cards use a light gray background (#f5f5f5) with 4px rounding and 24px padding, paired with a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)). On hover, the background shifts to #eeeeee an

Do's and Don'ts

**Do**

• Do use #428bca (primary blue) for all CTAs, links, and focus states—it's the visual anchor that guides users through the experience.
• Do maintain at least 24px vertical spacing (lg) between major sections to create breathing room and visual hierarchy.
• Do apply 200ms ease-in-out transitions to all interactive elements (buttons, cards, inputs) to signal state changes smoothly.
• Do keep button heights at 44px minimum for mobile touch targets, even on desktop—accessibility first.
• Do use Roboto Condensed 700 weight for headlines and 300 weight for body copy to balance playfulness with professionalism.

**Don't**

• Don't use colors outside the defined palette—stick to primary (#428bca), secondary (#3858e9), and tertiary (#cc1818) for consistency.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.2)—the brand is light and approachable, not heavy or imposing.
• Don't reduce button padding below 12px horizontal or height below 44px; accessibility and touch-friendliness are non-negotiable.
• Don't mix typefaces—Roboto Condensed is the only font family used across the system; system fonts or serif alternatives break the brand.
• Don't use opacity below 0.7 for text or interactive elements; maintain WCAG AA contrast ratios (4.5:1 for body text, 3:1 for large text).