← StyleSeed home

StyleSeed v4 · evidence, not templates

See how the method changes with the job.

These are working outputs, not a component gallery. Each one exposes the user job, output grammar, surface adapter, and signature decision behind the visual result.

15
live builds
8/8
grammars represented
5/5
surfaces represented
7 × 5
skin / motion

New v4 working artifact · Focus OS

Three directions.
One reversible scene.

Compare native, signature, and experimental structures; inspect their semantic palettes and media jobs; then run the actual task-card-to-focus-controller transition.

Open Studio workbench
9:41Focus OS

Monday · Priority field

Protect one meaningful hour.

Priority session

Shape the launch narrative

Live proof library

Browse by design grammar, not visual skin.

Each build names the user job, functional grammar, surface adapter, and signature decision that shaped it. Skins only coordinate the final aesthetic layer.

Showing 15 of 15 builds
Signal / 01
7
Protect a small beginning.
Sequential storyExported artifact

Signal Reset

social-carousel

Understand why attention fragments and leave with one small reset worth trying today.

Signature: The red thread crosses all five exported frames while hook, evidence, action, reframe, and CTA each get a distinct composition.
skin:linearmotion:snap
Field Notes04 / 2026
Research brief
The quiet infrastructure of trust.
Editorial readingRendered preview

Field Notes 04

document-report

Grasp the finding quickly, inspect supporting evidence, and retain the argument across pages.

Signature: A red evidence rail connects the abstract, annotated chart, and field observation without turning the report into a dashboard.
skin:notionmotion:silk
After Dark
25
12.07
Seoul
Expressive marketingRendered preview

After Dark / 25

single-frame

Recognize the event in one glance, remember its attitude, and find date and venue immediately.

Signature: The oversized diagonal 25 is both image and information; acid green is reserved for the event signal.
skin:linearmotion:snap
Orbit / mechanism
One orbit around every decision.
Expressive marketingRendered preview

Orbit Launch Deck

slide-deck

Understand the product thesis, see the mechanism, and decide whether to continue the conversation.

Signature: A luminous orbit diagram acts as the recurring proof device instead of decorative feature cards.
skin:vercelmotion:float
AI Chat designed with the consumer-service grammarConsumer service

AI Chat

product-ui

Ask, inspect, and act on an AI response without losing conversational context.

Signature: The answer dominates; controls and system chrome recede until needed.
skin:raycastmotion:snap
Finance Dashboard designed with the operations-console grammarOperations console

Finance Dashboard

product-ui

Scan business health, detect a change, and drill into recent activity.

Signature: Dense KPIs lead into one decision chart and an auditable activity list.
skin:tossmotion:spring
Fitness Tracker designed with the consumer-service grammarConsumer service

Fitness Tracker

product-ui

Understand today's progress and start the next healthy action quickly.

Signature: One personal state dominates; history and goals support it without dashboard chrome.
skin:raycastmotion:pulse
Food Delivery designed with the commerce-conversion grammarCommerce conversion

Food Delivery

product-ui

Choose food with confidence and move from browsing to an order.

Signature: Imagery carries appetite while one persistent cart action carries conversion.
skin:arcmotion:spring
Issue Tracker designed with the technical-instrument grammarTechnical instrument

Issue Tracker

product-ui

Triage, assign, and move technical work with minimal interaction cost.

Signature: Status, ownership, and identifiers stay visible at power-user density.
skin:linearmotion:snap
Marketing Landing designed with the expressive-marketing grammarExpressive marketing

Marketing Landing

product-ui

Understand the promise, trust the proof, and take one next step.

Signature: A memorable first fold leads into concrete product proof instead of feature-card filler.
skin:vercelmotion:snap
Music Player designed with the consumer-service grammarConsumer service

Music Player

product-ui

Recognize what is playing and control playback without interrupting listening.

Signature: Media identity supplies the color; transport controls remain immediate and stable.
skin:notionmotion:silk
Notes Editor designed with the editorial-reading grammarEditorial reading

Notes Editor

product-ui

Read and shape long-form thinking while keeping navigation close but quiet.

Signature: Typography and measure lead; panels support the document instead of boxing every block.
skin:notionmotion:silk
Pricing designed with the commerce-conversion grammarCommerce conversion

Pricing

product-ui

Compare plans, understand the tradeoff, and choose without hidden ambiguity.

Signature: Plan differences and total commitment lead; one recommended path stays identifiable.
skin:stripemotion:silk
Settings designed with the institutional-service grammarInstitutional service

Settings

product-ui

Change consequential account preferences safely and understand what each action affects.

Signature: Plain-language grouping, explicit state, and restrained confirmation reduce mistakes.
skin:arcmotion:spring
Mobile Wallet designed with the consumer-service grammarConsumer service

Mobile Wallet

product-ui

Know the available balance and complete a trusted money action quickly.

Signature: Personal financial state leads; transfer actions and recent activity remain calm and legible.
skin:tossmotion:spring

New morphology layer

A grammar no longer implies one visual shape.

Nine brand recipes now change containment, geometry, controls, collections, density, and motion independently from the token skin. Compare the same module across every recipe before choosing one for your lock.

Compare recipes

Honest coverage

Five surface contracts. Every one is now visible.

The social-carousel example now includes five native 1080×1440 exports. The remaining non-web surfaces stay clearly labeled as concept previews until their own export harnesses and production files ship.

Read the adapter architecture

Product UI

Interactive

11 inspectable web and mobile product builds.

Social carousel

Exported

Five production-size PNG frames and an inspectable export manifest ship with the example.

Slide deck

Concept preview

A composed concept is inspectable now; native export validation remains explicit.

Document / report

Concept preview

A composed concept is inspectable now; native export validation remains explicit.

Single frame

Concept preview

A composed concept is inspectable now; native export validation remains explicit.

Your reference is not here?

Compile it into a rule set.

$ss-reference analyzes screenshots, URLs, Figma exports, or existing UI into an evidence-backed project grammar—without cloning the source screen.

See how it compiles