Sokosumi

Overview

Sokosumi is a marketplace platform that transforms how marketing teams work by introducing AI coworkers as collaborative agents. The brand embodies a philosophy of "Efficient Minimalism"—a design aesthetic that prioritizes clarity, speed, and purposeful interaction over decorative flourish. The UI conveys professionalism and trustworthiness through a light, neutral canvas (#fafaf9 background, #0f0e0d text) punctuated by a vibrant violet accent (#6400ff) that signals action, capability, and the cutting-edge nature of AI-powered work. The emotional response is one of calm competence: users feel they are working with a sophisticated, reliable system that handles complexity without overwhelming them.

The brand voice is direct, practical, and human-centered. Sokosumi speaks to marketing professionals as peers, not novices. Vocabulary favors concrete nouns ("coworkers," "files," "brief") over abstract marketing jargon. The tone is confident but never breathless; sentences are short and active. Example: "Brief one coworker. Get finished files back." The design system reinforces this voice through generous whitespace (lg spacing: 40px for section separation), restrained typography (Inter at weights 300–500 only), and interaction patterns that feel responsive without being flashy.

Colors

The color system operates on a principle of "Neutral Dominance with Accent Authority." The primary surface palette—#fafaf9 (background), #ffffff (cards), #f2f1f0 (muted containers)—creates a calm, paper-like environment that keeps cognitive load low. Text hierarchy is achieved through opacity and weight rather than color: #0f0e0d (on-surface, 100% opacity) for primary content, rgba(15, 14, 13, 0.6) (on-surface-variant, 60% opacity) for secondary text, and rgba(15, 14, 13, 0.12) (outline-variant) for borders and dividers.

The primary accent, #6400ff (violet), is reserved exclusively for interactive elements that demand user attention: primary CTAs ("Sign Up"), focus states on inputs, active navigation items, and status indicators. This color has a luminance of 0.10 on light surfaces, makin

Typography

The type system is built on Inter (weights 300, 400, 500 only) and follows a "Light-Forward" philosophy that prioritizes readability and visual breathing room. Display-level headings use 300-weight at 81.92px with -0.025em letter-spacing, creating an airy, confident presence without heaviness. Headline-lg (54px, 300-weight) and headline-md (34px, 300-weight) maintain this lightness for section headers. Body text sits at 15px (400-weight) with 24px line-height (1.6x multiplier), ensuring comfortable reading on screens and print. Labels and buttons use 500-weight at 14px to signal interactivity without visual aggression. The system avoids font-weight 600 and above entirely, reinforcing the brand's minimalist aesthetic. When applying text over complex backgrounds (e.g., hero imagery), apply t

Layout

The layout system uses a 12-column grid with a fixed max-width of 1240px and responsive padding via clamp(24px, 4vw, 56px), ensuring the design scales fluidly from mobile (24px gutters) to desktop (56px gutters). Section spacing follows a semantic rhythm: lg spacing (40px) separates major content blocks, md spacing (24px) groups related elements, and sm spacing (12px) creates micro-relationships within components. The page head (hero section) uses clamp(36px, 5vw, 64px) for top padding and clamp(28px, 4vw, 44px) for bottom padding, creating a responsive breathing room that adapts to viewport height. Container max-widths vary by context—1240px for full-width sections, 940px for content-heavy pages, 860px for narrow reading experiences—allowing designers to create visual hierarchy through co

Elevation & Depth

Depth in Sokosumi is achieved through a restrained shadow system and subtle color shifts rather than dramatic layering. The elevation scale uses three levels: sm (0 1px 2px rgba(15, 14, 13, 0.06)) for subtle dividers and hairline separations, md (0 3px 8px rgba(0, 0, 0, 0.15)) for interactive elements like dropdowns and modals, and lg (0 12px 40px rgba(15, 14, 13, 0.14)) for prominent cards and cookie banners. Shadows use a 15° light angle (typical for UI) and avoid blur radii above 40px to prevent the "floating" feeling that contradicts the brand's grounded, professional tone. Surface hierarc

Shapes

The shape system follows a philosophy of "Functional Softness"—rounded corners are used to humanize interfaces without sacrificing clarity or precision. The rounded scale progresses from sm (4px) for small, dense UI elements like chips and select dropdowns, to DEFAULT (6px) for buttons and input fields, to lg (12px) for cards and larger containers, to full (999px) for avatars and badges. Buttons use 6px (DEFAULT) to signal they are clickable without appearing overly rounded; this radius is applied consistently across all button variants (primary, secondary, outline, ghost) to create a unified

Components

Action Elements Buttons are the primary interactive affordance and come in four variants: primary (solid #6400ff background, white text), secondary (solid #0f0e0d background, white text), outline (transparent background, #0f0e0d border), and ghost (transparent background, no border). All buttons use 44px height (lg) or 40px height (default), padding 0 22px or 0 18px, and 6px border-radius. Primary and secondary buttons use a 0.25s transition on background-color with cubic-bezier(0.16, 1, 0.3, 1) easing, creating a snappy, responsive feel. On :active, buttons translate 1px down (transform: translateY(1px)) to provide tactile feedback. Hover states shift background colors: primary-hover becomes #5200e0 (darker violet), secondary-hover becomes #2b2926 (darker gray). The outline variant's

Do's and Don'ts

**Do**

• Do use the primary violet (#6400ff) exclusively for CTAs, focus states, and status indicators—never for backgrounds or large surface areas.
• Do maintain the 40px lg spacing between major sections; it is the visual rhythm that defines the brand's breathing room.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) only when text sits over complex imagery; on solid backgrounds, rely on color contrast instead.
• Do use Inter 300-weight for all headlines; it reinforces the light, confident brand voice and differentiates from heavier competitors.
• Do transition interactive states (hover, focus) over 0.25s with cubic-bezier(0.16, 1, 0.3, 1) easing to create a snappy, responsive feel.
• Do use 1px borders at rgba(15, 14, 13, 0.12) to define card and input edges; they are subtle enough to feel modern without disappearing.

**Don't**

• Don't use font-weight 600 or above; the system uses 300, 400, 500 only to maintain the minimalist aesthetic.
• Don't apply shadows larger than 40px blur radius; they contradict the grounded, professional tone and make elements feel untethered.
• Don't introduce new accent colors beyond the violet (#6400ff); secondary and tertiary colors are supporting grays, not brand accents.
• Don't use border-radius above 12px on cards or containers; it softens the interface too much and conflicts with the functional minimalism.
• Don't apply multiple shadows to a single element; use the elevation scale (sm, md, lg) and stick to one shadow per layer.
• Don't reduce padding below 12px (sm spacing) on interactive elements; it makes them feel cramped and reduces touch target size on mobile.