Ink
#151715Primary text, deep panels, structural lines
Soko Studio
Styleguide for a studio desk with visible production marks.
A living design system for briefs, production queues, asset review, and publishing surfaces. It favors scan-friendly layouts, measured edges, and one studio-native signature: registration strips that mark state and sequence.
01 / Color
Palette
Studio paper
#F4F4EFPage background and quiet work surfaces
Clean surface
#FFFEFAPanels, cards, elevated controls
Cutting mat
#0D6B57Primary action, approved state, active markers
Review amber
#D68A24Review, queue, attention without alarm
Blueprint
#2C5687Planning, references, informational surfaces
Reshoot red
#BF3F35Errors, blockers, destructive states
Border grey
#CFCEC1Default borders and separators
02 / Pairing
Text and background mixes
Primary work surface
Brief metadata, production notes, reusable panel copy.
Inverse control
Action bars, focused selection, high-emphasis navigation.
Green signal
Ready, approved, live, or active production state.
Amber review
Needs review, waiting on assets, pending sign-off.
Blueprint note
Planning context, references, route notes, specs.
Reshoot warning
Blocked uploads, rejected assets, missing requirements.
03 / Type
Typography
Selected direction
Production Desk
Keep the typography precise and operational: Space Grotesk for display and headings, Geist for readable UI/body copy, and Geist Mono for IDs, status labels, and production metadata.
Display
Space Grotesk, semibold, tight line height
Studio work has a visible grain.
Section heading
Clear section breaks and major surface names
Production foundations
Body
Geist, regular, generous line height
Use direct language that names the work: briefs, assets, queues, reviews, and publishing.
Utility
Geist Mono for IDs, labels, and status metadata
SHOT-042 / APPROVED
04 / Edges
Borders, radius, and spacing
Border rules
Default border: 1px, neutral grey
Strong border: 2px, ink
State strip: 8px, semantic color
None
0
Tight
2px
Control
6px
Panel
8px
05 / Components
Component library seeds
Brief card
Artisan launch kit
Product photos, founder notes, social captions, and publishing checklist for the next market release.
12 assets
3 channels
Amina
Controls
Asset queue
Review table pattern
Hero stillRetouchReview amberToday
Founder portraitApprovedCutting matReady
Packaging cropBlockedReshoot redMissing SKU
06 / Media
Image and video components
Image asset card
Contact-sheet still
STL-041
4:5
Amina
Video asset card
Poster frame with edit state
VID-018
Video cards need duration, format, poster frame, and current edit state visible before playback.
Media review frame
Large preview with annotations
12
Shot list tile
Hands at workbench
Horizontal process shot for storefront hero and email crop.
16:9natural lightno hands cropped
Before / after comparison
Before
After
Media queue rows
Compact scanning pattern
STL-041Hero still4:5ReviewAmber
VID-018Process reel9:16CutdownBlueprint
STL-052Detail crop1:1ReadyGreen
Empty media state
Show accepted formats and the next action. Empty states should create momentum, not mood.
JPG, PNG, WEBP, MP4, MOV
Rejected media state
Name the exact fix: missing release, wrong crop, low resolution, failed upload, or rejected review.
07 / Inventory
Named components to build next
Brief card
Use for a single piece of studio work with state and owner.
Asset row
Use in queues where scanning, comparison, and status matter.
Review chip
Use for state labels with one clear operational meaning.
Media asset card
Use for image and video thumbnails with format, owner, and state.
Review frame
Use for focused approval, annotation, and compare workflows.
08 / Behavior
Interaction notes
Semantic color
Green means ready or active, amber means review, blue means planning, red means blocked.
Sentence case
Controls use direct verbs. Labels name the thing people manage, not the system layer.
Motion restraint
Use motion for state changes and queue progress. Respect reduced motion and avoid ambient decoration.