Quiet Sky

Implementation notes

Platforms

Web defines the primary Quiet Sky specification. Mobile and Electron are documented only to the extent that current source proves adoption.

Production-backedVerified 2026-09-03

Primary specification

Web

Tailwind CSS v4 maps runtime semantics into stable utilities. Dark is the default and light is selected with a data attribute.

Canonical scope

Theme contract

:root is dark; [data-theme='light'] overrides runtime values while utilities remain unchanged.

web/src/app/globals.css

Utility contract

Quiet Sky color, radius, type, spacing, shadow, and motion values map through Tailwind’s @theme namespaces.

web/src/app/globals.css

Typography

Onest is available and canonical. Collision-safe utilities protect the Quiet Sky scale while legacy Inter rules remain.

web/src/app/globals.css

Icons & logo

Lucide React is the current interface icon source. The ai.com vector geometry comes from the shared logo component.

web/src/components/core/icon/AICLogo.tsx

Scoped adoption

Mobile

Mobile contains current Quiet Sky geometry and Onest usage, but its broad color surface is still a mixed migration layer.

Partial adoption

Theme provider

NativeWind variables are generated from colorThemes; React Navigation receives the same current theme. System/light/dark preference is persisted and synchronized before paint. The root background remains a two-stop linear gradient.

mobile/src/providers/ThemeProvider.tsx · mobile/src/hooks/useTheme.ts

Shape

The exported radius scale matches Quiet Sky: 8, 12, 14, 16, 20, and 99.

mobile/src/theme.ts

Spacing

A 4px base scale is available from 4 through 24px, with separate 12px chat and 20px container values.

mobile/src/theme.ts

Typography

Onest weights and the full Quiet Sky scale are exported, and text scaling is capped at 1.3 for fixed-height controls. Direct use of the Quiet Sky typography exports was not verified; large legacy Inter typography remains.

mobile/src/theme.ts

Radius collision

The JavaScript Quiet Sky card radius is 16px, while Tailwind’s existing rounded-card still resolves to the legacy 28px treatment.

mobile/src/theme.ts · mobile/tailwind.config.js

Color migration

Deprecated Sandy/Caishen colors and multicolor gradients remain widely referenced. They are deviations, not mobile additions to Quiet Sky.

Legacy residue

Scoped adoption

Electron

Electron has a dedicated Quiet Sky CSS generator, but the updater is its only verified consumer. Login, home, and session loading still use an incompatible legacy bundle.

Updater-only adoption

Current local-page layer

Semantic dark/light values, Onest, focus behavior, 8/14/16/20/99px radii, and local ds- components are emitted as self-contained CSS. Spacing remains literal and the 12px control radius is absent.

electron/src/quietSkyTokens.ts

Verified consumer

The updater UI is the only current page verified to call quietSkyBaseCss().

electron/src/updaterView.ts

Native theme behavior

Pages follow prefers-color-scheme, which Electron drives from nativeTheme; an explicit data-theme attribute can pin a page.

electron/src/quietSkyTokens.ts

Offline font

The latin Onest subset is embedded as a data URL. System fonts are the fallback when the asset is unavailable.

electron/src/quietSkyTokens.ts · electron/src/assets.ts

Legacy local pages

Login, home, and session-loading still consume the older Inter-based contract with different color and type semantics.

electron/src/designTokens.ts

Standalone utilities

Share border, screen-share picker, find bar, downloads, and preload-owned UI bypass both token systems with local hard-coded styling.

electron/src/shareBorderWindow.ts · screenSharePicker.ts · findBar.ts · downloads.ts · preload.ts