Machine-readable source of truth

Settle visual styling kit — standalone, with navigator.

JSON, YAML, schema, tokens, TypeScript, browser reference pages, and Playwright verification. This packet supersedes the earlier version instead of patching it.

Open canonical JSON Review icon system Review navigator

Core posture

Quiet. Warm. Exact. Already working.

The interface stands in for the quiet work a house used to do, so the visual language must be domestic in tone, operational in hierarchy, and calm under constraint.

No startup dashboard language. No charity cues. No travel-brand imagery. No motivational copy.

What changed in v3

The system now has a defined cross-app navigator for mobile and desktop.

new

No detail loss

The original DOCX is preserved as a semantic JSON dump in the archive.

Package structure

Spec

settle-style-kit.v3.json

Canonical machine-readable design system with foundations, navigator, components, and page blueprints.

JSON

settle-style-kit.v3.yaml

Human-readable mirror of the canonical spec.

YAML

settle-style-kit.v3.schema.json

Validation schema for tools and pipelines.

schema

settle-navigation-graph.json

Graph of destinations, groups, object pivots, and flow edges.

graph

settle-source-traceability.json

Maps decisions back to requirements, brand constraints, and session material.

trace

Implementation

settle.tokens.json / .ts / .css

Design tokens for color, type, motion, radii, layout, and target sizes.

tokens

settle-navigation-controller.ts

Reference state model for shell behavior, app switching, pivots, and privacy mode.

code

settle-icons.ts / icons/* / icon-reference.html

Canonical TypeScript registry, raw SVG directories, and visual review surface for the shared icon system.

icons

*.html

Reference pages for homepage, about, navigator, application surfaces, and icon review.

HTML

playwright/verify.py

Verification harness that renders the pages using Playwright and writes screenshots + report.

playwright

archive/*

Lossless-ish semantic dump of the earlier DOCX plus extracted media.

Icon system

First-class packet layer

Registry, raw assets, and reference page

The packet now treats iconography as a first-class system: the TypeScript registry, raw SVG files, icon tokens, and the icon reference page all move together.

Acceptance posture

Verified placements, not decorative add-ons

Bottom-nav destinations, Capture, app libraries, related-app pivots, app headers, object rows, privacy controls, and status chips are all part of the verification contract.

Reference pages

Foundation

Palette, type discipline, spacing, shape, and motion.

Navigator

Desktop sidebar, mobile bottom bar, app sheet, and object pivots.

Applications

Integrated in-app surfaces showing cross-app movement in context.

Why the packet is structured this way

The product requirements already say the system needs one navigation shell, horizon-based views, offline-critical access, shared objects, and cross-app flows. The brand documents add the constraint that the UI must stay calm, operational, warm, and non-explanatory. The result is a styling kit that includes actual shell behavior instead of stopping at palette and typography.

This packet is intentionally more specific than a mood board. It is close enough to implementation that a UI designer should refine craft inside the system, not reinvent the system.