Tativille OS · Designed after Playtime (1967)

Glass, grid, and a little color.

Concept: 现代主义的玻璃格子城,只有当礼花绽放时才允许颜色介入 — a bleached modernist grid in which color is reserved as event, not decoration.

A two-mode design system inspired by Jacques Tati's Playtime and Eugène Roman's "Tativille" sets: hard 90° geometry, glass-and-chrome neutrals, airport-style signage, and a deliberate shift to a warm, curved, neon "Royal Garden" mode for moments of celebration.

Design Pillars

  • The grid is the protagonist. Architecture composes the page; people are the small saturated figures inside it. Mullion lines (1 px) are visible, never hidden.
  • Color as event. 95% of any glass-mode surface is neutral. Signal accents (green, yellow, red, cyan) appear only on status, focus, and one primary action per view.
  • Two tempos. Long glides (640 ms+) for transitions; sudden snaps (180 ms) for state changes — pneumatic doors, not springs.
  • Royal Garden release. A second mode exists for celebratory surfaces — warm pinks, gold, neon, gentle 2 px curves. Toggle, don't mix.

Core Specifications

Glass palette: Glass-0 (#F4F6F7), Asphalt (#3F4448), Ink (#16181A); accents Signal Green (#3FAE6B), Cab Yellow (#E8B339), Signal Red (#D9342B), Neon Cyan (#5FD8E6).

Royal Garden palette: Cream (#F1E4CB), Rose (#E48BA0), Gold (#C9A24B), Plum (#5C2A3E), Neon (#FF4FA3).

Typography: Inter (UI/display, fallback Neue Haas Grotesk / Helvetica Neue), JetBrains Mono (signage, data, gate numbers).

Spacing: 4 px base unit, 10-step scale (parity with sibling systems).

Motion: --ease-glide cubic-bezier(.22,.61,.36,1) and --ease-snap cubic-bezier(.85,0,.15,1), with durations 180 / 320 / 640 / 1200 ms.

The Two Modes

· 01 · Default

Glass

Cool neutrals only. Hard right angles. Use for office, scheduling, finance, dashboards, settings, airports — anywhere precision should outrank warmth.

· 02 · Event

Royal Garden

Warm cream and rose, gold rules, occasional rotary radius and neon glow. Use sparingly — onboarding finales, success epilogues, marketing pages, the "after-hours" surface.

· 01 ·

Foundations

Color · Glass Mode

Neutral Scale

Glass 0
#F4F6F7 · base
Glass 1
#E6EAEC · panel
Glass 2
#CDD3D6 · mullion
Chrome
#A6ADB1
Smoke
#7A8084 · fg-2
Asphalt
#3F4448 · fg-1
Ink
#16181A · fg-0

Signal Accents

Used on at most ~5 % of any surface — focus rings, single primary action, status pills, link underlines.

Signal Green
#3FAE6B · go · accent
Signal Red
#D9342B · stop · destroy
Cab Yellow
#E8B339 · caution · focus
Neon Cyan
#5FD8E6 · link · poster

Color · Royal Garden Mode

Toggled with the rotary in the top-right. Accents become saturated and warm; the grid disappears; radius steps up to 2 px; one neon shadow becomes available.

Cream
#F1E4CB · base
Rose
#E48BA0
Gold
#C9A24B · rule
Plum
#5C2A3E · fg-0
Neon
#FF4FA3 · accent
Teal
#2E7E7B · secondary

Typography

Type Scale

96 px
All glass.
Display XL · 700
64 px
Quietly modern.
Display L · 700
40 px
A city of cubicles
Display M · 600
28 px
Departures · 14:22
H1 · 600
20 px
Section heading
H2 · 600
16 px
Body copy keeps its distance.
Body · 400
14 px
Secondary context, captions, lists.
Body S · 400
12 px
Fine print and helper labels.
Caption · 400
12 px
Departures · Gate · Floor
Signage · 700 · ALL CAPS

Font Family

  • UI / display: Inter (300, 400, 500, 600, 700, 800). A 21st-century neogrotesque standing in for the late-50s Akzidenz/Helvetica corporate vernacular.
  • Mono / signage / data: JetBrains Mono (400, 500, 700) — gate numbers, timestamps, equipment labels, eyebrow markers.
  • Casing: sentence case for body and headlines; ALL CAPS with +0.16em–+0.22em tracking for signage, eyebrows, and nav.

Spacing & Grid

Spacing Scale (4 px base)

1
4 px
2
8 px
3
12 px
4
16 px
5
24 px
6
32 px
7
48 px
8
64 px
9
96 px
10
128 px

Tativille Module

  • Page module: 96 px square — visible as a faint backdrop grid on body. Disappears in Royal Garden mode.
  • Layout grid: 12 columns · 24 px gutter · 48 px outer margin (desktop).
  • Alignment: Always left. Center reserved for hero; never for forms or lists.

Borders, Shadows, Radii

Border Radius

0
Default
cards · buttons
1 px
Code · chips
2 px
Royal Garden only
rotary
Theme dial · dot

Shadows

shadow-pane
1 px mullion
shadow-mullion
row divider
shadow-float
hover lift
shadow-neon
Royal Garden only

Borders

  • 1 px Glass-2 hairlines for surface edges and dividers — the architectural mullion.
  • 1 px Ink for emphasis (ghost button, theme toggle).
  • No colored borders except focus (Cab Yellow) and Royal Garden Gold rules.
  • No glows in glass mode. shadow-neon is forbidden outside Royal Garden.

Backgrounds & Imagery

  • Flat fills first. Glass-0 covers ~95 % of glass-mode surface; Cream covers ~95 % of Royal Garden surface.
  • Visible module grid on body backdrop in glass mode (96 × 96 px, 18 % opacity).
  • No gradients in glass mode. One acceptable gradient: the Royal Garden burst (cream → rose → gold → neon, horizontal).
  • Photography: deep-focus, symmetrical, architectural; people small in the frame; bleached daylight or sodium-lamp interior.
  • No textures, no illustrations, no emoji. Pictograms only.
· 02 ·

Components

Pneumatic Buttons

Primary

Ghost

Signal

<button class="btn btn-primary">Open the door</button> <button class="btn btn-ghost">Read the directory</button> <button class="btn btn-signal">Departure cleared</button>

Pneumatic underline. The 1 px line after the label extends from 14 px → 22 px on hover, on the --ease-snap curve. No translate, no scale, no shadow swell.

Cubicle Cards

· 01 · Floor 03

Office cubicle

Glass partitions, modular partition grid, one chair (signal-green).

· 02 · Floor 04

Rotary lobby

Selected. Curves only enter when narrative requires it — see Royal Garden mode.

· 03 · Roof

Departures hall

Open volume, deep focus, no single focal point — multiple gags share the frame.

Directory List · Airport Board

All-caps mono labels, dot leaders, signal-color arrows, gate column right-aligned. Use for navigation indices, schedules, file directories, build lists.

· 01 ·
Foundations
→
A 12
· 02 ·
Components
→
B 04
· 03 ·
Motion
→
B 09
· 04 ·
Pictograms
→
C 02
· 05 ·
Royal Garden
⤴
— —

Pictogram Badges

Lobby
Office
Visitor
This way
14:22

Status Chips

DEPARTING CLEARED HOLD · 04 · DRAFT STOP

Input Fields

> assigned
Letters and hyphens.
> gate closes at 14:20

Top Navigation

Tativille OS
Foundations
Components
Motion
> 64 px · backdrop-blur(12px) · hairline border-bottom · active link underlined in signal-green

Logo & Mark

Tativille OS

The mark is a square inside a square — a window in a curtain wall, the smallest module of Tativille. Never tinted with signal colors. Stroke width fixed at 1.5 px regardless of size. Minimum clear space = 1 inner-square.

· 03 ·

Motion

Motion Tokens

--ease-glide: cubic-bezier(.22,.61,.36,1) ← long Tati translate --ease-snap: cubic-bezier(.85,0,.15,1) ← pneumatic door --ease-std: cubic-bezier(.4,0,.2,1) ← incidental UI --dur-hiss: 180ms ← snap, pressure release --dur-step: 320ms ← UI state change --dur-glide: 640ms ← reveal, translate --dur-act3: 1200ms ← Royal Garden flood

Patterns

· 01 · Long glide — figure crossing a hall
· 02 · Pneumatic snap — door opening / closing
· 03 · Royal Garden burst — color flood

Motion Rules

  • Two tempos only. If something is changing state (open/close, on/off, expanded/collapsed), use --ease-snap + --dur-hiss. If something is moving through space (slide, reveal, scroll-in), use --ease-glide + --dur-glide.
  • Long translates. Reveals translate 16–32 px on the glide curve. Never scale, never spring.
  • Pneumatic underlines. Buttons grow a 1 px line from 14 → 22 px on hover (snap). Inputs underline thickens 1 → 2 px on focus (snap).
  • Royal Garden flood. Theme switch animates token-cascade over --dur-act3 (1200 ms) — color saturates, gridlines fade, radius softens. Reserved for the toggle itself; never as content motion.
  • Never: overshoot, wobble, rotating spinners, parallax, scale-up hover.
  • Reduced motion: respect prefers-reduced-motion; replace glides and bursts with instant token swaps.
· 04 ·

Pictograms

Pictogram System

Tativille speaks in pictograms — airport-style mono-line glyphs. The vocabulary is geometric (squares, circles, right angles, arrows), never illustrative.

Specifications

  • Default size: 24 × 24 px (label inline) or 28 × 28 px (badge stack).
  • Stroke width: 1.5 — fixed at all sizes. Thin enough to read as line, thick enough to hold at 16 px.
  • Color: currentColor. Pictograms inherit from the surrounding text role.
  • Fill: always none. Line-only.
  • Endcaps: square joins, square caps. No rounded.

Recommended source

Lucide (lucide.dev) — open, geometric, line-only — overrides default stroke from 2 to 1.5.

<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> <script>lucide.createIcons({ "stroke-width": 1.5 });</script> <i data-lucide="arrow-right" width="24" height="24"></i>

Acceptable Typographic Symbols

  • → ← ↑ ↓ ⤴ ⤵ — directional arrows in directories and signage.
  • · — middle dot as separator and as section marker (· 01 ·).
  • — — em-dash for asides; never two hyphens.
  • : — colon for time and gate notation only (14:22, B-04).

What NOT to use

  • Emoji. Ever. Tativille is monochrome by design.
  • Filled or duotone icons. Line-only.
  • Rounded icon sets. Square joins everywhere.
  • Decorative unicode (★ ♥ ✓) as UI iconography.
· 05 ·

Voice & Tone

Content Fundamentals

Voice: deadpan, polite, slightly bureaucratic. Imagine signage in a 1965 international airport — clear, neutral, never urgent.

Writing Guidelines

  • Casing. Sentence case for body and headlines. ALL CAPS reserved for nav, eyebrows, status chips, signage labels (tracking +0.16 to +0.22 em).
  • Person. Second person ("you") in product copy. Third-person, infinitive on signage ("To exit, push door").
  • Numbers. Arabic numerals throughout. Use a thin space between number and unit: 14 ms, 96 px, 1920 × 1080.
  • Punctuation. En-dashes for ranges (08–12); em-dashes for asides — like this. Avoid exclamation points except in Royal Garden.
  • Emoji. Never.

Copy Examples

Hero & Navigation (Glass mode)

Hero: All glass. Quietly modern.
Sub: A design system for interfaces that prefer architecture to decoration.
CTA: Open the door · Read the directory

Empty States & Errors

Empty state: Nothing on this floor yet. Add a record, or take the lift up.
Error: Door held open. The gate did not respond. Retry in 5 s.
Success (glass): Cleared. Saved at 14:22.
Success (Royal Garden): And there it is. Welcome to the rest of the evening.

Status & Confirmation

Status: Floor 03 · Gate B-04 · 14:22
Confirmation: Schedule saved. View Departures · 14:22.
Warning: Network latency detected. The gate may close before sync.
Help text: Visitor name uses letters and hyphens.

What to avoid

  • Corporate warmth ("We're so excited!") — except inside Royal Garden mode.
  • Vague qualifiers ("simply", "easily", "just").
  • Exclamation points in glass mode.
  • Anthropomorphizing the system ("I'll fetch that for you").

Layout Conventions

  • Top nav 64 px, sticky, hairline-bottom, backdrop-blur.
  • Numeric markers · 01 · · 02 · precede every major section. Set in mono.
  • Gate-style meta can sit flush in corners (top-right timestamp, bottom-left coordinates), set in mono signage.
  • Default alignment is left. Center is reserved for hero only.
  • Royal Garden may break these rules — that is the point.