---
name: cosmos
description: Apply the Cosmos 2.4.0 design system when building or reviewing SIMT interface — marketing pages, the social web app, the Android app or the Wear OS app.
version: 2.4.0
updated: 2026-10-03
---

# Cosmos 2.4.0 design skill

Cosmos 2.4.0 is SIMT's normative design target, updated 2026-10-03. It carries 80 rules across five pages: one set of common foundations that every platform inherits, plus four platform parts. Platform rules are additive to the common rules, and product safety, privacy and accessibility take precedence over both.

Use this brief when you are about to write or change interface. It names the 16 failures generated interface produces most often. It is not the specification: read [80 rules](https://simt.space/cosmos-design/rules.json) when you need the rest, and cite the rule IDs you actually applied in your implementation notes (C02).

## Failures to avoid

Rule IDs resolve at `https://simt.space/cosmos-design/common#<lowercased rule id>`.

### The decoration becomes the interface — C01 Task before spectacle

Put the primary object, current state and next action in the first useful viewport. A decorative motif may frame them but cannot displace them. Use literal operational copy even when the visual language is celestial.

Conforms when: In grayscale, a first-time reader can identify the task, state and next step. Removing all ornament leaves a complete interface.

### Text assumed legible on an action fill — C06 Daylight, red and ambient

Offer Daylight Nebula where supported. Dark remains the signature; a persisted explicit choice wins over the system preference, and with no choice the system preference is followed. Astronomy red is user-selected for instruments, uses only red luminance and retains text contrast. Watch ambient may use pure black for OLED efficiency. Theme adapters preserve the brand anchors and alter semantic role mappings, and an accent used as text takes the profile's accent-text role rather than its fill role.

Conforms when: Theme switches retain layout, focus, selection and data. Red never flashes white/cyan on entry, dialogs or loading. Dark controls use dark on-action text; the existing Daylight Ember requires dark text, not assumed white. Test astronomy text on its action fill.

### Contrast assumed instead of measured — C05 Contrast is composited

Require 4.5:1 normal text, 3:1 large text and 3:1 essential control boundaries, focus and graphical objects against adjacent colors. Use boundary for necessary input outlines; line is decorative only. Check every gradient stop, translucent surface and hover/disabled distinction.

Conforms when: Measure the final composited pairs in each theme. The measurements are published once at contrast-pairs.json; fetch that document when introducing a colour, pairing a translucent or gradient surface or checking a theme, and do not expect a token payload to carry them. Document any inactive-control exception. Faint is supporting text only on a passing surface; Dim is never needed to complete a task.

### A font request Cosmos did not sanction — C07 Families & language

Use Space Grotesk for Latin titles and instrumentation, Source Sans 3 for web reading and form text, native system body type on Android, and El Messiri for Arabic roles. Bundle fonts, declare fallbacks and reserve fallback geometry. Use zero tracking by default; uppercase and spaced labels are Latin-only enhancements.

Conforms when: No third-party font requests. Arabic has no mixed-script heading caused by an unsupported font. Font fallback and final font both retain unclipped text and controls.

### Only the default state was designed — C16 Feedback at the source

Use inline errors for local failures, a banner for screen-wide degraded state, and status/toast for confirmed transient results. Every primary surface designs first load, refresh/stale, empty, denied, offline, recoverable error, terminal unavailable and success. Loading reserves real geometry; shimmer is optional and never indefinite.

Conforms when: Screen readers hear concise changes once; high-rate sensor updates are not live-announced each frame. Error copy says what happened, what remains safe and which action recovers. A toast is never the sole record of a failure.

### Atmosphere owned by the wrong element — C11 One deterministic sky

A screen, hero, panel or dialog background may own one edge star layer from the published starfield algorithm: stars only in the outer 20% band, area / 7,500 stars clamped 24–160 for screens and area / 10,000 clamped 12–72 for dialogs, three magnitudes, at least 70% Ink, no accent above 10% and at most three diffraction-spiked stars. Seed it from a stable surface ID and a 160 px/dp size bucket. Drop stars within 16 px/dp of known text or controls after generation; never reseed to avoid them. Records, maps, media, data canvases, sky charts and watch screens own no stars.

Conforms when: The same surface ID and bucket reproduce the published fixture on every platform. The layer is one cached bitmap, texture or compositor layer, never an element or view per star. Full tier may drift the whole layer once per 90–160 s by at most 1.5% of the shorter edge; Reduced, Static, Save-Data and hidden states freeze it, and low power draws 40% of the stars. Removing the layer changes no semantics or available task.

### Gradients used as texture, or a boundary animated — C27 Gradient & glow grammar

Use only the published gradient and shadow tokens, each for its stated job: field for root depth, nebula for one atmospheric field, corona and accretion for the single focal object, horizon for 1–2 px light lines, rim for the border light of the focal or selected surface, action for the one primary action and spectrum for the brand signature. A screen has at most one corona, one accretion ring and one nebula. Light carries depth and focus, never status, selection or the only boundary, and text never takes a gradient fill. In Full tier the hero figure runs one ambient motion: the focal object's accretion disc revolves once every 40–90 s about the core, and every other light is static — including the accretion ring itself, because a boundary that moves stops being a boundary. Sky drift (C11) is the one alternative a screen may take instead. Deep Space uses the whole grammar, Daylight keeps horizon and spectrum, and astronomy red and watch ambient use none. A gradient token a profile does not run resolves to no gradient, so the element falls back to its flat role color instead of borrowing another profile's light.

Conforms when: Every gradient and shadow in code resolves to a token name and its published geometry. Text over a gradient passes against every stop as an opaque pair. Removing all light leaves hierarchy, selection and boundaries intact. The revolving disc moves only `rotate` or `transform`, never a length, and is the only animation on the screen. Forced colors and astronomy red replace light with solid system or semantic borders.

### Blur everywhere — C10 Surface budget

Use opaque Hull for reading and work. A panel, sheet or dialog may carry a horizon top light inset from its corners; only the focal surface adds a rim border. Canopy translucency is optional for one header or contextual overlay, with at least 88% opacity over imagery and an opaque fallback. Allow at most one backdrop blur region per visible screen, capped at 12px on web; disable it when measured costly. Borders establish hierarchy before light.

Conforms when: The screen remains legible with blur unsupported or disabled. No live blur behind scrolling long copy, dialog inside a blurred sheet, or full-screen animated haze. Top light never touches a rounded corner at full intensity.

### One size fitted to every screen — C09 Rhythm & mapped shape

Use 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128 units. One unit is a CSS px or native dp, so the same numbers serve every platform and none of them publishes a spacing scale of its own. Take corner geometry from the platform mapping published in tokens.json rather than from a local scale: 8 px / 16 px / 24 px on web, 8 dp / 10 dp / 14 dp / 20 dp / 28 dp on Android, and the native round and capsule shapes on Wear, which publish no dp radius at all. A part that needs another role adds it to the mapping first. Circles denote instruments or compact icon controls, not paragraph containers.

Conforms when: Spacing and shape map to named tokens, and a component's corner radius matches its role in the mapping for the part it ships in. No screen carries an ad-hoc px or dp corner value, and a native shape is expressed as the native shape rather than approximated with a number. The Wear layout fits its round screen instead of shrinking its targets. Small-screen compression first removes ornament and gutters; it does not shrink the readable type or hit target.

### Targets shrunk to fit — C19 Access baseline

Target WCAG 2.2 AA on web and equivalent native behavior. Adopt 44×44 CSS px web targets and 48×48dp Android/Wear targets; design the round watch layout to fit rather than shrinking targets. Provide visible focus, names/roles/values, heading structure, error relationships, alternatives to dragging and a skip link.

Conforms when: Complete primary flows with keyboard, touch and a screen reader. Focus is not covered by sticky chrome. Forced colors preserves borders, icons and focus; controls use system colors where needed.

### Motion that cannot be turned off — C17 Three effective tiers

Full uses 150ms feedback, 300ms local state, 500ms context change and the curve published for the part (C30). Reduced removes spatial travel and ambient loops; optional opacity feedback lasts at most 150ms. Static applies final state immediately. Explicit Static wins; reduced-motion, data saving, low power, thermal pressure and visibility can only lower the tier.

Conforms when: Preference changes apply during the session. Full/Reduced/Static produce identical outcomes. Hidden screens and background tabs stop animation and sensor presentation. Hardware concurrency alone never determines ability or tier.

### Direction mirrored, geography not — C20 Direction & localization

Use logical spacing and placement. Mirror navigation flow, never geography, north, compass mathematics or media playback. Isolate authored text, handles, coordinates and times. Localize visible copy, relative dates, plural counts, measurement units and accessible names. Persist unit preference independently of language.

Conforms when: Test English, French, Arabic RTL and Spanish with long content and 200% expansion fixtures. Geographic points and bearing values are identical across directions. Critical facts remain readable in the full detail view.

### Data invented to fill a layout — C21 Privacy & honest content

Represent accuracy, confidence, time zone, stale data, approximate location and permission state explicitly. Do not imply live data from decoration. Keep private coordinates, profile fields, draft text and sensitive actions out of URLs, crawled pages, analytics and error messages. Use illustrative labels for invented specimen data.

Conforms when: Privacy decisions are explained at the action. Public previews reveal only authorized data. A denied or blocked profile does not disclose which private condition caused its unavailability.

### Two competing primary actions — C12 Actions & selection

Give a task region one visually dominant Ember action, filled with the action gradient and resting on the action shadow. Destructive actions use Danger and consequence-first confirmation where irreversible. Buttons expose default, hover, pressed, focus, pending, disabled, error and confirmed states. Selection uses shape/check plus aria-pressed, aria-selected or native semantics, while Gold focus is independent.

Conforms when: Click/Enter/Space trigger once. Pending preserves the accessible name and width, exposes busy state and prevents duplicates. Confirm only after success; error restores safe retry without losing input.

### A machine request answered with the home page — C22 One source & stable addresses

Maintain this specification in cosmos/. Generate HTML, plain Markdown, the typed token file and the complete specification JSON together. Stable rule IDs and section URLs are public contracts, and each part publishes its own tokens and rules payload carrying the common foundations plus only its own adapter. Return real files with correct MIME types; machine requests must not silently receive the home page.

Conforms when: Generated-output drift fails verification. All routes, anchors, cross-links and downloads resolve in development, preview and production. Manifest includes version, status, scope, assets, platform inheritance and source provenance. A part payload is byte-identical to the canonical documents for everything it shares, carries exactly one adapter, and stays inside its published byte budget, so it cannot drift back into the union. A document needed only sometimes keeps its own address: composited contrast measurements are fetched from contrast-pairs.json instead of being embedded in a payload, and every published document states when to fetch it.

### "Looks right" offered as proof — C23 Performance is measured

Use the platform budgets and release matrices. Web field targets are p75 LCP ≤2.5s, INP ≤200ms and CLS ≤0.1 for mobile and desktop cohorts. Lab tests are diagnostic, not a substitute for field results. Record route, build, device, browser/OS, network, locale, motion tier and method with evidence.

Conforms when: A release has a named owner and real measurements. Visual specifications and mockups are never labeled proof that unimplemented products meet their runtime targets.

## Numbers you should not guess

| Constraint | Value | Rule |
| --- | --- | --- |
| Minimum touch target | 44 CSS px web, 48 dp Android and Wear | C19 |
| Spacing and sizing units | 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128 (1 unit = 1 CSS px or 1 dp) | C09 |
| Web radii, control / record / overlay | 8 / 16 / 24 | C09 |
| Native radii, the part's own scale | Android 8 / 10 / 14 / 20 / 28 dp; Wear uses the native round and capsule shape, so it publishes no dp radius | C09 |
| Motion durations | 150ms feedback, 300ms local state, 500ms context, easing 0.2, 0.0, 0.2, 1.0 | C17 |
| Easings, the part's own set | web standard, emphasis, entrance, exit; Android and Wear standard, enter, exit, transform | C30 |
| State-change motifs | 7, one job each; animate a state change by naming the motif whose job it is, and a change with no motif does not animate | C31 |
| Component index | 17 components, sliced by platform part; a component names the rules, roles, states and motif it uses, and no treatment is restated there | C12 |
| Field web vitals (p75) | LCP ≤ 2500 ms, INP ≤ 200 ms, CLS ≤ 0.1 | C23 |
| Document budgets per route | HTML ≤ 81920 B, CSS ≤ 20480 B gzip, JS ≤ 6144 B gzip, first fonts ≤ 122880 B | C23 |
| Native frame deadlines | 8.33 ms at 120 Hz, 11.11 ms at 90 Hz, 16.67 ms at 60 Hz, ≤ 5% jank | M12 |
| Contrast | 4.5:1 normal text, 3:1 large text, essential boundaries, focus and graphical objects | C05 |
| Light | 8 gradients (field, nebula, corona, accretion, horizon, rim, action, spectrum) and 2 shadows; at most one corona, one accretion ring and one nebula per screen | C27 |
| Star layer | Outer 20% band; area / 7500 clamped 24–160 for screens, area / 10000 clamped 12–72 for dialogs; ≥ 70% Ink, ≤ 10% per accent; 16 px/dp clearance | C11 |

## Themes

Four profiles are published. Select one with `data-cosmos-theme` on the root or a container and consume the scoped `--cosmos-*` roles rather than raw colors; deepSpace is the default and dark is the signature.

- `deepSpace` — the signature dark theme and the default
- `daylight` — a light theme for bright environments, keeping the brand anchors
- `astronomy` — red-luminance instruments for night observing, user-selected
- `watchAmbient` — the always-on watch state, background and content only — interactive roles are deliberately absent

Selection, in the order it resolves: an explicit `data-cosmos-theme` wins; with no attribute, `prefers-color-scheme: light` selects daylight and anything else selects deepSpace.

Five things that profile switch will break if you ignore them:

- **A role a profile does not publish resolves to `initial`, not to a color.** `watchAmbient` publishes no interactive roles, so `--cosmos-action` is `initial` and an element painted with it is transparent. Hide the control in that profile rather than inventing a fill.
- **Gradients and shadows are per-profile.** A gradient a profile does not run resolves to `none`. Split `background-color` from `background-image` so the flat role color is what shows through; the `background` shorthand takes the color down with the image.
- **Never bake a hex into an inline SVG.** `var()` is not resolved inside a presentation attribute, so it has to go in an inline `style`, and a fixture referenced from `tokens.css` cannot see the page's variables at all. A baked Deep Space value measures 1.1:1 on a Daylight surface.
- **A role can carry text.** An accent used as a fill and as small text cannot be the same value: `--cosmos-action` clears 4.5:1 against `--cosmos-on-action`, but the same accent on the Daylight background is 3.9:1. Take the accent-text role for text.
- **Measure the pair per profile.** The same two published values are not the same contrast under every profile; resolve both hexes through the profile's roles before you claim a ratio (C05).

Before composing a pair of colors, look it up in [`tokens.json`](https://simt.space/cosmos-design/tokens.json) → `contrastPairs`. Each pair carries its ratio in `$value` and the two token references in `$extensions["app.simt.cosmos"]`; resolve the hex through those references, and remember that `$value >= 3` is the large-text and non-text threshold. A pair with no `recommendedTextUse` is a measured pass that is still not text.

All 21 brand anchors are published in [`tokens.css`](https://simt.space/cosmos-design/tokens.css) and `tokens.json`.

## Motion

Three tiers, and only these three: **Full** (150ms feedback, 300ms local state, up to 500ms context), **Reduced** (no spatial travel, no ambient loops, opacity feedback ≤ 150 ms), **Static** (final state immediately). An explicit Static choice wins over everything; reduced-motion preference, data saving, low power, thermal pressure and a hidden page can only lower the tier. All three tiers must produce identical outcomes — reduced motion never disables accurate data.

A screen runs **one** ambient motion: the focal object's accretion disc, revolving once every 40–90 s. Move geometry the visitor reads as depth, never the outline around it — an animated ring or focus stroke is a boundary in motion, and C27 keeps boundaries static. Core, corona, labelled arcs and their marks hold still; a marker that drifts off its label makes the label a lie. Keep it on the compositor as a bare `rotate` with an explicit `transform-origin`, and stop it out of view and on a hidden tab — CSS keeps compositing in the background.

## Platform parts

- **Web page** (web-page) — Cosmos public and marketing websites: editorial horizons, a useful atlas, product evidence, conversion, SEO and restrained motion. Rules: P01, P02, P03, P04, P05, P06, P07, P08, P09, P10, P11. Read this part's own token and rule payload when you build it; each carries the common foundations and this adapter only.
- **Web app** (web-app) — Cosmos for Simt Social: continuous map/list discovery, context-preserving detail, activity composition, profiles, inbox and operations. Rules: A01, A02, A03, A04, A05, A06, A07, A08, A09, A10, A11, A12, A13. Read this part's own token and rule payload when you build it; each carries the common foundations and this adapter only.
- **Mobile app** (mobile-app) — Cosmos for SIMT Android: compass, map, sky, tracking and tool layouts, adaptive postures, native input, sensors and measured performance. Rules: M01, M02, M03, M04, M05, M06, M07, M08, M09, M10, M11, M12, M13, M14. Read this part's own token and rule payload when you build it; each carries the common foundations and this adapter only.
- **Watch app** (watch-app) — A simplified Cosmos for SIMT Wear OS: round-screen instruments, accessible rotary input, concise tools and battery-aware ambient states. Rules: W01, W02, W03, W04, W05, W06, W07, W08, W09, W10, W11, W12. Read this part's own token and rule payload when you build it; each carries the common foundations and this adapter only.

## Before you call it done

- The primary object, its state and the next action are readable in the first viewport in grayscale (C01).
- Every primary surface has its first-load, empty, denied, offline, error, unavailable and success treatment designed (C16).
- Every text and boundary pair you introduced is measured composited, not assumed (C05).
- Keyboard, touch, screen reader and — on watch — rotary reach every control; focus is visible and never clipped (C19, W04).
- English, French, Spanish and Arabic RTL were checked with long content; geography, north and compass mathematics are identical in both directions (C20).
- The numbers above are met with a recorded measurement: route, build, device, browser or OS, network, locale, motion tier, method (C23).

## Where the truth lives

- [Specification index](https://simt.space/cosmos-design/specification.json) — the page and section map with the rule ID in each; read this first.
- [All rules](https://simt.space/cosmos-design/rules.json) — every rule with its requirement and acceptance criterion.
- [Tokens](https://simt.space/cosmos-design/tokens.json) and [token variables](https://simt.space/cosmos-design/tokens.css) — typed values and theme adapters.
- [Composited contrast](https://simt.space/cosmos-design/contrast-pairs.json) — every measured role pair in every theme. Fetch it when you introduce a colour, pair a translucent or gradient surface, or check a theme; it is not part of the token payloads, because most layout, type and motion work never needs it (C05).
- [Motion motifs](https://simt.space/cosmos-design/motion.json) — the named choreographies, each with its trigger, steps, allowed properties, duration, easing, three tiers and CSS, Compose and Wear mapping, plus the sampled curve values a port reproduces. Fetch it when you animate a state change, when you choose between the tiers or decide whether a change animates at all, or when you port a transition to a native toolkit and prove curve parity; it is not part of the token payloads, because most layout, type and motion work needs no motif (C31).
- [Complete specification in Markdown](https://simt.space/cosmos-design/specification.md).
- Per-part payloads — `https://simt.space/cosmos-design/{part}/tokens.json` and `https://simt.space/cosmos-design/{part}/rules.json`, where `{part}` is one of `web-page`, `web-app`, `mobile-app`, `watch-app`. Fetch these instead of the canonical union when you know the platform: same common foundations, one adapter.
- [Component index](https://simt.space/cosmos-design/components.json) — for every component the rule IDs it inherits, the theme roles, layer and corner role it consumes, the states it can be in, the states it has opted out of and why, the motif that animates it and the counterpart that already exists in each product, with a slice per platform part. Fetch it when you start a component and need to know which rules apply to the thing in front of you; it carries references only, so a treatment is still read from the rule (C12).
- [Release record template](https://simt.space/cosmos-design/release-template.json) — the evidence a conformance claim needs.