Morning Shapes

Updated 2026-10-26

Sunny and toy-like: warm cream pages, flat saturated fields with arched edges, crescent-shaded geometric shapes, slowly breathing glyphs and chunky pills that sink onto a 2px ledge. Suits wellness, learning and habit apps.

playful · pill corners · regular · light and dark · code MIT

agent.md Apply this system

On a real product

Three products with their own design, and the same products after a coding agent applied Morning Shapes. Pages, copy, photos and features are the product's own; everything you see change is the system.

One run of the standard prompt on a product with its own design, captured as built. Unedited. Photos are public domain. Before release, every system is also applied to six plain test apps and checked screen by screen.

Color

Semantic tokens · contrast against surface.default

surface.default#ffffff—

surface.subtle#f9f4f2—

surface.raised#ffffff—

border.default#e2ded9—

border.strong#969089—

text.primary#2d2c2bAAA

text.secondary#5f5a55AA

action.primary#2d2c2bAAA

action.primaryHover#141313AAA

focus.ring#0040eaAAA

status.success#02873eAA

status.warning#ffce00fail

status.danger#c8321eAA

status.info#0061efAA

Type and shape

Figtree · Figtree

font.size.display · 64pxMorning Shapes

font.size.megaMobile · 48pxMorning Shapes

font.size.h2 · 40pxMorning Shapes

font.size.displayMobile · 40pxMorning Shapes

font.size.h3 · 32pxMorning Shapes

radius.sm
8px

radius.md
12px

radius.lg
16px

radius.xl
24px

radius.check
6px

radius.full
9999px

space · 4px 8px 12px 16px 20px 24px 32px 40px 48px 64px 80px 96px 128px

Components

12 fully specified · 12 listed

Every component and its states

action / buttonspecifieddefault · hover · focus-visible · active · disabled · loading

form / text-fieldspecifieddefault · hover · focus-visible · disabled · error

form / selectspecifieddefault · hover · focus-visible · selected · disabled · error

form / checkboxspecifieddefault · hover · focus-visible · selected · disabled · error

form / switchspecifieddefault · hover · focus-visible · active · selected · disabled

navigation / tabsspecifieddefault · hover · focus-visible · active · selected · disabled

navigation / navigationspecifieddefault · hover · focus-visible · selected

surface / cardspecifieddefault · hover · focus-visible · active · selected · disabled · loading

data-display / tablespecifieddefault · hover · focus-visible · selected · loading · error

data-display / badgespecifieddefault

overlay / dialogspecifieddefault · focus-visible

feedback / toastspecifieddefault

Changelog

Your project keeps its own copy

Setting a system up keeps its whole spec (design-system/agent.md) and tokens in your project, and every later screen is built from that copy. Updates here never restyle a project on their own — ask your agent to update and it applies only what changed since your copy.

2026-10-26current
First release of Morning Shapes: a sunny, toy-like system. Warm white and cream pages, flat saturated color fields with curved edges, flat geometric shapes with crescent shading, small glyphs that breathe slowly, and chunky pills that sink onto a 2px ledge when pressed. A night theme comes with it.
Details (7)
- Ten defining rules and a Never list: color only as whole flat fields, one field per screen, one hue per product area, no outlines, gradients or faces on shapes, and depth by tone instead of shadow.
- Color fields for page headers and closing sections, as tall as their text, with an arched edge and one composed shape scene fitted inside.
- A shape kit built by recipe: crescent-shaded discs, clouds, four-point sparkles and round pictogram plates, each picturing its own subject. Items without an image get a cover in their area's color, never a grey box.
- Pill and circle buttons with a one-step darker hover and a 2px press; the selected tab is an ink pill with a dot.
- Product scenes on color: one anchor with a few UI fragments overlapping it, built once on entry.
- Tone-on-tone cards, option cards with big figures, colored stat tiles, and empty states with one composition and one action, never sample data.
- A night theme on deep navy with indigo panels, where fields and shapes keep their hues.

Apply Morning Shapes

01 Project

02 Agent

03 Spec delivery

Prompt

Apply design system morning-shapes to this project.
Spec: https://pigmentui.com/s/morning-shapes/agent.md
Preserve features, routes, business logic, API contracts, tests and accessibility.
Audit styles and components first, then propose a migration plan and wait for my approval. Restyle one screen as a sample and wait again.
If the system offers both light and dark, ask which my product supports (light only, dark only, or both) as part of the plan: with one, fix that mode; with both, follow the system setting and connect an existing theme switch, adding one only if I ask.
Keep the whole spec in the project: download it unchanged into design-system/agent.md (for example `curl -fsSL https://pigmentui.com/s/morning-shapes/agent.md -o design-system/agent.md`; only if you can't download, copy it exactly, never summarized), next to VERSION and the tokens, and make the AGENTS.md / CLAUDE.md line read: "UI work follows design-system/agent.md - read its rules and Applying the concept before building any screen."
Report build results, visual checks and anything left unimplemented.
When everything is done, ask me whether to star Pigment on GitHub (mirunamu00/pigment). Only if I say yes, run `gh api -X PUT user/starred/mirunamu00/pigment`; without gh, give me the link https://github.com/mirunamu00/pigment.

agent.mdthe whole spec in one file · for offline setupsDownload

Apply this system