Sokosumi

Overview

Sokosumi is a professional marketplace for AI coworkers and agents designed for marketing teams. The brand embodies 'Minimalist Professionalism'—a design philosophy that strips away visual noise to create clarity and trust, while maintaining warmth through human-centered imagery and approachable language. The interface treats AI as a collaborative team member, not a tool, which is reflected in the calm, confident aesthetic: a light neutral canvas (rgb(245, 245, 245)) anchored by a sophisticated teal accent (rgb(43, 92, 120)) used sparingly on interactive elements and dark navy (rgb(15, 28, 37)) for primary actions. The emotional response is one of competence and accessibility—users feel they are hiring capable colleagues, not wrestling with technology.

The brand voice is precise, conversational, and human-first. Sokosumi avoids jargon and breathless marketing language, instead speaking in the cadence of a trusted advisor. Vocabulary patterns favor active verbs ('hire', 'brief', 'get back') and concrete outcomes ('finished files', 'reports', 'dashboards'). The tone is calm and matter-of-fact, never overselling. Example sentence in brand voice: 'Brief your coworker in plain language. They handle the rest, and you get finished files back.'

Colors

The color system is built on a light, neutral foundation with strategic accent deployment. The primary surface is a warm off-white (rgb(245, 245, 245)) that serves as the page background and reduces eye strain during extended use. Card surfaces are pure white (rgb(255, 255, 255)) to create subtle depth without visual heaviness. The primary accent color is a sophisticated teal (rgb(43, 92, 120), #2b5c78), used exclusively on interactive elements like focus states, hover effects, and secondary CTAs—it signals interactivity without dominating the interface. The secondary action color is a deep navy (rgb(15, 28, 37), #0f1c25), reserved for primary CTAs ('Sign Up', 'Accept all') where maximum contrast and authority are required. A tertiary accent—vivid purple (rgb(100, 0, 255), #6400ff)—appears

Typography

The type system centers on Inter, a humanist sans-serif that conveys both professionalism and approachability. The hierarchy is built on weight and size rather than multiple typefaces: display and headline levels use 300 (light) weight at sizes from 34px to 82px with tight negative letter-spacing (-0.025em) to create visual impact and elegance; body text uses 400 (regular) weight at 15–16.5px with generous line-height (24–26px) for readability; labels and UI text use 500 (medium) weight at 12–14px for clarity in dense layouts. The rationale is that light weights at large sizes feel sophisticated and editorial, while medium weights at small sizes ensure UI labels remain scannable. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (12px) when they appear over photographic backg

Layout

The page layout uses a fixed 12-column grid with a max-width container of 1240px (set via .container-app), centered with symmetric padding that scales fluidly from 24px on mobile to 56px on desktop (using clamp(24px, 4vw, 56px)). The spacing scale is semantic: lg (40px) separates major sections, md (24px) is used for card padding and section margins, sm (12px) for component internal spacing, and xs (4px) for micro-adjustments. The hero section uses full-bleed background imagery with a cinematic gradient overlay, while content sections below are contained and left-aligned. Section rhythm is established through consistent padding (clamp(36px, 5vw, 56px) top and bottom) and 1px divider borders (rgba(15, 14, 13, 0.12)) between sections. The page-head block (h1, subheading, metadata) is constra

Elevation & Depth

Depth in this system is achieved through subtle layering rather than dramatic shadows. The elevation scale uses three levels: sm (0 1px 2px rgba(15, 14, 13, 0.06)) for minor UI elements like chips and small cards; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals; lg (0 12px 40px rgba(15, 14, 13, 0.14)) for hero-level elements and floating panels. Shadows are always soft and diffuse, never sharp or high-contrast. The hero section uses a full-bleed background with a multi-tone gradient (linear-gradient(180deg, #0a0a0a 0%, #0f1c25 22%, #2c4452 52%, #7d8f9b 78%, #d9dee2 94%, #eceef

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, signaling approachability without sacrificing professionalism. The rounded scale progresses from sharp (sm: 4px) for small UI elements like chips and select dropdowns, to moderate (DEFAULT: 6px) for buttons and inputs, to generous (lg: 8px–12px) for cards and larger containers, to fully rounded (full: 999px) for avatars and badges. Buttons use 6px (DEFAULT) radius to feel modern and clickable without appearing playful. Cards use 12px (lg) to create a softer, more inviting container. Inputs use 6px (DEFAULT) to

Components

Action Elements Buttons follow a three-tier hierarchy: primary (dark navy, rgb(15, 28, 37)) for high-emphasis actions like 'Sign Up'; secondary (transparent with border) for medium-emphasis actions like 'Talk to Sales'; and ghost (transparent, no border) for low-emphasis actions. Primary buttons are 40px tall with 0 22px padding, 6px border-radius, and 14px font-weight-500 text. On hover, the background darkens to rgb(10, 17, 23) with a 0.25s cubic-bezier(0.16, 1, 0.3, 1) transition. On active, buttons translate down 1px (transform: translateY(1px)) for tactile feedback. Large buttons (44px height) are available for hero CTAs. All buttons use letter-spacing: 0 and white-space: nowrap to prevent wrapping.

Containers & Surfaces Cards are the primary container for grouped content. St

Do's and Don'ts

**Do**

• Do use the teal primary (rgb(43, 92, 120)) sparingly on interactive elements—focus states, hover effects, and secondary CTAs—to guide attention without overwhelming the interface.
• Do maintain generous white space (minimum 28px between major sections) to create a calm, professional atmosphere that reflects the brand's 'trusted colleague' positioning.
• Do use Inter light weight (300) at display/headline scales (34px+) with negative letter-spacing (-0.025em) to create elegant, editorial typography that differentiates Sokosumi from generic SaaS.
• Do apply the full-bleed gradient background only to hero sections; never repeat it on cards, modals, or secondary surfaces.
• Do use the 6px border-radius consistently across buttons, inputs, and small cards to maintain the 'Soft-Technical' aesthetic without appearing playful or casual.

**Don't**

• Don't use the purple tertiary accent (rgb(100, 0, 255)) on the marketing site; reserve it for the app UI and status indicators only.
• Don't apply shadows heavier than lg (0 12px 40px rgba(15, 14, 13, 0.14)) to any element—the system relies on subtle layering and borders, not dramatic depth.
• Don't mix multiple typefaces; Inter is the only font family for body, display, and labels. Monospace (ui-monospace, SFMono-Regular, Menlo) is reserved for code blocks only.
• Don't use opacity-based text below 60% (rgba(15, 14, 13, 0.6)) for body copy; it fails WCAG AA contrast ratios (4.5:1 minimum). Reserve lower opacity for secondary labels and metadata only.
• Don't add rounded corners larger than 12px (lg) to cards or containers; anything beyond that feels overly casual and undermines the professional positioning.