Kosa Artist Residency

Overview

Kosa Artist Residency is a Tokyo-based creative hub that celebrates collaborative artistic practice through a distinctly playful, hand-drawn visual language. The design system embodies 'Playful Maximalism'—a deliberate rejection of minimalist restraint in favor of vibrant color blocking, whimsical illustration, and intentional visual chaos that mirrors the creative energy of the residency itself. The aesthetic draws from Japanese graphic design traditions, children's book illustration, and contemporary street art, creating an interface that feels approachable, energetic, and unapologetically joyful. Users encounter a space that prioritizes human connection and creative expression over corporate polish, evoking a sense of artistic possibility and community.

The brand voice is warm, conversational, and slightly irreverent—never corporate, never sterile. Kosa speaks to artists as peers, using language that is direct and encouraging. The vocabulary favors action verbs (create, explore, shape, make) and avoids jargon. Example sentence in brand voice: 'Kosa is where designers, writers, photographers, filmmakers, musicians, and makers come together to create, explore, and be shaped by the city.' The personality is optimistic without being saccharine, confident without being arrogant, and always grounded in the real work of making art.

Colors

The color palette is built on three primary accent colors layered over a clean white surface (rgb(255, 255, 255)) with dark text (rgb(0, 0, 0)). Primary (#ff94d2, a vivid hot pink) is the signature brand accent used on CTAs, active navigation states, and key interactive elements—it commands attention and signals creative energy. Secondary (#ffd966, a warm butter yellow) provides a complementary highlight for supporting actions and decorative elements, evoking playfulness and optimism. Tertiary (#4dd0e1, a bright cyan-teal) serves as a third accent for status indicators, badges, and secondary highlights, adding visual rhythm without overwhelming the composition. Error states use #cc3b3b, a muted red-brown that reads as serious without jarring against the playful palette. The surface stack u

Typography

The type system pairs two custom Squarespace fonts to create a distinctive visual voice. GT Standard (gt-standard-trial-6sp7f5, fontWeight 400) is used for all display and headline levels (display 72px, headline-lg 48px, headline-md 32px), delivering a geometric, contemporary feel with tight letter-spacing (-0.02em to -0.01em) that creates visual impact and readability at large sizes. Orbit (orbit-gr53kz, fontWeight 400) handles all body and interface text (body-lg 18px, body-md 16px, label-md 14px), providing a warm, slightly rounded humanist sans-serif that feels approachable and friendly. For small labels and UI text, Helvetica Neue (fontWeight 500) is used at 12–14px with increased letter-spacing (0.02em–0.03em) to ensure legibility at small sizes and reinforce hierarchy. Line-height i

Layout

The page layout uses a 12-column grid with a max-width of 1280px, allowing flexible composition while maintaining visual coherence across viewport sizes. The design favors a 'breathing room' philosophy: sections are separated by lg spacing (40px) vertically, and content blocks use md spacing (24px) for internal padding. The hero section spans full-width with generous vertical padding (64px top/bottom) to establish presence and allow illustration and photography to dominate. Navigation and header elements use sm spacing (12px) for compact, scannable layouts. The gutter width is 24px, creating clear visual separation between grid columns without excessive whitespace. Container padding follows the pattern: 24px on tablet (768px+), 16px on mobile (< 768px). Illustrations and decorative element

Elevation & Depth

Depth is achieved through subtle shadow layering and strategic use of borders rather than dramatic drop-shadows. Level 1 (Base): flat white surface (rgb(255, 255, 255)) with no shadow, establishing the clean foundation. Level 2 (Cards & Containers): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border in surface-variant (#e9ecef), creating gentle separation from the background. Level 3 (Modals & Elevated Elements): box-shadow 0 8px 24px rgba(0, 0, 0, 0.12) with the same border treatment, signaling modal priority. Hover states on interactive elements transition to Level 3 shadows over 200

Shapes

The shape language is 'Graphic Sharpness'—a deliberate embrace of hard edges and minimal rounding that reflects the geometric, hand-drawn aesthetic. Buttons and inputs use minimal rounding (border-radius 4px / {rounded.DEFAULT}), creating a slightly softened rectangle that feels contemporary without appearing overly friendly. Cards and containers use the same 4px radius, maintaining visual consistency and a grid-like, modular appearance. Navigation elements and badges use full rounding (border-radius 9999px / {rounded.full}) only when circular or pill-shaped, creating clear visual distinction

Components

Action Elements Buttons are the primary call-to-action mechanism and use the full saturation of primary (#ff94d2) or secondary (#ffd966) colors. Primary buttons (button-primary) have backgroundColor {colors.primary}, textColor {colors.on-primary}, padding 8px 16px, height 40px, and border-radius 4px. On hover, transition to button-primary-hover with backgroundColor {colors.primary-container} (#ffc0e0) over 150ms (ease-out). Secondary buttons use the same structure with {colors.secondary} and transition to {colors.secondary-container} on hover. Ghost buttons (button-ghost) have transparent background, 1px solid border in {colors.outline}, and transition to {colors.surface-container} on hover. All buttons use label-md typography (14px, fontWeight 500, letterSpacing 0.02em) and should nev

Do's and Don'ts

**Do**

• Do use the full saturation of primary (#ff94d2) and secondary (#ffd966) colors on CTAs and interactive elements—never desaturate or reduce opacity, as this dilutes the playful energy.
• Do pair hand-drawn illustrations and photography with geometric UI components (sharp corners, minimal rounding) to create visual tension and interest.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to allow the eye to rest and prevent visual overwhelm despite the colorful palette.
• Do use GT Standard for headlines and Orbit for body text consistently—never mix typefaces within a single component or section.
• Do apply subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers to create depth without obscuring the clean, bright aesthetic.
• Do use announcement bars (bright yellow background, no rounding) sparingly for time-sensitive or high-priority information only.

**Don't**

• Don't reduce the opacity or saturation of primary and secondary accent colors—they should always feel vibrant and energetic, never muted or corporate.
• Don't use rounded corners > 4px on buttons, inputs, or cards, as this contradicts the graphic, geometric aesthetic and makes the interface feel soft or overly friendly.
• Don't layer multiple shadows or use blur values > 24px, which would create visual heaviness and conflict with the clean, bright design.
• Don't mix custom fonts with system fonts (sans-serif, Arial, Helvetica) except for small labels where Helvetica Neue is specified—consistency in typography is essential to brand recognition.
• Don't use more than three accent colors (primary, secondary, tertiary) in a single view—visual hierarchy requires restraint despite the playful palette.
• Don't apply text-shadow or text-stroke effects to body text or labels unless they are placed over busy illustrations, where a subtle shadow (0 2px 4px rgba(0, 0, 0, 0.15)) is permitted for legibility only.