Service SPCMN · canonical reference

Pebble

A quiet, rounded, accessible design language with strong typography, pill actions, soft surfaces and an organic visual character.

One system. One visual language.

Pebble is the reference for product teams, applications and AI coding agents. This page is the visual reference; the accompanying Markdown and token files are the implementation contract.

Do not flatten Pebble into generic cards, plain documentation chrome or arbitrary component libraries. Preserve its proportions, hierarchy, motion and restraint.

Canonical files

DESIGN-SYSTEM.md
Full visual and interaction specification.

AI-RULES.md
Machine-facing implementation rules.

tokens/tokens.json
Portable design tokens.

Foundations

Brand, neutral and semantic primitives.

Brand primary#444549
Brand accent#FFA1BD · one true CTA
Brand accent 2#6AB796 · secondary accent
Surface#EEF0EC
Page background#DFE1DB
Text#1C2333

Components

Live examples of the core Pebble vocabulary.

Buttons

<button class="btn accent">Primary action</button>

Forms & feedback

Visible labels are required. Placeholder text is never the only label.
Your changes have been saved.
This session will expire soon.

Identity & navigation

P
✓ VerifiedAccount

Patterns

Structure and interaction decisions that should remain consistent.

AuthenticationPasskey-first hierarchy, magic link, then password fallback. Model auth as a state machine, not scattered booleans.
NavigationOne top-level bar. Active navigation is a plain white pill. Sub-navigation lives inside the page surface.
Cards & panelsQuiet white cards, thin borders, 16px radius and generous padding. Avoid heavy shadows and visual noise.
IconsUse one coherent SVG family: 24px viewBox, currentColor, rounded 2–2.4px strokes. Never use emoji as UI icons.

Accessibility is part of Pebble

KeyboardAll controls are reachable and have a clear :focus-visible state.
TouchInteractive targets are at least 44px where practical.
MotionOrganic animation respects prefers-reduced-motion.
SemanticsUse native HTML first, correct labels and programmatic error associations.

AI implementation contract

When an AI agent changes a Pebble product, it must read docs/AI-RULES.md first and then the relevant section of docs/DESIGN-SYSTEM.md.

DO: reuse Pebble components and semantic tokens. DO: make the smallest valid change. DO: validate keyboard, focus-visible, contrast, reduced motion, dark mode and mobile. NEVER: introduce arbitrary colours, radii, shadows or spacing. NEVER: replace SVG icons with emoji or Unicode symbols. NEVER: remove the organic auth hero; only disable its motion for reduced-motion. NEVER: make colour the only carrier of status.