Get started

Minimum viable design system for startups: what to standardize first

A minimum viable design system is the smallest owned set of reusable design decisions that solves a current, recurring product problem and can be checked in named consumers. Its size depends on your product, contributors, and cost of drift. No universal token count, component count, or team stage defines it.

Updated September 11, 2026

Start with the product slice, not a library checklist

A startup can usually identify more design-system work than it can responsibly maintain. Colors, typography, spacing, grids, components, motion, content patterns, accessibility guidance, documentation, tooling, and governance can all become shared infrastructure. That doesn't make all of them current requirements.

First, define the part of the product where a recurring problem is visible. This product slice should be small enough to inspect but broad enough to reveal whether a decision is genuinely shared. Record the critical user flow, representative surfaces, recurring elements, supported modes and environments, current contributors, and any surface that must remain unchanged.

  • User flow: Name the task a person is trying to complete, such as creating a project and inviting a collaborator.
  • Representative surfaces: Select screens that expose different uses of the decision, such as a landing page, settings form, and dashboard table.
  • Recurring elements: Note the roles or patterns that already appear in more than one relevant place.
  • Modes and environments: Record only what the product currently supports, such as light and dark modes or web and mobile.
  • Contributors and consumers: Name the designer, developer, coding agent, web builder, repository, application, or component that will read or implement the decision.
  • Protected surfaces: Name places that shouldn't change during the first controlled check, such as destructive actions or an unrelated marketing page.

A product slice is an evidence boundary

A check across one dashboard flow can support a decision about that flow. It doesn't automatically establish compatibility with a mobile application, another framework, or a future product.

Readiness is observable, not a universal threshold

There is no reliable rule that a pattern becomes system-worthy on its third appearance, when a startup hires its second designer, or at a particular funding stage. Those facts may prompt a review, but they don't decide the scope on their own.

Look for several signals together. People keep making the same decision, equivalent surfaces have drifted, or another person or agent now has to interpret the choice. A correction may need to reach several consumers. A new mode or delivery platform may also make local values harder to reconcile. As the decision reaches further and becomes costlier to correct, the case for shared ownership gets stronger.

Ask what would improve if the decision became shared. If you can't name the affected consumer, expected observation, and correction owner, you don't yet have an admission case. Creating a token file or component without those answers adds another artifact to maintain but leaves control of the decision unresolved.

Use an admission register before adding anything

The admission register is the gate between a local choice and the minimum viable system. Complete one row for each proposed token group, typography rule, spacing rule, layout pattern, component contract, document, or export. A blank field is useful evidence because it shows what still needs to be decided before adoption.

Recurring problem:
Repetition evidence:
Affected flows or surfaces:
Named consumers:
Decision authority:
Deliverable:
Correction owner:
Expected observation:
Disposition: adopt | defer
Copyable admission-register row

Here is a completed hypothetical row. It demonstrates the decision method, not a result observed in a particular startup.

Recurring problem: Muted explanatory text uses unrelated gray values.
Repetition evidence: The settings form, empty state, and dashboard table each implement the same role independently.
Affected flows or surfaces: Account setup and dashboard review.
Named consumers: Settings form, EmptyState component, dashboard table, frontend developer, coding agent.
Decision authority: Product designer approves the semantic role and intended emphasis.
Deliverable: A muted-foreground semantic role plus its project mapping and usage note.
Correction owner: Frontend lead owns mapping and removes conflicting local values.
Expected observation: Named explanatory-text consumers resolve through the approved role; the destructive-action text and marketing site remain unchanged.
Disposition: Adopt.
Hypothetical admission decision

In a small startup, one person may hold both the authority and correction-owner roles. The responsibilities are still different. One person approves what the design decision means; the other fixes the layer that fails to carry it into the product.

Inspect a real kit as a source of candidates

Once you have an admission row, compare its required deliverable with a published kit. Select only the artifacts justified by that row, then map and verify them in your own product.

Keep a deferral log with promotion triggers

Deferring an item doesn't mean rejecting it forever. It means the current evidence doesn't justify shared ownership. Record why the item stays local, who watches it, which observable event should reopen the decision, and what evidence promotion would require.

Deferred item:
Why it remains local:
Current location:
Owner:
Reconsideration trigger:
Evidence required for promotion:
Status: deferred
Copyable deferral-log entry
Why local nowReconsideration triggerEvidence neededOwner
Dashboard card componentOnly one supported card structure existsA second flow needs the same structure or the first card begins to forkNamed consumers, shared behavior, states, and protected surfacesFrontend lead
Dark-mode token valuesDark mode is not currently supportedDark mode enters an approved product scopeMode requirements, representative surfaces, contrast inspection, and mapping ownerProduct designer
Mobile spacing scaleThe current product slice is web onlyA supported mobile application or viewport-specific system becomes a current deliverableRepeated spacing roles, target environments, exceptions, and consumer observationsDesign owner
Component documentation siteOne team works directly in the repository and existing guidance answers current questionsMore contributors cannot identify supported states or usage rules from current artifactsRepeated handoff failures, named readers, required documentation surfaces, and maintainerEngineering owner
Examples of evidence-triggered deferrals

Avoid triggers such as "when we have time" or "when the company grows." You can't inspect them. A new supported mode, another consuming product, repeated local divergence, or recurring correction work can be observed and tied to evidence.

Separate decisions, artifacts, contracts, and exceptions

A small system is easier to understand when each layer has a distinct job. Approved design decisions define intent, such as what muted text means. Portable artifacts carry selected values and rules through tokens, CSS, a Tailwind export, or DESIGN.md. Component contracts define recurring structure and supported states, while product mappings connect upstream roles to the implementation. Local exceptions record deliberate divergence in a named place.

What it ownsExampleEvidence to inspectTypical owner
Approved decisionSemantic intent and permitted useMuted text has lower emphasis than primary body textCurrent decision record and usage ruleProduct or design authority
Portable artifactTransferable representation of selected decisionsDTCG tokens, CSS variables, Tailwind mapping, or DESIGN.mdSource version and generated filesKit or design-system owner
Component contractReusable structure, variants, and statesWhich button variants and states are supportedComponent implementation and representative statesComponent owner
Project mappingHow a source role reaches local consumersUpstream muted-foreground maps to the project's runtime variableConfiguration, built artifact, and consuming codeFrontend owner
Local exceptionA bounded, approved departureA data visualization uses a separate contrast treatmentException record, reason, scope, and ownerSurface owner
Give each layer a clear responsibility

DESIGN.md can preserve intent, layout guidance, motifs, and constraints for a human or coding agent. Token exports can carry values in machine-readable forms. Neither proves that a consumer selected the correct role, preserved an exception, or rendered the intended result. Each downstream step needs its own evidence.

Ambient Sage as a bounded source-to-consumer example

Ambient Sage is a public Identity Forge kit with semantic colors, a typography system that uses Plus Jakarta Sans for body and heading roles and JetBrains Mono for technical strings, spacing and layout guidance, DESIGN.md, and implementation exports. Its published visual direction pairs warm sage surfaces with a vivid yellow accent. These source artifacts are available, but they don't prove that the kit fits an uninspected startup product.

Token specimen · real values

Ambient Sage

Live render

Ambient Sage's actual tokens — the same values its exports use.

Color tokensSemantic roles with HEX / HSL / CMYK

Color tokens

Ambient Sage
light · HEX · HSL · CMYK

Core

#F3F4EF

background

H 72 · C0, 0, 2, 4

#1A1C17

foreground

H 84 · C7, 0, 18, 89

#E5E6E0

card

H 70 · C0, 0, 3, 10

#ECEEE8

muted

H 80 · C1, 0, 3, 7

#D8D9D2

border

H 68.57 · C0, 0, 3, 15

Brand

#FEE951

primary

H 52.72 · C0, 8, 68, 0

#1A1C17

primary-fg

H 84 · C7, 0, 18, 89

#E5E6E0

secondary

H 70 · C0, 0, 3, 10

#F7E464

accent

H 52.24 · C0, 8, 60, 3

#FEE951

ring

H 52.72 · C0, 8, 68, 0

Semantic

#C0392B

destructive

H 5.64 · C0, 70, 78, 25

#FFFFFF

destructive-fg

H 0 · C0, 0, 0, 0

#2D7238

success

H 129.57 · C61, 0, 51, 55

#C97D12

warning

H 35.08 · C0, 38, 91, 21

#545651

muted-fg

H 84 · C2, 0, 6, 66

Charts

#FEE951

chart-1

H 52.72 · C0, 8, 68, 0

#4A8FD4

chart-2

H 210 · C65, 33, 0, 17

#6BBF8A

chart-3

H 142.14 · C44, 0, 28, 25

#E07498

chart-4

H 340 · C0, 48, 32, 12

#E8A24B

chart-5

H 33.25 · C0, 30, 68, 9

Type scaleHeading, body, and mono in the kit's fonts

Typography

Ambient Sage

Scale: compact-product

Density: balanced

Heading · Plus Jakarta Sans · 1.875rem

Ship beautiful product faster

Subheading · Plus Jakarta Sans · 1.375rem

A warm-sage neutral-surface mobile kit with a single vivid yellow accent, flat tonal cards, and oversized display numerals.

Body · Plus Jakarta Sans · 1rem

Ambient Sage uses a near-white warm-sage canvas (#f3f4ef) with card panels distinguished only by a tonal shift to #e5e6e0, never by shadows or borders. A single vivid yellow (#fee951) is the only saturated color and appears sparingly at component scale as orbs, button fills, and focus rings. Primary data values render as oversized bold hero numerals with a small superscript unit. Typography is a friendly rounded geometric (Plus Jakarta Sans) with no uppercase and no tight tracking, while JetBrains Mono is reserved for hex codes and technical strings. Generous rounding and luminance-only contrast give the whole system a calm, minimal feel.

Mono · JetBrains Mono · 0.8125rem

npx shadcn add ambientsage.json

Aa

Plus Jakarta Sans · Heading

400500600700

Aa

Plus Jakarta Sans · Body

400500600700

ABCDEFGHIJKLM NOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 & @ # % →

Radius & spacingCorner radius, elevation, and spacing steps

Tokens

Ambient Sage primitives
density: balanced

Radius scale

sm · 0.375rem
md · 0.75rem
lg · 1.25rem
xl · 1.75rem

Component radius

button
card
input

Elevation

level 1
level 2
level 3
level 4

Spacing · base 4px

1x
2x
3x
4x
6x
8x
Inspect the available Ambient Sage color, typography, and spacing decisions before selecting any of them for a product.

Suppose a startup's admission register finds inconsistent semantic colors and typography across a web dashboard, while its card structures and delivery stack are still changing. The team could classify the kit candidates this way:

DispositionNamed consumerOwnerRequired check
Semantic light and dark color tokensAdopt selected rolesDashboard shell, forms, table, developer, coding agentProduct designer approves intent; frontend lead owns mappingVerify role meaning, supported modes, generated artifact, and representative UI
Typography roles and available weightsMapHeadings, body copy, labels, technical stringsDesign owner selects roles; frontend lead maps files and aliasesConfirm required families and weights are available and inspect supported content
Spacing scaleMap selected recurring valuesPage shell, form groups, table cellsFrontend leadConfirm repeated spacing roles before replacing local values
Layout guidanceAdopt only rules matching the current dashboard sliceDashboard shell and representative statesProduct designerCompare each selected rule with current flow and responsive requirements
DESIGN.mdAdopt as upstream guidance with project-specific additionsDevelopers, coding agents, and web buildersDesign-system owner maintains source; repository owner maintains local additionsCheck that selected rules, exceptions, authority, and non-goals are explicit
ExportsChoose and map only the format used by the projectBuild pipeline and runtime themeFrontend leadRecord format and source version, inspect generated output, then inspect consumers
Component contractsDeferFuture shared componentsComponent owner not yet assignedReconsider when a recurring structure has named variants, states, consumers, and ownership
Hypothetical Ambient Sage intake decisions

Adopt means the upstream decision is approved for the stated scope. Map means the source decision still needs an explicit project representation and owner. Defer means the artifact or layer is available but hasn't earned shared status. Don't upgrade any of those labels to compatible or accepted until the recorded observations exist.

Do not confuse intake with validation

A kit preview shows the source system. A valid export shows that an artifact was produced. A rendered screen shows one consumer under one set of conditions. Keep those observations separate. None proves whole-product quality or accessibility on its own.

Write the handoff as a source-to-consumer record

A developer, coding agent, or web builder needs enough context to preserve approved decisions and expose unresolved ones. The handoff should pin down the source, authority, selected artifacts, mapping ownership, consumers, exceptions, expectations, observations, and disposition.

Source URL: https://identityforge.io/kits/ambient-sage
Source version: Record the exported kit version or immutable identifier at intake. For this frozen example, the dossier observed the page on 2026-09-11; that date is not a kit release number.
Decision authority: Product designer approves selected semantic and typography roles.
Selected artifacts: Semantic color roles, typography roles, selected spacing values, applicable layout guidance, DESIGN.md, project-compatible export.
Project mapping owner: Frontend lead.
Named consumers: Dashboard shell, settings form, table, shared controls, developer, coding agent.
Permitted exceptions: List exact surface, reason, approver, and owner; none are implied.
Expected behavior: Selected roles reach named consumers in supported modes; protected surfaces remain unchanged.
Observed behavior: Pending until artifact and representative-UI inspection is recorded.
Disposition: Pending evidence.
Hypothetical minimum-system handoff

The source version matters because a later export may contain different values or guidance. Record an immutable version if the source provides one. Otherwise, record the retrieval date and retain the exact reviewed artifact according to your project's normal source-control policy. Don't invent a release number.

Named consumers should be specific enough to inspect. "The app" is too broad for a first check; "settings form muted text in light mode" is inspectable. The handoff can expand once the team has evidence that another consumer belongs in the shared scope.

Run one controlled acceptance check

A controlled change tests the recorded chain from one approved decision to selected consumers. It doesn't certify the whole design system. Choose a semantic decision whose intended reach and protected surfaces you can predict before making the change.

  1. 1

    Freeze the check

    Before editing anything, record the source version, selected semantic role, supported mode, representative consumers, protected surfaces, test content, current exceptions, and owner.

    Decision under check: muted-foreground
    Representative consumers: settings help text; dashboard table metadata
    Protected surfaces: destructive action label; primary body copy; marketing page
    Test content: short label; two-line explanation; long table metadata string
    Expected result: named consumers change through the shared role; protected surfaces do not
    Initial disposition: pending
  2. 2

    Change one approved decision

    Change the selected semantic role at its authoritative source. Regenerate or update only the recorded downstream artifacts through the project's established mapping path.

    Change: muted-foreground source value A -> candidate value B
    Authority: product designer
    Mapping owner: frontend lead
    In-scope mode: light
    Out of scope: dark mode, component structure, copy changes
  3. 3

    Inspect artifacts before the UI

    Confirm that the intended export or generated file contains the changed role and that unrelated roles haven't changed. A missing value, renamed identifier, unexpectedly broad diff, or stale output is an artifact-level failure.

    Inspect: source record; selected export; project mapping; built output
    Pass: intended role and value are traceable at each recorded layer
    Fail: role is missing, renamed without approval, stale, duplicated, or accompanied by unexplained changes
  4. 4

    Inspect representative consumers and protected surfaces

    Render the recorded mode and content. Check whether each named consumer uses the changed role, whether local overrides mask it, and whether protected surfaces remain stable. Record what you see instead of changing the expectation after the fact.

    Settings help text: expected changed; observed ______
    Dashboard metadata: expected changed; observed ______
    Destructive label: expected unchanged; observed ______
    Primary body: expected unchanged; observed ______
    Marketing page: expected unchanged; observed ______
  5. 5

    Choose a bounded disposition

    Accept only the tested change when expectations and observations match. Revise when the decision is sound but a mapping, artifact, consumer, or exception needs correction. Block when authority is unclear, the change reaches protected surfaces, evidence is missing, or the intended consumers can't be traced.

    Disposition: accept | revise | block
    Evidence attached:
    Mismatch owner:
    Required correction:
    Retest scope:
    What this result does not prove:
Expected observationInspection criterionFailure conditionResult
Settings help textUses the updated muted-foreground roleInspect mapped value and rendered short and two-line contentLiteral or local value masks the role, or emphasis no longer matches the approved intentRecord accept, revise, or block
Dashboard table metadataUses the same updated roleInspect the mapped role with the long metadata fixtureConsumer remains stale, truncation hides the review target, or another role changes unexpectedlyRecord accept, revise, or block
Destructive action labelRemains unchangedCompare built artifact and rendered control before and afterProtected role or control changesBlock
Primary body copyRemains unchangedInspect representative body textBody role aliases to the changed value without approvalBlock or revise the mapping
Marketing pageRemains unchanged because it is outside this product sliceInspect its relevant artifact and representative render if it shares the pipelineThe change crosses the recorded scope without an approved mappingBlock
Acceptance matrix for the hypothetical semantic-color check

A passing result supports one claim: under the recorded source version, mode, content, and consumers, this semantic decision propagated as expected, and the inspected protected surfaces remained stable. It doesn't prove that every token is correct, every component follows the system, users prefer the change, or the product meets an accessibility standard.

Expand only when the evidence changes

After accepting the first decision, return to the admission and deferral records. Promote another item only after its trigger occurs and the required evidence becomes available. That might mean adding a component contract once a structure has repeated variants and states, introducing dark-mode mappings when dark mode becomes supported, or expanding documentation when new contributors repeatedly encounter the same ambiguity.

Maintenance is part of the minimum. Every admitted decision needs an authority, every mapping needs a correction owner, and every exception needs a bounded scope. If nobody owns an artifact after adoption, apparent reuse can conceal stale or conflicting decisions.

Choose one recurring product problem today and complete a single admission-register row. If you can't fill in the authority, correction owner, expected observation, and disposition, keep the decision local and record the evidence that would make you reconsider it.

Sources

  • Minimum Viable Design System: Supports starting with current design and development problems, adding only useful system work, and validating additions continuously through real use.
  • A lean approach to design systems: Describes a lean startup design system as a small set of standards, components, guidance, documentation, and version control, rather than an enterprise-scale program.
  • When Does a Startup Need a Design System? The Honest Answer: Provides startup-stage context and identifies repetition and additional contributors as signals for considering shared design-system work.
  • Ambient Sage Design Kit: Documents the public Ambient Sage kit, including its visual direction, semantic colors, typography choices, spacing and layout guidance, and implementation-oriented contents.
  • Identity Forge: Documents Identity Forge design-kit delivery, including semantic tokens, typography, spacing, layout guidance, DESIGN.md, and implementation exports for agents and builders.
  • How to generate a DESIGN.md (and what it is): Explains that DESIGN.md carries design intent, usage rules, component treatments, motifs, and explicit constraints while remaining distinct from executable token artifacts.