Reference / Version 0.2

Surfaces Design System

Simple Slab identity, public-page tokens, and proof-oriented patterns for reviewable generated UI.

Owner / Product SystemsUpdated / July 5, 2026Scope / public reference

16 px

24 px

32 px

Reverse

App icon

Reference status

Current

Owner: Product Systems
Updated: July 5, 2026
Scope: Simple Slab identity, public-page tokens, generated-screen review patterns, resources
Evidence: Simple Slab assets, token values, review-copy checks, and responsive checks

Primary resources

Downloads

Surfaces brand kit Wordmark Simple Slab mark Reverse mark

Current Reference

Stable source material for the Simple Slab identity and generated-screen review.

Owner: Product Systems
Review date: July 5, 2026
Proof scope: Assets, tokens, review copy, responsive layout
Resource scope: Simple Slab SVGs, favicon, app icon, CSS, JSON

Overview

Start with the active identity, then make review context visible.

Dedicated pages cover the Simple Slab mark, public-page tokens, review components, generated-screen patterns, resources, and governance.

IdentitySimple Slab mark, lockups, sizing, clearspace, and misuse.FoundationsActive colors, type, spacing, rules, captions, and voice.TokensBrand primitives, public-page roles, CSS variables, and review signals.ComponentsButtons, media cards, tags, focus, and review-friendly states.PatternsGenerated-screen comparison, visible rationale, owner, and next step.ResourcesActive assets, token files, and the versioned brand kit.GovernanceOwnership, update cadence, proof scope, and public boundaries.ChangelogRelease notes, version policy, and deprecation rules.

Identity

Use the approved files without redrawing the identity.

Use the Simple Slab files as exported. Keep the three slab coordinates intact across mark, favicon, app icon, and lockups.

Minimum sizes

Use 16 px for favicon, 24 px for small mark, 128 px for horizontal lockup, and 96 px for stacked lockup.

Clearspace

Keep at least one mark width around lockups. In dense chrome, keep one-half mark width around the mark.

Foundations

A restrained palette for review, not decoration.

Brand surfaces use the Simple Slab palette. Proof Cyan appears only when it marks evidence, focus, or an active review signal.

Ink#0B0D0E

Ivory#F7F6F2

Nickel#8B9096

Rule#DAD7CF

Paper#FFFFFF

Muted text#3C4145

Subtle text#555B60

Proof cyan#00A7C8

Patterns

Generated screens should carry their rationale.

The core pattern connects source, behavior, owner, open question, and next step before the work moves into handoff.

Review RecordGenerated renewal handoff

Screen: Generated renewal handoff
Owner: Design Systems
Source: Renewal policy and product terms
Behavior: Keep state, evidence, and next step visible
Question: Which customer term survives here?
Next step: Revise the screen before sharing

Evidence Table

Check	Result	Status
Source	Visible	Review
Behavior	Visible	Review
Owner	Visible	Review
Next	Visible	Review

Resources

Download the approved assets and token files from this reference.

Assets are scoped under the design-system path to keep product files and public reference files separate.

Surfaces brand kitZIP / Version 0.2

Complete handoff package for approved identity assets and token files.

WordmarkSVG / Primary identity

Use when space allows the name to carry the identity.

Simple Slab markSVG / Constrained use

Use for favicons, app icons, avatars, and dense chrome.

Reverse markSVG / Dark surfaces

Use on ink or dark graphite backgrounds only.

Small markSVG / 16-24 px

Use for favicon, 16 px, and 24 px placements where the full lockup loses clarity.

Mono markSVG / One color

Use for print, engraving, labels, and one-color reproduction.