← Prototype hub
ai.com ai.com

Archived · Quiet Sky 2026 proposal

One proposed system for every product surface.

This preserved migration-era package contains proposed semantics, assets, references, and component guidance. It is historical context, not the current design-system source of truth.

Archived proposal Light + dark 106 icons Zero runtime dependencies

Start here

Living reference

The component catalog is the fastest way into the system. Use the written specification when implementing behavior, accessibility, density, or product-specific patterns.

Interactive catalog

Application Design System

Every product component, page pattern, and state in both themes—from buttons and inputs through agent timelines, checkpoints, tables, and charts.

Themeable HTML referenceOpen catalog ↗ Spec of record

Implementation specification

Binding rules for foundations, app shell, components, writing, accessibility, motion, layering, input, and data.

Parts A–MRead ↗

Foundation

Tokens & assets

Components consume semantic variables only. The portable CSS mirrors the current Quiet Sky block in the frontend without its shadcn, Icing, meeting, or legacy compatibility layers.

Plain CSS tokens Tailwind v4 tokens Icon manifest SVG sprite Engineering handoff

Reference

Brand & foundations

Visual references for the core system, the ai.com mark, the icon family, and agent identity.

Foundations

Color, type, space & motion

The foundational Quiet Sky reference in light and dark.

Visual referenceOpen ↗ Identity

The logotype

Construction, optical sizes, clear space, minimum sizes, and misuse.

Logo masters includedOpen ↗ Iconography

The icon family

106 currentColor drawings, one keyline system, four interface sizes.

SVG + sprite + manifestOpen ↗ Agent identity

Telling two agents apart

Options for preserving the dot while making multiple agents legible.

ExplorationOpen ↗ Data visualization

Validated chart ramps

Single-hue ordinal ramps and the checks required before changing them.

Light + darkRead ↗

Rules

The short version

These are the constraints that define the system at a glance. The full specification is in app-design-system.md.

  • One color carries the brand.Cyan signals presence, selection, checkpoints, and links. It is never decoration or a button fill.
  • Use semantic tokens.Product components never consume primitives or raw hex values.
  • Onest is the interface.Every product label and number uses Onest; monospace is reserved for authored code.
  • Dark mode stays flat.Aurora, grain, and horizon glow belong to marketing surfaces, not the product shell.
  • State needs words and structure.Danger and verified colors are state only, always paired with labels or icons.
  • No gradients.Hierarchy comes from type, spacing, surfaces, and one meaningful accent.