Cross-platform design system · v1.0

Cosmos Design System

A warm spatial language for interfaces that orient, reveal, and respond. Built for native apps, web apps, websites, maps, instruments, and every screen between.

Explore the system Implementation tokens

Core palette: Deep Space
Base rhythm: 4 units
Motion tiers: 3
Accessibility: WCAG 2.2 AA

Scroll through the system

00 / Identity

Wonder is a consequence of useful structure.

Cosmos is not a space skin. Every luminous detail carries location, relationship, time, precision, or state.

01
Warm depth
Aubergine voids and restrained glass establish atmosphere without hiding content.
02
Semantic light
Every accent has a stable job. Color communicates before it decorates.
03
Spatial structure
Orbits, apertures, and reticles make relationships visible and navigable.
04
Instrument clarity
Data is calm, aligned, explicit, and readable under motion or bright light.
05
Responsive presence
Motion reacts to meaning, then disappears when access, power, or focus requires it.
06
Human control
People always know where they are, what changed, and what action remains safe.

01 / Foundations

Deep Space, lit with purpose.

Warm near-black anchors preserve depth. Six signal channels create meaning without collapsing the interface into one accent.

One dominant channel. Two supporting channels. Infinite combinations, stable meaning.

Void#120A14Primary field

Void Edge#1F1126Depth gradient

Hull#1D1220Standard surface

Hull Raised#2A1830Selected surface

Hull Highest#352040Highest surface

Ember · #FF8C42

Primary agency

Create, continue, lock, commit. Never passive decoration everywhere.

Rose · #FF7E8A

Social energy

Attention, participation, and secondary active states. Not generic error.

Violet · #C9A0FF

Identity

Roles, creativity, and transformation. Not every navigation selection.

Gold · #FFC766

Focus & precision

Keyboard focus, bearing, time, favorite, and exceptional value.

Cyan · #00E5FF

Live signal

Connected, scanning, located, transmitting. Its scarcity creates urgency.

Moss · #83B692

Natural stability

Outdoors, parks, trails, and calm positive environmental state.

Ink

#FFF8F217.2:1

Muted

#BBAEBB8.5:1

Faint

#9A8B9A5.6:1

Dim

#90839A5.1:1

Ratios show the lower contrast against Hull; every text step also clears WCAG AA against Void. No text token is decorative-only.

Default

Deep Space

Aubergine void, warm ink, and the complete semantic spectrum.

#120A14 · #1D1220 · #FFF8F2

Light

Daylight Nebula

A warm dawn field, never sterile white with dark-mode accents pasted over it.

#FFF6EC · #FFF9F2 · #241A14

Operational

Astronomy Red

Preserves dark adaptation. Meaning uses icon, label, shape, and pattern—not hue alone.

#0A0000 · #1A0000 · #8B0000

02 / Type & geometry

Instrument when precise. Human when read.

Geometric display type makes metrics decisive; a highly legible body family keeps explanation effortless.

DisplaySpace Grotesk · 500—700

Orient the impossible.

287.4°NW · 12.8 km

BodySource Sans 3 / platform sans · 400—700

Clear language keeps complex spatial tasks approachable. Labels stay visible, units stay adjacent, and technical precision never becomes visual noise.

أنت مركز عالمك

Arabic · El Messiri for every role

4-unit rhythm

All spacing resolves to a compact, predictable scale.

Role-based radius

Controlled geometry, adapted to platform density.

Control6px web · 10dp native

Record8px web · 14dp native

Panel12px web · 20dp native

PillTags, filters, modes

03 / Surface

Look through the canopy.

Cosmos keeps the environment continuous. A surface appears only when content needs grouping, focus, scrolling, or separation.

Hull at 86—94% opacity
One low-contrast structural border
Ember-to-violet light only for focus or selection
No required real-time blur
No cards nested inside cards

1Continuous field 2Translucent hull 3Semantic signal

Semantic layering

Depth has one global order.

01CanvasMap / camera1
02ChromeControls / signals3
03SheetEdge detail20
04NavigationRail / dock50
05ModalDialog / scrim100
06ToastTransient system200

04 / Spatial vocabulary

A signal, not a pin.

The aperture unifies location, category, time, participation, precision, and selection in one inspectable object.

Current stateLive · full bright wave

Aperture

Locatable or inspectable signal.

Orbit

Relationship, membership, cycle.

Reticle

Precision and active inspection.

Wave

Time and live transmission.

Meridian

Orientation and scale.

Corona

Active primary source.

05 / Components

Quiet controls. Decisive states.

Controls hold stable geometry while state changes through boundary, tone, label, and iconography—not color alone.

Commands

44px web · 48dp native

Form fields

Persistent label · linked hint

Target nameVisible to people you invite

CoordinateChoose approximate or exact precision

Compact states

Shape + label + color

Live ✓ Selected ! Approximate ✓ Saved Unavailable

Focus is gold

Never confused with selection

Keyboard focus remains unmistakable

Every primary surface must define the complete state family.
State	Preserve	Communicate	Never
Loading	Shell and dimensions	Progress and live status	Replace the whole route
Empty	Navigation and filters	Why empty + next action	Use decorative filler
Denied	Safe context	Boundary + available path	Leak restricted metadata
Degraded	Last-good safe data	Freshness + recovery	Present stale as live
Error	Safe input	Cause class + next action	Expose provider messages
Success	Task context	Brief confirmation	Block progress with celebration

06 / Operational patterns

The system in motion.

Atmosphere, controls, overlays, navigation, media, maps, fields, and scrolling share one interaction contract across native and web products.

06.1 / Edge stars

Random at the edge. Calm at the center.

Every screen, panel, sheet, and modal background owns one deterministic star layer. Stars occupy only the outer 20% band, leaving the central 60 × 60% clear for content.

Screen density: area ÷ 7,500 · clamp 24—160
Dialog density: area ÷ 10,000 · clamp 12—72
Color mix: ≥70% warm white · ≤30% accents
Full motion: one layer · 90—160s · ≤1.5% travel

20%Clear content field60 × 60%

One cached layer. Never one element or animation per star.

06.2 / Command response

Buttons behave like instruments.

Hover strengthens the top light once. Press contracts the visual to 0.98 without moving its hit target. Release restores with Transform easing; Full may emit one short ring.

Activate Synchronize to inspect the asynchronous primary state.

06.3 / Canopy & opening

Light explains surface purpose.

Rich content uses a multicolor top spectrum. Basic decisions use one semantic hue with a small same-color gradient. Surface and scrim have separate, interruptible transitions.

Dialog260ms · y 18→0 · scale .96→1Panel320ms · logical edge→0Exit180—220ms

Content dialog

Target intelligence

Long content · map · figure · actions

Basic confirm

Save this target?

One decision · one accent

Sheet / panelRecord / card

Scrim 220Dialog 260Panel 320

06.5 / Context banner

Lead with the object, then the controls.

The top banner scales with available height. Images and maps clip cleanly; figures and SVGs may overflow only toward content, fading behind it as a decorative continuation.

Expanded: clamp(160px, 28%, 320px)
Compact: clamp(136px, 24svh, 240px)
Short height: ≤36% of usable surface
Figure overflow: ≤25% banner height, content edge only

06.6 / Map vector system

Geography stays quiet. Intent stays bright.

Petrol ground and teal water hold context; warm roads, violet rail, Gold routes, and semantic apertures form the actionable hierarchy.

GroundWaterParksRoadRailRouteUserExactApproximate

Road 2—4pxRoute 3—6px + casingExact 18px · selected 30pxClusters 32 / 40 / 48px

06.7 / Fields & overflow

Clear text. Reveal hidden content.

Every nonempty one-line field gets a trailing Clear action. Every bounded scroll region gets a true alpha edge fade and a small directional arrow only where more content exists.

Search destinationsThe Clear action disappears when the value is empty.

SignalsRoutesPlacesOffline areasSatellite passesSaved targetsCalibration

48px horizontal / 28px vertical fade · 6px arrow drift · 1,200ms out-and-back loop.

07 / Adaptive composition

The composition adapts. The task does not.

One semantic structure transforms across desktop, phone, foldable, TV, and Wear. Cosmos never forks into separate feature logic.

Expanded web≥ 921px

112px command rail · full workspace · right edge detail

Compact web320—920px

Safe-area dock · 52px create aperture · attached sheet

Tabletop foldPosture-aware

287.4°Controls stay in the usable half

Instrument above hinge · readout and controls below

Use logical properties and safe-area insets.

Reserve stable tracks for dynamic content.

Keep the primary canvas inspectable.

Adapt composition, not merely scale.

≥ 1024Full desktop + authorized operations

921—1023112px rail + workspace

701—920Orbital dock + adaptive sheets

431—700Reduced density, full targets

320—430Single track, deliberate wrap

08 / Motion

Motion explains the orbit.

Animation communicates arrival, selection, direction, hierarchy, progress, or changed spatial context. Nothing bobs just to look alive.

150 msFeedback

300 msState / entrance

500 msSpatial context only

Entrancecubic-bezier(0.16, 0.84, 0.44, 1)

Exitcubic-bezier(0.4, 0, 0.7, 0.2)

Transformcubic-bezier(0.2, 0, 0, 1)

Full

Atmosphere responds

Parallax, slow nebula, signal waves, staggered entrance.

Reduced

Meaning remains

Essential opacity and transform. No ambient loops.

Static

Task is identical

Immediate state changes and cached atmosphere.

09 / Inclusive by construction

No one is outside the orbit.

Accessibility is part of the visual identity: high contrast, stable geometry, calm motion, complete language support, and meaning that never depends on a single sense.

4.5:1

Text contrast

Normal text minimum. 3:1 for large text and meaningful boundaries.

44 / 48

Target size

44px web and 48dp native minimum interactive targets.

400%

Web reflow

No two-dimensional page scrolling outside true map and data surfaces.

2.0×

Native type

Android layouts remain useful at font scale 2.0.

RTL

Logical layout

Reading flow mirrors. Geography, north, coordinates, and sensor math do not.

3 tiers

Motion choice

User preference, lifecycle, power, and capability choose the effective tier.

French interface

Rendez-vous à 48.8566° N, 2.3522° E à 18:30.

واجهة عربية

نقطة اللقاء 48.8566° N, 2.3522° E الساعة 18:30.

Authored text and coordinates are isolated. Punctuation and numeric order remain intact.

10 / Implementation

Translate intent, not pixels.

The semantic contract is shared. Density, easing, and platform primitives adapt without changing meaning.

:root {
  --cosmos-void: #120a14;
  --cosmos-hull: #1d1220;
  --cosmos-ember: #ff8c42;
  --cosmos-rose: #ff7e8a;
  --cosmos-violet: #c9a0ff;
  --cosmos-gold: #ffc766;
  --cosmos-cyan: #00e5ff;
  --cosmos-ink: #fff8f2;
  --cosmos-space: 4px;
  --cosmos-fast: 150ms;
  --cosmos-medium: 300ms;
  --cosmos-slow: 500ms;
}

val Void = Color(0xFF120A14)
val Hull = Color(0xFF1D1220)
val SolarEmber = Color(0xFFFF8C42)
val NebulaRose = Color(0xFFFF7E8A)
val CosmicViolet = Color(0xFFC9A0FF)
val StarlightGold = Color(0xFFFFC766)
val PulsarCyan = Color(0xFF00E5FF)

object CosmosMotion {
    const val Fast = 150
    const val Medium = 300
    const val Slow = 500
}

Cosmos surface contract
1. Primary task precedes decoration.
2. One dominant accent, at most two supporting.
3. Spatial motifs carry real information.
4. State never depends on color alone.
5. Dynamic content preserves stable geometry.
6. Compact, expanded, RTL, large text, and reduced motion are designed.
7. Loading, empty, denied, degraded, error, and success are complete.
8. The lowest visual tier preserves the identical task.

Web

Dense, structural geometry

4 / 6 / 8 / 12px radii
44px target minimum
Logical CSS properties
Forced-colors fallback

Native mobile

Tactile, adaptive surfaces

8 / 10 / 14 / 20dp radii
48dp target minimum
Window class + posture
Performance-derived effects

Wear & TV

Glanceable and steerable

One metric per viewport
Rotary / D-pad complete
Visible focus
Static ambient tier

11 / Guardrails

Cosmos is not “space themed.”

Reject visual shortcuts that imitate atmosphere while losing hierarchy, clarity, or meaning.

Do Make light meaningful

Keep maps and instruments full-bleed
Use cards only for individual records
Let one accent lead the viewport
Preserve hierarchy without animation
Write literal, calm operational copy

Do not Decorate the void

Scatter random stars, bokeh, or gradient orbs
Nest cards or float every section
Use neon cyan as the whole personality
Pulse every action or bob every object
Invent celestial names for ordinary instructions

12 / Reference

Questions, resolved.

What makes an interface recognizably Cosmos?

Warm depth, semantic multicolor light, informative spatial motifs, clear instrumentation, tiered motion, and complete human control. A dark surface with an orange action is not enough.

Can another product use Cosmos?

Yes. The contract is framework-independent. Keep the meanings and constraints; adapt density and native primitives to the platform.

Does every screen need stars and orbits?

Every Cosmos background owns a sparse outer-band star layer, including quiet operational views. Informative spatial motifs such as orbits and reticles appear only when they explain real relationships, location, time, or state.

How many accent colors can a screen use?

Use one dominant channel and at most two supporting channels in a viewport. Data categories may use the full spectrum when every hue has a stable key and non-color distinction.

How does Cosmos handle accessibility and RTL?

It requires WCAG 2.2 AA, non-color meaning, complete input and screen-reader behavior, reduced motion, large-text reflow, logical layout, text isolation, and unchanged geographic semantics.

The central rule

Keep the person at the center.

Imaginative on first sight. Precise during repeated use. Quiet enough that the map, instrument, activity, or person remains the center of attention.

Start implementing Cosmos

Specification status

Target contract, honest migration.

This page defines the normative Cosmos target. Android already implements the core palettes, typography, performance tiers, canopy glass, and a single draw-layer starfield, but its current stars remain disk-wide rather than outer-band. Simt Social implements the shell, dock, aperture, focus, RTL, and overlay foundations while shared production tokens continue converging. Existing drift is migration work, not a second Cosmos variant.