# Morning Shapes Design system `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. This document is the complete design specification. Use the values and rules here instead of your own defaults. Where something is not specified, choose the option most consistent with the rules below and say so in your report. Token values are also provided as `tokens.css` and `tokens.json` next to this file — copy them, do not retype them. Each token's CSS variable is its path with dots replaced by dashes and camelCase split by dashes: `color.text.onAction` → `--color-text-on-action`. ## Character A sunny, toy-like language: warm white and cream pages broken by whole fields of full-strength color — yolk yellow, bright blue, tangerine, leaf green, night navy — whose edges bulge like a horizon, each product area owning one hue. Flat shapes shaded with one darker crescent scatter as confetti and sit as pictograms in round plates; small glyphs breathe slowly. Everything you touch is a chunky pill on a hard 2px ledge that sinks when pressed, in one bold grotesque. No pastels, gradients, outlines, faces or soft shadows. ## The ten rules that define this look 1. **Warm white and cream carry the page; color comes as whole flat fields.** The page is `color.surface.default`, cards and panels `color.surface.subtle`; saturated color appears only as a full-strength `color.field.*` band, panel or tile, at most one large field (a band, or a panel wider than half the content) per viewport. Never a tint, wash or gradient of a hue. Why: full-strength color next to warm white is the confidence; pastel washes make it generic. 2. **Every area of the product owns one hue, everywhere.** Map top-level areas, in navigation order, to `color.category.1`–`6`, then repeat; utility areas (settings, account, help, legal) take `color.field.cream`. The hue is the area's header band, nav dot, tags, empty-state panel and glyph. Why: color says where you are at a glance. 3. **Bands bulge at their edges.** A full-bleed field never ends in a straight line: a band below the top bar sags `size.arc` at the center (`size.arcSm` on header bands and phones); a closing band and the footer rise into the white above; a night band uses a soft wave. Contained panels are `radius.xl` rectangles, never arched. Why: the curved horizon is the most recognizable silhouette of the system. 4. **Every action is a pill or a circle on a ledge.** `radius.full`, bold label at `font.tracking.tight`, a hard `shadow.ledge` 2px below, one step darker on hover, and on press it moves down 2px while the ledge disappears (`motion.duration.snap`, `motion.easing.snap`). Why: the chunky physical press is the tactile signature. 5. **Ink does the work, blue converts, cream supports.** `color.action.primary` (ink) is every main action; `color.action.accent` (blue) marks the single conversion action of a region (sign up, buy, start, create the first item); `color.action.secondary` (cream) is everything secondary. The selected tab or filter is an ink pill with a `size.dot` white dot before its label. Why: one blue pill per region makes the next step obvious. 6. **Illustrate only with flat primitives.** Discs, crescents, rounded blobs, flat-bottomed clouds, hexagons, pills, four-point sparkles and dots; flat fills, at most three hues per piece, volume from one darker crescent of the same hue (`color.art.*Shade`), optionally one fat round-cap stroke in `color.art.stroke`. No outlines, no gradients, no faces. Why: the crescent-shaded primitive is the look; outlines read as clip art, gradients as 3D. 7. **Shapes frame content and never touch it.** 4–6 confetti around a section opener, a spot plate beside a feature or settings group, one composition in an empty state; at least `space.6` from text, never over text, data, inputs or tables. Why: sunny only while content stays legible. 8. **Small glyphs breathe.** Glyphs (`size.glyphSm`–`size.glyphLg`) loop slow scale-and-rotate cycles (`motion.duration.breathe`–`breatheSlow`, `motion.easing.breathe`), each a different length, at most six on screen, still under reduced motion. Why: slow breathing reads as calm; fast or bouncy motion as noise. 9. **Depth by tone, not shadow.** Cream on white, white on cream, a field as its own layer. The only shadows are the pill ledge, `shadow.header` on the scrolled top bar and `shadow.float` on menus, toasts and floating chips. Cards have no border and no shadow. Why: stacked flat tones keep it printed and toy-like. 10. **One friendly bold grotesque.** `font.family.sans` everywhere; headings `font.weight.bold` at `font.tracking.tight`; body `font.size.body`–`font.size.title` regular; labels medium; sentence case; buttons 1–3 words, verb first. Why: the bold, tightly tracked round grotesque is the system's voice. ## Never - Pastel tints, transparent washes, gradients or color-mix of a field hue behind content; cool greys; pure black. - Two saturated fields touching, a saturated panel on a field of a neighbouring hue, or more than one large saturated field in a viewport; a field behind a table, form fields or more than three lines of body text. - Square or slightly rounded buttons; blurred button shadows; scale, lift or glow on hover; more than one blue pill in a region. - Outlines or strokes on shapes or icons (the one fat round-cap gesture excepted); gradients, highlights, 3D or glossy shading on shapes; drawn faces, eyes or smiles on any shape; characters or mascots. - A single colored dot used as a logo or brand mark. - Shapes or glyphs over text, data, inputs or table cells; confetti inside tables, forms, dialogs or toasts. - Bounce, overshoot, parallax, long slides, fast loops, spinners, shimmer gradients. - Borders or shadows on cards; zebra stripes in saturated colors; colored body text (links and status text excepted). - Uppercase anywhere except the 14px eyebrow; title case; headings lighter than bold. - Device mockups, stock illustration sets or emoji as illustration on product screens. ## Signature elements Build these first, as reusable pieces. Class names are a suggestion; structure and values are the rule. Every decorative `` gets `aria-hidden="true" focusable="false"`. ### Sunny color fields with bulging edges **What.** Whole sections in one flat `color.field.*` hue with its `color.onField.*` text, as a full-bleed **band**, a compact **header band** opening product screens, or a contained **panel** (`radius.xl`). Bands bulge into the page (rule 3). Inside: on-field text, white or cream cards, on-field pills, shapes in other hues. **Recipe.** ```html
…heading, lead, pills…
…
``` ```css /* One class per field hue: yellow, orange, pink, cream, blue, green, violet, night */ .ms-hue--yellow { --ms-field: var(--color-field-yellow); --ms-on-field: var(--color-on-field-yellow); } .ms-hue--blue, .ms-hue--green, .ms-hue--violet, .ms-hue--night { --ms-ring: var(--color-focus-ring-on-field); } .ms-field { --ms-arc: var(--size-arc); position: relative; isolation: isolate; background: var(--ms-field); color: var(--ms-on-field); padding-block: var(--space-24); } .ms-field__inner { position: relative; z-index: 1; max-width: var(--size-container); margin-inline: auto; padding-inline: var(--space-12); } .ms-arch { position: absolute; inset-inline: 0; width: 100%; height: var(--ms-arc); fill: var(--ms-field); } .ms-field--sag { margin-block-end: var(--ms-arc); } .ms-field--sag > .ms-arch { top: 100%; } .ms-field--rise { margin-block-start: var(--ms-arc); } .ms-field--rise > .ms-arch { bottom: 100%; } .ms-field--header { --ms-arc: var(--size-arc-sm); padding-block: var(--space-10) var(--space-8); } /* height = its text */ /* Header-band art fits the band: trailing 40%, capped at the band's inner height, never sets the height */ .ms-field__art { position: absolute; inset-block: var(--space-6) 0; inset-inline-end: var(--space-6); width: 40%; display: flex; justify-content: flex-end; pointer-events: none; } .ms-field__art > svg { display: block; height: 100%; width: auto; max-width: 100%; } /* viewBox 0 0 400 200 */ .ms-field--header .ms-field__inner { padding-inline-end: 44%; } .ms-panel { background: var(--ms-field); color: var(--ms-on-field); border-radius: var(--radius-xl); padding: var(--space-12); position: relative; overflow: clip; } .ms-field :focus-visible, .ms-panel :focus-visible { outline-color: var(--ms-ring, var(--color-focus-ring)); } @media (max-width: 767px) { .ms-field { --ms-arc: var(--size-arc-sm); padding-block: var(--space-16); } .ms-field__inner, .ms-field--header .ms-field__inner { padding-inline: var(--space-6); } .ms-field--header { padding-block: var(--space-8); } /* Compact band: cluster tucked in the top corner, never its own row; the title wraps clear of it */ .ms-field--header .ms-field__art { inset: var(--space-4) var(--space-4) auto auto; width: 96px; } .ms-field--header .ms-field__art > svg { width: 100%; height: auto; } .ms-field--header .ms-field__inner > :first-child { padding-inline-end: calc(96px + var(--space-6)); } .ms-panel { padding: var(--space-8) var(--space-6); } } ``` **Header-band cluster.** A scene, not a sticker: 4–5 pieces across the art box. The lead shape pictures the screen's subject in one noun (a key or an open door for an account screen, a group of discs for people, a coin stack for prices, a calendar page for bookings), 60–80% of the box height, crescent-shaded; a second-hue shape cuts into it by 10–20%; a 48–64px four-point star; a small sparkle; optionally a cloud. Every hue differs from the band's. A front-page hero prefers a vignette (Product vignettes). The samples are **structure only** — reusing their shapes or arrangement is a copy; draw each area's own subject and layout, no two alike. Art under a quarter of the band's width, or a disc and pill that picture nothing, is a sticker. Every piece stays inside the band. ```html ``` Each area's `ms-hue--*` class goes on its header band, empty-state panel and nav dot (rule 2). Secondary text on a field uses its on-field color, never grey. **Motion.** Static. Marketing band content fades in once (Reveal); product header bands appear instantly. **Where.** Front-page hero (band, sag); every product screen except dashboards (header band); dashboard stat tiles; closing call to action (band, rise, mega pill); footer (cream, rise); empty states and onboarding steps (panel); option sets (Card: option card). **Limits.** A band's height comes from its content; art fits the band. A header band is its text plus padding (about 200–260px on desktop, under a third of the first screen); only a front-page hero (display headline, lead, pills) grows around its art. Below `breakpoint.md` no field exceeds one screen and decoration never adds height. One saturated field per viewport. Two fields never share a hue and are separated by at least `space.8` of white or cream (a cream footer may follow a closing band). When a detail screen's item image or cover is wider than a third of the content, its header band turns cream (indigo at night), the area hue stays on the nav dot, tag and cluster, and the cover is the one field. Never behind a table, form fields or over three lines of body text. Arcs only on full-bleed bands. Text in the field's `color.onField.*` (ink on yellow, orange, pink, cream). ### Flat shape kit: crescent shading, sparkles, spot plates **What.** Original flat shapes (rule 6): discs 32–128px, sparkles 16–64px, crescents, blobs, clouds, hexagons, pills, dots. **Two-color discs** (confetti only): a second hue covers 50–70% of a disc. **Spot plates**: a `size.plate` (or `size.plateSm`) circle in `color.art.cream` (or a field hue on white) holding a pictogram. **Confetti**: 4–6 shapes around a heading. Optional: one ink round-cap stroke, 10–15% of the piece's width. **Recipe.** ```html ``` ```css .ms-confetti { position: relative; padding-block: var(--space-16); padding-inline: clamp(var(--space-6), 10vw, var(--space-32)); text-align: center; } .ms-confetti__art { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .ms-confetti__art > svg { position: absolute; } .ms-confetti > :not(.ms-confetti__art) { position: relative; z-index: 1; } /* 5 shapes placed in the side gutters and the corners, never across the text box */ .ms-confetti__art > :nth-child(1) { inset: 8% auto auto 2%; width: 96px; } .ms-confetti__art > :nth-child(2) { inset: 4% 6% auto auto; width: 28px; rotate: 12deg; } .ms-confetti__art > :nth-child(3) { inset: auto auto 6% 10%; width: 24px; } .ms-confetti__art > :nth-child(4) { inset: auto 2% 10% auto; width: 112px; } .ms-confetti__art > :nth-child(5) { inset: 46% auto auto 14%; width: 16px; } @media (max-width: 767px) { .ms-confetti__art > :nth-child(n+4) { display: none; } .ms-confetti__art > :nth-child(1) { width: 56px; } } ``` Building an original piece: at most three hues plus the optional stroke, each unlike the ground; crescent offset 12–18% of the radius toward the upper left (shade covers 25–35% at the lower right) in the base hue's `color.art.*Shade` partner — never two flat halves. Compose asymmetrically: one large shape, one or two medium, the rest sparkles and dots. **Pictograms (plates, covers, empty states).** Name the subject in one noun from the item, feature, setting group or category beside it; build its outline from 2–3 crescent-shaded primitives a stranger could name without the title (a sun over a hill, a moon and a star, a cloud with drops, a padlock, an envelope, a calendar page). Dots, rings and plain discs are accents, never the whole pictogram. It fills 60–70% of its plate or cover, one sparkle within 8px. Neighbours that share a main shape and layout get a new silhouette, pose or supporting shape — a hue swap is not a new drawing; on one screen each spot pictures its own noun (the band's subject is not reused in a plate or empty state). Empty states: a full composition or a `size.glyphLg` glyph, never a lone pair of dots. **Motion.** Confetti and plates fade in once (Reveal, staggered in reading order). Optional idle drift on one shape per screen: ±4px and ±10° over `motion.duration.breatheSlow`, `motion.easing.breathe`, alternate, infinite. Reduced motion: at rest. **Where.** Marketing section openers (4–6 confetti); header bands (one cluster); feature grids, settings groups, list items (spot plates); empty states (one `size.art` composition); error pages (a `color.art.stone` disc with a `color.art.lavender` crescent and a cloud with three round-cap drops); stat tiles (one `size.plateSm` plate); avatars without a photo; onboarding. **Limits.** Max 6 confetti per heading, one composition per card or panel, one cluster per header band; never over text, data or inputs, never inside tables, forms, dialogs or toasts (a 24px toast sparkle excepted). ### Breathing glyphs **What.** Small glyphs (`size.glyphSm`–`size.glyphLg`) on slow loops: a fat zigzag, a crescent with a sparkle, a spiral, a dot in a ring, two overlapping bubbles, three dots. Stroke glyphs: one path, stroke 15% of the box, round caps and joins, one hue. Fill glyphs: 2–3 kit shapes. Each has its own cycle, so a set never moves in step. **Recipe.** ```html ``` ```css .ms-glyph { width: var(--size-glyph); height: var(--size-glyph); flex: none; } .ms-glyph__part { transform-box: fill-box; transform-origin: center; animation: ms-breathe var(--ms-breath, var(--motion-duration-breathe)) var(--motion-easing-breathe) infinite; } @keyframes ms-breathe { 0%, 50%, 100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(0.87) rotate(15deg); } 75% { transform: scale(0.87) rotate(-35deg); } } @keyframes ms-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.48); } } /* front bubble, motion.duration.breatheSlow */ @keyframes ms-orbit { 0% { transform: rotate(0deg); } 60%, 100% { transform: rotate(360deg); } } /* sparkle around a crescent */ @keyframes ms-pop { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } .ms-glyph--orbit .ms-glyph__part { animation: ms-orbit calc(var(--motion-duration-orbit) * 3) var(--motion-easing-breathe) infinite; transform-origin: 28px 28px; transform-box: view-box; } .ms-glyph--pulse .ms-glyph__part { animation-name: ms-pulse; } /* Each glyph on a screen gets its own --ms-breath: breathe, breatheSlow, breathe × 0.85, breathe × 1.22 */ .ms-glyph.is-offscreen .ms-glyph__part { animation-play-state: paused; } .ms-glyph--still .ms-glyph__part { animation: none; } /* Choice row or option tile: bordered, glyph still until hovered, focused or selected */ .ms-choice { display: flex; align-items: center; gap: var(--space-4); min-height: var(--size-list-row); padding: 0 var(--space-5); background: var(--color-surface-raised); border-radius: var(--radius-sm); border: var(--border-width-thick) solid var(--color-border-default); font-weight: var(--font-weight-bold); transition: border-color var(--motion-duration-ease) var(--motion-easing-snap); } .ms-choice:hover { border-color: var(--color-border-strong); } .ms-choice[aria-checked="true"], .ms-choice[aria-selected="true"] { border-color: var(--color-action-primary); } .ms-choice .ms-glyph { width: var(--size-glyph-sm); height: var(--size-glyph-sm); } .ms-choice:not(:hover, :focus-visible, [aria-checked="true"], [aria-selected="true"]) .ms-glyph__part { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .ms-glyph__part { animation: none; } } ``` Pause glyphs outside the viewport (an intersection observer toggles `is-offscreen`). The pop-dots loader is a glyph of three `size.dot` dots, each `ms-pop` over `motion.duration.pop`, delays of 0, 1 and 2 × `motion.duration.popStagger`. **Motion.** Infinite loops as in the recipe. Reduced motion: every glyph holds its rest frame (scale 1, 0°); the pop-dots loader shows three static dots plus its "Loading" text. **Where.** Choice lists, navigation cards and category rows (one per row, in the row's hue, picturing its label); a dashboard greeting (one); empty states (`size.glyphLg`); loading (pop dots or a breathing disc, never a spinner); form option tiles (still until hovered, focused or selected); settings section icons (still, `size.glyphSm`). **Limits.** At most six looping at once and never larger than `size.glyphLg`. Never in tables, inputs, next to changing numbers, or behind text. A glyph pictures the label beside it (no ring or zigzag on an unrelated control); a control repeated on every page keeps one glyph and hue. Pop dots mean loading only, never empty or no-results art. ### Chunky pills on a ledge **What.** Every action is a pill or circle (rule 4), `size.controlSm`/`control`/`controlLg` tall; a 2px transparent border keeps outline variants the same size. **Recipe.** ```css .ms-pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--size-control); padding: 0 var(--space-6); border-radius: var(--radius-full); border: var(--border-width-thick) solid transparent; font: var(--font-weight-bold) var(--font-size-body)/var(--font-line-height-control) var(--font-family-sans); letter-spacing: var(--font-tracking-tight); white-space: nowrap; cursor: pointer; background: var(--color-action-primary); color: var(--color-text-on-action); box-shadow: var(--shadow-ledge); transition-property: background-color, color, border-color, box-shadow, transform; transition-duration: var(--motion-duration-snap); transition-timing-function: var(--motion-easing-snap); } .ms-pill:hover { background: var(--color-action-primary-hover); } .ms-pill:active { transform: translateY(2px); box-shadow: var(--shadow-ledge-gone); } .ms-pill:focus-visible { outline: var(--border-width-thick) solid var(--ms-ring, var(--color-focus-ring)); outline-offset: 2px; } .ms-pill--accent { background: var(--color-action-accent); color: var(--color-text-on-accent); } .ms-pill--accent:hover { background: var(--color-action-accent-hover); } .ms-pill--cream { background: var(--color-action-secondary); color: var(--color-text-on-secondary); } .ms-pill--cream:hover { background: var(--color-action-secondary-hover); } .ms-pill--cream:active { background: var(--color-action-secondary-pressed); } .ms-pill--outline { background: transparent; color: currentColor; border-color: currentColor; box-shadow: none; } .ms-pill--outline:hover { background: var(--color-surface-hover); } .ms-field .ms-pill { box-shadow: var(--shadow-ledge-on-field); } .ms-pill--on-field { background: var(--color-action-on-field); color: var(--color-text-on-field-action); } .ms-pill--on-field:hover { background: var(--color-action-on-field-hover); } .ms-pill--sm { height: var(--size-control-sm); padding: 0 var(--space-5); } .ms-pill--lg { height: var(--size-control-lg); padding: 0 var(--space-8); font-size: var(--font-size-body-lg); } .ms-pill--mega { height: auto; padding: var(--space-4) var(--space-12); font-size: var(--font-size-mega); line-height: var(--font-line-height-mega); } .ms-circle { width: var(--size-control); padding: 0; } .ms-circle--sm { width: var(--size-circle-sm); height: var(--size-circle-sm); } .ms-pill:disabled, .ms-pill[aria-disabled="true"] { background: var(--color-surface-hover); color: var(--color-text-secondary); box-shadow: none; transform: none; cursor: not-allowed; } /* Tab or filter pill: