Content earns attention
Visual weight follows the user’s task. Navigation and decoration step back once orientation is complete.
KIN DESIGN SYSTEM / 3.0.0 DEVELOPMENT
Clear interfaces for work that needs attention.
KIN is an open design system for websites and applications where people read, compare, decide, or act. It provides shared rules for structure, themes, interaction, accessibility, data, and AI-assisted work.
Principles before components
KIN keeps decisions consistent without forcing every product into one layout or visual template.
Structure is felt
Alignment, spacing, surface levels, and restrained hairlines explain relationships without building a card wall.
Data has context
Important values carry a definition, unit, time range, source, and an honest unknown or stale state.
People stay in control
High-impact actions show scope and consequence. Suggestions, rules, facts, and executed automation remain distinct.
Dense, not crowded
Professional interfaces remove repeated explanation and ornament before reducing readability or touch targets.
Foundations
The live values below respond to this page’s theme and contrast controls.
Surface ladder
Hierarchy without heavy shadow
CanvasApplication base
Surface 1Primary content
Surface 2Inset region
Surface 3Menu and overlay
Surface 4Highest surface
Semantic color
Color communicates meaning, not decoration
Action
Monitor
Positive
Warning
Negative
Offline
Typography
Compact application scale with readable body text
DisplayQuiet intelligence32 / 38 · 600
Page titleCurrent work and context20 / 26 · 600
BodyInterfaces should be clear before they are decorated.14 / 22 · 400
MetadataSource checked 12 July 202612 / 17 · 400
Spacing
4px base grid
48121620243248
Icon library
Lucide · named imports · 1.5px stroke
Search
Data
Reading
Commerce
Canvas
AI
Monitor
Export
Component behavior
Open runnable references for authentication, controls, motion, feedback, overlays, and specialist workflows. States are part of the contract.
Shown in the workspace header.
Enter a complete URL including https://
ObjectStatusSourceUpdated
Reference contractCurrentRepository2 min ago
External evidenceReview3 sourcesYesterday
Archived decisionStaleUnavailable12 Jun
Contract3.0.0 dev
Theme modes4
Product patterns4
Last reviewed16 Jul 2026
Action feedbackSonner loads only when an action needs temporary feedback.
Patterns follow the task
KIN does not make every product a three-column dashboard. Each pattern preserves the information and controls its task requires.
Intelligence workspace
Saved views, entity identity, chronology, evidence, properties, and reversible review decisions.
Atlas Record
Current state, recent changes, and verified sources remain visible together.
ObservedStatus
82 / 100Evidence
3 sourcesCoverage
09:42Source restoredMonitor
YesterdayRecord revisedReviewer
Properties
RiskWatch
Evidence82 / 100
Updated2 min ago
Information site
Reading order, provenance, search, stable URLs, correction history, and content that remains useful without decoration.
Topics
Current record
Related records
Archive
Current record
Related records
Archive
A record with visible sources
Readers can identify the subject, currency, origin, and next navigation step before promotional content competes for attention.
The article remains readable when images, motion, or generated summaries are unavailable.
Ecommerce operations
Products, money, inventory, channels, approvals, and automation stay distinct so operators can act safely.
18Active
4Review
2Blocked
Studio lampUSD 8412 available
Desk trayUSD 32Review
Wall shelfUSD 120Low stock
Selected product
ChannelWeb
ApprovalPending
Inventory12
Engineering canvas
Tools, structure, geometry, units, constraints, revisions, and generated changes support precision without competing with the canvas.
S
L
M
Layers
Frame
Panel
Fasteners
Properties
Width 640 mm
Height 420 mm
Unit mm
Generated change
Awaiting review
Width 640 mm
Height 420 mm
Unit mm
Generated change
Awaiting review
AI behavior is a product contract
AI is useful when its source, uncertainty, scope, and effect stay visible. It is not a visual theme.
Conclusion
State the recommendation or result without presenting inference as confirmed fact.
Evidence
Link the records, rules, inputs, and sources that support the result.
Uncertainty
Expose missing, conflicting, stale, or model-estimated information.
Action
Offer a previewable next step with scope, confirmation, audit history, and rollback where possible.
Give coding tools a design contract
Pin an exact KIN version, keep a local contract copy, and record the project’s own decisions instead of relying on a vague style prompt.
Read DESIGN.md, DELIVERY.md, and principles/visual-signature.md completely before changing UI.
Treat it as a normative product design contract. Start from the real user task,
entity model, data states, and existing components. Preserve themes, mobile,
keyboard, accessibility, real APIs, and human control. If kin.config.json exists,
read its implementation brief and route/profile map. Report the KIN composition
checkpoint before coding; do not implement a draft or unresolved workflow.Use the source of truth
Normative documentation and generated files are versioned together and checked in CI.
DESIGN.mdCurrent development principles, Tokens, behavior, accessibility, and delivery contract.Read
Delivery modelContract-first core, Figma/runtime boundaries, future package gates, and adoption evidence stages.Read
Implementation briefProject-level route profiles, composition decisions, representative workflow, states, evidence, and readiness gate.Read
DTCG TokensMachine-readable theme, typography, spacing, radius, and component primitives.Download
Tailwind TokensGenerated CSS variables and Tailwind-compatible theme values.Download
Figma VariablesCreate-only payload with light, dark, and high-contrast modes.Download
State referenceInputs, data rows, feedback, dialog, focus, and Command Menu behavior.Open
Core component referenceRunnable actions, forms, navigation, data, feedback, progress, and overlay contracts.Open
Motion LabFrequency and input paths, Tooltip sequences, interruptible surfaces, Sonner, gesture settling, slow review, and responsive Drawer behavior.Open
Runtime Integration LabOperate the private pre-release adapters and inspect their upstream/KIN ownership boundary.Open
AI and professional-workflow referenceDeterministic Composer, evidence, review, scope, media, durable task, and accessible chart states.Open
Verification evidenceBoundaries for automated checks, screenshots, browser smoke, zoom, RTL, Forced Colors, touch, and screen-reader review.Read
Micro-interactionsPaired states, committed results, progress, disclosures, and reduced-motion behavior.Read
Component terminologyCanonical names and practical distinctions between related interface patterns.Read
Component catalogMaturity, coverage, known gaps, and the shared Definition of Complete.Read
Latest stable v2.3.0Versioned release notes and immutable source tag.View
Cross-product page flows
Stable access, setup, settings, recovery, search, and support references sit beside a candidate scheduling workspace. Each reference names its URL state, failure paths, focus behavior, maturity, and product-owned backend boundary.