Sokosumi

Overview

Sokosumi is a marketplace where marketing teams hire AI coworkers—named specialist agents that work as integrated team members. The design system embodies **Minimalist Clarity**: a light, restrained aesthetic that prioritizes content and interaction over decoration. The visual language is deliberately understated, using a neutral palette (off-white #f5f5f5, deep ink #0f0e0d) with a single teal accent (#2b5c78) reserved for secondary actions and interactive states. The brand personality is professional yet approachable, speaking to marketing leaders with precision and calm. The UI evokes a sense of order and efficiency—like a well-organized workspace where the focus is entirely on the work itself, not the interface.

The tone is direct, practical, and human-centered. Sokosumi avoids breathless marketing language; instead, it uses concrete, action-oriented vocabulary. Example: "Brief a coworker in plain language and get finished files back" rather than "Unlock AI-powered marketing synergies." The voice is that of a trusted colleague—knowledgeable, efficient, and never condescending. Every interaction should feel like a natural extension of how marketing teams already work together.

Colors

The color system is built on a light, neutral foundation with strategic accent usage. **Surface Stack**: The page background is #f5f5f5 (surface), with white #ffffff reserved for cards and elevated containers (surface-container). The muted layer #ebeaea (surface-variant) provides subtle separation for disabled or secondary states. **Primary Accent (#2b5c78)**: A sophisticated teal used exclusively for secondary CTAs ("Sign Up"), focus states, and brand moments. It is never used for primary actions—those use the deep ink #0f0e0d. The primary-soft variant rgba(43, 92, 120, 0.08) creates a low-contrast highlight for hover states on light backgrounds. **Text Hierarchy**: On-surface text is #0f0e0d (ink) at full opacity for primary content. Muted text uses rgba(15, 14, 13, 0.6) for secondary in

Typography

The type system uses a single typeface—Inter—across all scales, with weight and size carrying the hierarchy rather than font switching. **Display (81.92px, weight 300)** is reserved for hero headlines and sets the brand's refined, spacious aesthetic through its light weight and generous line-height (88px). **Headline-lg (54px, weight 300)** and **Headline-md (34px, weight 300)** maintain this lightness for section titles, with tight letter-spacing (-0.025em to -0.02em) to preserve elegance at large sizes. **Body text (15px–16.5px, weight 400)** uses a line-height of 24–26px to ensure readability on light backgrounds; the 15px base is slightly larger than typical to account for the light weight of Inter 300/400. **Labels and buttons (12–14px, weight 500)** use medium weight to signal intera

Layout

The layout uses a fluid 12-column grid with a max-width of 1240px (container-app). The page rhythm is built on a **semantic spacing scale**: lg (40px) separates major sections, md (24px) separates content blocks within sections, and sm (12px) separates inline elements. The hero section uses full-bleed photography with a cinematic aspect ratio, overlaid with a semi-transparent gradient (linear-gradient(180deg, #0a0a0a 0%, #0f1c25 22%, #2c4452 52%, #7d8f9b 78%, #d9dee2 94%, #eceef0 100%)) to ensure text legibility. Section padding is responsive: clamp(36px, 5vw, 56px) vertically and clamp(24px, 4vw, 56px) horizontally, ensuring the layout breathes on mobile while maintaining density on desktop. Cards and containers use consistent padding of 24px (md spacing). The page-head (hero headline are

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color darkening. **Level 1 (Base)**: The page background (#f5f5f5) is flat with no shadow. **Level 2 (Cards & Containers)**: Standard cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border at rgba(15, 14, 13, 0.12), creating a soft separation from the background. **Level 3 (Modals & Elevated Surfaces)**: Modals and overlays use box-shadow: 0 12px 40px rgba(15, 14, 13, 0.14), a larger spread that signals prominence. All shadows use a warm black (rgba with 15, 14, 13 rather than pure 0, 0, 0) to match the brand's

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are present but restrained, signaling approachability without sacrificing professionalism. **Buttons & Inputs** use 6px (DEFAULT), a gentle curve that feels modern without being playful. **Cards & Containers** use 8px (md) or 12px (lg) depending on prominence—standard cards use md, elevated modals use lg. **Avatars & Badges** use 999px (full) for perfect circles, creating a human-centered visual that contrasts with the rectilinear grid. **Chips & Small UI** use 4px (sm) to maintain visual hierarchy—smaller, tighter curves for secondar

Components

Action Elements **Buttons** come in three variants: primary (dark navy #0f1c25 background, white text, 40px height, 6px radius), secondary (transparent with 1px border at rgba(15, 14, 13, 0.12), dark text), and ghost (transparent, no border, muted text). All buttons use label-md typography (14px, weight 500) and padding 0 22px. Hover states transition background-color and border-color over 250ms (cubic-bezier(0.16, 1, 0.3, 1)). Active state applies transform: translateY(1px) for tactile feedback. Size variants: lg (44px height, 14.5px font) for primary CTAs, sm (34px height, 13px font) for secondary actions.

Containers & Surfaces **Cards** use a white background (#ffffff) with a 1px border at rgba(15, 14, 13, 0.12) and 24px padding. The shadow is 0 3px 8px rgba(0, 0, 0, 0.15). On

Do's and Don'ts

**Do**

• Do use the teal accent (#2b5c78) sparingly—only for secondary CTAs, focus states, and brand moments; primary actions always use dark ink (#0f1c25).
• Do maintain the light-weight typography (Inter 300 for headlines, 400 for body) to preserve the refined, spacious aesthetic; never substitute heavier weights without design review.
• Do apply consistent 24px (md spacing) between major content blocks and 40px (lg spacing) between sections to maintain the breathing room that defines the brand.
• Do use the full-circle avatar (999px radius) for all people-related UI to reinforce the human-centered, coworker metaphor.
• Do layer shadows (3px for cards, 12px for modals) to create clear visual hierarchy; never use color darkening alone to signal depth.

**Don't**

• Don't use the primary accent (#2b5c78) for primary CTAs or dominant interactive elements; reserve it for secondary actions and focus states only.
• Don't apply rounded corners smaller than 4px (sm) or larger than 12px (lg) to standard UI elements; the 6px default (DEFAULT) is the brand's inflection point.
• Don't mix typefaces or introduce new weights (e.g., Inter 600, 700) without updating the token system; Inter 300, 400, and 500 are the only approved weights.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; always use the brand's ink (#0f0e0d) and surface (#f5f5f5) to maintain warmth.
• Don't apply shadows larger than 0 12px 40px rgba(15, 14, 13, 0.14) or use multiple stacked shadows; the system uses exactly three elevation levels for clarity.