Build your first design system in Figma.

A shade name is different from a purpose.

green/600 identifies a shade. color-background-action-primary explains why that shade is used. In this guide, Base is the raw value, Alias is the primitive name, and Mapped is a semantic or component-specific purpose.

In Figma, alias also means one variable referencing another. The teaching label Alias is not a separate variable type.

• Base · #345F49
• Alias · green/600
• Mapped semantic · color-background-action-primary
• Mapped component · color-background-button-primary-default

Create the Theme collection.

Create Light first. Set each Color variable as an alias to a primitive instead of copying its hex value.

• page: neutral/50 → neutral/950
• surface: neutral/0 → neutral/900
• text primary: neutral/900 → neutral/50
• text secondary: neutral/700 → neutral/200
• control border: neutral/500 → green/300
• divider: neutral/200 → neutral/500
• icon primary: neutral/900 → neutral/50
• action primary: green/600 → green/300
• action hover: green/700 → green/100
• action pressed: green/800 → neutral/0
• text on action: neutral/0 → neutral/950
• disabled background: neutral/200 → neutral/700
• disabled text: neutral/700 → neutral/200
• text link: green/600 → green/300
• focus border: green/600 → green/300
• error: red/700 → red/300

Dark is mapped, not inverted.

Add red/300 = #FDA29B to Primitives, bringing the palette to 14 colors for a specific need. If your plan supports modes, add Dark and apply it to a parent frame so children inherit it.

If modes are unavailable, keep Dark as documented intent and label manual comparison frames honestly.

Protect useful component decisions.

Create a Component collection with one mode. These aliases resolve through Theme.

• button primary default → action primary
• button primary hover → action hover
• button primary pressed → action pressed
• button primary disabled → disabled background
• button text default → text on action
• button text disabled → disabled text

Use the category-type-item-sub-item-state pattern only when the extra layer protects a real decision.

Trace the button back to its source.

The button default background points to action primary, which resolves to green/600 (#345F49) in Light and green/300 (#9CC8AC) in Dark. Background, text, icon, border, and focus remain separate connections.

Track alpha, paint opacity, and layer opacity independently. Omitted values mean 100%; two 50% settings compound.

One type, two jobs.

A string is a sequence of characters. Daymark uses strings to name font choices and to store reusable interface content.

Save the font ingredients.

Create these String variables in Primitives. Confirm each face exists in your Figma environment; a string does not install a font.

• font/family/sans · Inter
• font/style/regular · Regular
• font/style/medium · Medium
• font/style/semibold · Semi Bold

Create the Content collection.

Bind one text layer to action/save-task, change it temporarily to Create task, verify the update, and restore it.

• action/add-task · Add task
• action/save-task · Save task
• action/cancel · Cancel
• action/retry · Retry
• message/empty-title · No tasks yet.
• message/empty-body · Add a task to start planning your day.
• message/title-required · Enter a task title.
• message/load-error · Tasks could not load.
• message/loading · Loading tasks…

Do not turn product data into library phrases.

A person's task title is product data. A reusable button exposes an editable label; a screen may bind that label to a suitable content string.

Use sentence case and result-oriented labels. Add aliases only when several names intentionally share a maintained source.

A value is not a role.

The number 16 might mean padding, font size, or icon size. Preserve decimals and negative values when a system needs them; do not round another system into this exercise.

Create the numeric primitives.

Create Number variables and document their units.

• space: 0, 4, 8, 12, 14, 16, 24, 32, 48px
• radius: 0, 4, 8, 12px
• stroke: 1, 2px
• icon: 20px · control minimum: 48px
• form maximum: 480px · content maximum: 1120px
• font sizes: 12, 14, 16, 24, 28, 32px
• line heights: 16, 20, 24, 32, 36, 40px
• weights: 400, 500, 600
• letter and paragraph spacing: 0px
• opacity/full: 100% in this Figma exercise

Map numbers when the role matters.

Add Component aliases for button padding, gap, radius, and minimum height.

• horizontal padding → space/16
• vertical padding → space/14
• content gap → space/8
• container radius → radius/8
• minimum height → size/control-min

Spacing and resizing answer different questions.

Padding sits inside an edge; gap sits between children. Task rows use 16px padding, a 12px control-to-text gap, a 4px text-stack gap, and 8px between rows.

Fixed preserves a dimension, Hug follows content, Fill uses parent space, Minimum prevents shrinking, and Maximum prevents excessive growth. Long field errors make the field taller, not clipped.

Change one bound gap.

Bind a two-line auto-layout gap to space/8, change it to 12, verify, and restore 8. Unsupported bindings should remain documented direct values—not invented connections.

A font is an ingredient; typography is the treatment.

Typography selects, sizes, spaces, and arranges text for readability and hierarchy. Save each reusable treatment as a named text style.

Build the Daymark type hierarchy.

All styles use Inter, 0px letter spacing, 0px paragraph spacing, left alignment, and normal casing unless a use explicitly changes alignment.

• Heading / Page · Semi Bold 600 · 32/40
• Heading / Section · Semi Bold 600 · 24/32
• Body / Medium · Regular 400 · 16/24
• Body / Small · Regular 400 · 14/20
• Label / Medium · Medium 500 · 14/20
• Caption · Regular 400 · 12/16

Text color is a separate semantic binding. The same Body style can work on different surfaces.

Preserve what the source actually says.

Explicit values win. Preserve Auto line height when a source uses it. Unknown or failed capture data is not a default and must not be replaced with invented values.

Test hierarchy with realistic content.

Use Today, Your tasks, Review homepage draft, and Due today, then try a longer title. Text must wrap without collision. Change Body / Medium temporarily to prove the style connection, then restore it.

Give icons a consistent home.

Create original 20×20 Plus and Check components. Use 2px rounded strokes bound to color-icon-primary. Plus means Add; Check means Selected or complete. Preserve the square frame and keep a text label when meaning may be unclear.

• Plus lines: approximately (4,10)–(16,10) and (10,4)–(10,16)
• Check path: approximately (4,10), (8,14), (16,6)
• Inspect at 100% zoom; record source and license if adopting an external family

Define surfaces by their job.

Use the page-background role for the page and surface role for inputs, rows, and forms. Control borders and decorative dividers stay distinct.

Controls use radius/8, task rows radius/12, and checkboxes radius/4.

Effects are optional, not a checklist.

Core Daymark screens intentionally use no shadows, blur, noise, texture, or glass. For practice only, save Effect / Overlay practice.

• Drop shadow · x 0 · y 8 · blur 24 · spread 0
• neutral/950 at 16% shadow alpha
• Test on two samples and preserve effect order when multiple effects exist

Theme, width, and platform are separate contexts.

Responsive behavior rearranges or resizes appropriately as space changes. Daymark is responsive web; a narrow web frame is not automatically a native mobile specification.

Use three authored width ranges.

Content max remains 1120px, form max 480px, and control minimum 48px in every context.

• Compact · below 768px · 16px padding · heading 24/32
• Medium · 768–1199px · 24px padding · heading 28/36
• Wide · 1200px+ · 32px padding · heading 32/40

If modes or bindings are unavailable, create explicit styles and document manual selection honestly.

Keep content; change relationships.

Wide and Medium headers put title and Add task in a row; Compact stacks them with 16px between. Fields fill their form. Rows and messages grow with content. Compact form actions stack; wider actions sit side by side. Do not hide important actions or errors to make a screen fit.

Resize a content-driven frame.

Create a 390px frame with vertical auto layout and 16px padding. Put a Fill-width child inside, add two wrapping text layers with an 8px gap, and resize the outer frame.

Start with a purposeful source.

A component is the reusable source; an instance is a linked use; anatomy names meaningful parts. This button contains a container, optional leading icon, and required label.

Build the source with connected values.

Apply Label / Medium, on-action text, auto layout, Hug sizing, 48px minimum height, centered children, 16px horizontal and 14px vertical padding, 8px gap, radius/8, and the default button background. Remove unintended strokes and effects.

Content drives height. The 48px minimum must never clip a taller label.

Add the approved nested icon.

Place a 20×20 Plus instance before Label, bind its strokes to the on-action color, and hide it initially. Hidden content must not leave an empty gap.

Expose a small, useful API.

Create the component and expose Label (Text, Add task), Show leading icon (Boolean, false), and Leading icon (Instance swap, Plus). Edit the main component and connect each property to the intended layer.

Create Default, Hover, Pressed, and Disabled.

Combine four components as variants with a State property. Match layer names and properties, keep Default top-left, and bind each background to its state-specific component token. Disabled uses disabled text and does not activate.

Document keyboard focus separately.

Use a 2px color-border-focus ring with a 2px gap, following the button outline without changing layout. A static Figma illustration is not proof of keyboard accessibility.

Configure without detaching.

On Examples, change the label, toggle the icon, inspect all states, and try a long label. Let text wrap and height grow. Prototype pointer transitions only when useful; keep Disabled unconnected and document keyboard behavior separately.

Different purposes deserve different components.

Do not disguise fields, checkboxes, status, or navigation as variations of the button simply because the button was built first.

Enter one short text value.

Build Label, Input surface with Value, and Message in vertical auto layout. Use 12px input padding, 48px minimum height, radius/8, surface background, control border, and wrapping text. Expose Label, Value, Message, and Show message.

• Default · surface + control border + secondary message
• Error · error border and message; preserve label and value
• Disabled · disabled background and value
• Focus rings the input surface, not the whole group; error and focus may coexist

In code, connect the visible label and error programmatically. The Figma drawing does not supply semantics.

Separate the visible box from its interaction area.

Center a 20px Box inside a 48×48 control. Create Unchecked, Checked, Disabled unchecked, and Disabled checked. Build Labeled from the control plus wrapping Body / Medium text; expose Label and nested State.

Implementation must associate label and control, support Space, and keep disabled controls inert.

Communicate; do not activate.

Use Body / Small with secondary text and no container decoration. Create Open and Completed variants. The words carry the distinction; these are not buttons or filters.

Use a link to go somewhere.

Use Body / Medium, underline, and color-text-link. Expose Label. Cancel navigates to Today and sits in an interaction area at least 48px high. Keep underline visible across pointer states and document focus.

Purpose determines the component.

Primary button submits or performs the main action. Field accepts short text. Checkbox selects independently. Status label reports state. Text link navigates. Record a gap when none fits; do not force a similar-looking control into the wrong job.

A pattern solves a recurring need.

Task row helps someone identify a task, understand status, and mark it complete. Its usefulness comes from the relationship, not the attractiveness of its parts.

Preserve the nested relationships.

Combine Checkbox / Control with a Fill-width text stack containing Title, optional Due text, and Status label. Use 12px horizontal gap, 16px padding, top alignment, surface background, radius/12, and a 480px source preview.

• Expose Title, Due text, and Show due text
• Open = Unchecked + Open status
• Completed = Checked + Completed status
• Hidden due text closes its gap; long titles increase row height

Product logic must update checkbox and status from one task state. Matching drawings are not proof of synchronized behavior.

Compose the form as a documented pattern.

Use a Fill-width, Hug-height vertical frame with 24px gap and 480px maximum. Add Task title Field, Save task button, and Cancel link. Compact stacks actions; Medium and Wide place them in a row.

Do not make a rigid parent component until repeated use and controlled properties justify it.

Document what the arrangement must do.

Empty submission shows Enter a task title. Valid submission saves. Saving prevents duplicates and communicates progress. Failure preserves input and enables retry. Cancel returns to Today.

A Disabled button labeled Saving… is a static pending-action demonstration, not a complete runtime behavior.

Structure first; real content tests it.

Today contains a page header and task-list region. Add task contains a page heading and Task form.

Build the populated Today screen.

Create Today / Wide / Light at 1440×1024. Use page background, Wide context, 32px padding, centered 1120px-max content, a Today heading, 48px-high Add task link area, and three linked rows.

• Review homepage draft · Open
• Prepare the client presentation · Open
• Send project update · Completed, no due date

The frame height is a viewport, not a content maximum.

Build the form screen.

Use the same page structure with Add task heading and a left-aligned 480px-max Task form. Create empty, filled with Book the project review, and error versions.

Include what people actually encounter.

Add populated, empty, loading, and failed Today states plus error, saving, save-failure, and saved form states. Add message/save-error only when that new state needs it.

• Empty · No tasks yet. + empty-body message
• Loading · Loading tasks…; never a false empty state
• Failed · Tasks could not load. + Retry
• Save failure · preserve input + Task could not be saved. Try again.

Use the same content at 834 and 390px.

Apply Chapter 10 context values. Compact stacks header and form actions. Resize between examples and inspect wrapping before changing type or adding components.

Connect a truthful click-through.

Connect Add task, Cancel, and filled Save task. Optionally route empty submission to error. Label simulated behavior. A click-through is not a database, validation engine, or keyboard-accessible application.

A polished source page is not proof.

Record item, configuration, theme, width, test, expected result, observed result, and Pass, Fail, or Not tested status.

Test every important connection.

Restore temporary changes after each check.

• Color and numeric source changes
• Typography style changes
• Long and missing content
• Every documented state
• Light and Dark mappings
• Sample widths and breakpoint boundaries
• Instances for detachment and unexplained overrides

Check design evidence at the right stage.

Inspect readable pairs, visible labels, focus appearance, target dimensions, and errors that do not rely only on color. Normal text contrast is 4.5:1; qualifying large text is 3:1, with defined exceptions. Daymark's 48px target is an exercise choice; WCAG 2.2 AA target-size minimum is 24×24 CSS px with exceptions.

Runtime keyboard order, names, associations, announcements, zoom, reflow, and focus must still be tested in code.

Repair the responsible source, then retest.

If an error clips, inspect message resizing and wrapper height before editing individual instances. Shared fixes can also create shared regressions.

Document the decision around the component.

For each main component, record identity, purpose, use and avoid conditions, anatomy, configuration, values, behavior, adaptation, content, and evidence.

Be specific enough to act on.

Field is for one short text value such as a task title. Keep a visible label. Preserve input on error, show a specific wrapping message, and let the field grow. Do not use it as a date picker, rich-text editor, or file uploader.

This is more useful than saying Use fields thoughtfully.

Separate observation from approval.

Three green buttons do not prove other colors are prohibited. The Daymark recipes are authored decisions; your test results are separate evidence of whether you implemented them successfully.

A release is a reviewed set of changes.

Inspect names, bindings, states, examples, and documentation. Record Added, Changed, Tested, Known gaps, and Owner. Never claim a context passed unless you tested it.

Prove the distribution path you actually have.

When available, publish intended variables, styles, and components, enable the library in a consumer file, accept an update, and verify it. Otherwise test same-file instances and label the result a single-file learning library.

Do not break trust to move quickly.

Record the problem and consumers, check existing options, justify additions, test the source change, communicate migrations, and retain deprecated assets for an agreed transition.

Detachment, repeated overrides, and duplicates are feedback about system fit—not proof that users are careless.

Make Field / Error implementable.

Include source and version, anatomy and properties, type and measurements, resizing and bindings, supported themes, short and long errors, validation and keyboard expectations, responsive rules, and open questions with owners.

Share font and icon rights and inspect SVG exports for clipping or unexpected backgrounds.

Use automated specs as evidence, not intent.

Check current plugin instructions, run it on a documentation copy, compare generated output with hidden parts, nesting, and variants, then add usage, behavior, responsive, and accessibility guidance. Identify the source version and refresh when it changes.

Walk one implementation with a developer.

Verify minimum—not fixed—height, wrapping label and error, correct border token, accessible name and message association, non-color invalid state, visible focus, and breakpoint behavior. Record real code names only after they exist.

Give builders maintained context.

A useful design.md states what exists, what it is for, how it is configured, and where real reusable resources can be accessed. A component name without anatomy, states, properties, and measurements still leaves the builder guessing.

Description is not executable access.

Reconstruction creates a new implementation from a specification. Reuse imports or inserts an existing component through supported options. Markdown cannot become React, native code, or a Figma instance by itself.

If implementation access is missing, an assembly-only workflow must report the gap—not recreate and call it reuse.

Document authority, contracts, and evidence.

Include identity, assembly policy, exact foundations, alias relationships, modes and contexts, catalog IDs, component contracts, composition rules, implementation access, verification, unknowns, omissions, deprecations, and changes.

Keep three kinds of statement explicit.

Fact: Minimum height is 48px. Instruction: Use for the main action in a decision area. Limitation: No destructive-action variant is provided. Retain both references and resolved values; record direct values as direct.

Use the catalog only when it fits.

Understand the need, find approved resources, use only fitting parts, configure within documented options, preserve documented composition, flag missing capabilities, avoid forced alternatives, and continue independent supported work while gaps remain explicit.

Start with one self-contained component contract.

The manuscript's Primary button example documents identity and authority, assembly policy, catalog, missing implementation access, defaults, required primitives and mappings, Label / Medium typography, purpose, properties, anatomy, geometry, bindings, resolved Light and Dark states, focus, behavior, content, adaptation, unsupported cases, verification, gap reporting, and change history.

• Default: Light #345F49/#FFFFFF · Dark #9CC8AC/#121A14
• Hover: Light #274B39/#FFFFFF · Dark #E7F0EB/#121A14
• Pressed: Light #1D392B/#FFFFFF · Dark #FFFFFF/#121A14
• Disabled: Light #D8DED5/#4F5B4B · Dark #4F5B4B/#D8DED5

Its status remains authored teaching specification until real Figma or code access and tests exist.

Preserve connections as the document grows.

Task row must reference Checkbox and Status label. Field needs message, resizing, error, and focus behavior. Preserve source IDs and skipped token layers. Use an index only when consuming tools can retrieve linked records.

Compare supported, demanding, and unsupported tasks.

Test a normal Save task button, a long constrained Dark version, and an icon-only destructive request. Hold model, task, assets, and access constant in A/B runs. Inspect component choice, supported options, measurements, genuine reuse, gap reporting, and honest limitations.

Revise the smallest unclear part when a mistake repeats and keep the document version aligned with the library release.

Verify the whole connected project.

Confirm the system explanation, organized source and owner, 14-color evolved palette, semantic mappings, separate font and content strings, named numeric units, exact typography, reusable licensed icons, intentional effects, responsive rules, useful component properties and states, nested patterns, realistic screen states, recorded tests, use and avoid guidance, release scope, behavioral handoff, honest AI access, and explicit unsupported needs.

Use one shared language.

Foundation is an underlying decision; token is a named decision; variable stores a referenced value; alias links variables; semantic names purpose; collection groups variables and modes; mode changes context; binding is the live connection; style is a reusable visual recipe; component is a source; instance is a linked use; property configures it; variant is a supported configuration; state is a condition; anatomy names parts; pattern solves a recurring need; template structures content; breakpoint defines a width condition; handoff transfers implementation knowledge; deprecated means retained but discouraged.