Expression

Typeramp

Canvas

Mode

Motion

Expression 01

Play

Warm, welcoming, and expressive—without getting in the way.

1440 px canvas

Studio Series · No. 01

Make room for the unexpected.

A collection of spaces, objects, and small rituals that make ordinary days feel considered.

Quiet form

Bold interruption

01 A little tension keeps a composition alive.

Selected pieces

Objects with a point of view

Useful first. Memorable second. Never anonymous.

A—01

Frame Chair

Oak, woven cord

B—07

Signal Lamp

Powder-coated steel

“

Good design leaves enough space for life to happen.

Field note 14

Balloon StudioTool

Product expression

Linked productTypewriter/Writing workspace

Content · Play

TypewriterThe Shape of Leaving⌄Saved ML

MANUSCRIPT

Chapter 6

CURRENT CHAPTER

A light left on

Elena returns to the house expecting silence, but finds the kitchen exactly as she remembers it.

24242424

Tool shellProduct content · independently expressed

SelectedCurrent chapter

Component

Writing workspace / Content / Current chapter

Layout −

Direction

PaddingIndependent sides

Top Right Current
chapter Bottom Left

Gap

Type ramp

Source tokencard.padding.comfortable

References

Airbnbinteraction

Untitled UIcomponents

Notionrestraint

Semantic color

Ink

Paper

Accent

Joy

Type roles

Playfair + Inter

Display 72/79 · Body 16/25 · Label 14/18

Component states

Enabled

Motion character

Measured ease480 ms

Principle 04

Joy is episodic, not ambient.

Keep it to a dull roar.

Foundation · Text behavior

Text that adapts.

These rules keep content readable as typefaces, screen sizes, languages, and user settings change.

01Airbnb

Fluid product copy and generous responsive hierarchy.

02ChatGPT

Structured answers, readable measures, citations, and code.

03GOV.UK

Plain hierarchy that remains legible across devices.

04GitHub Primer

Explicit truncation for genuinely constrained utility text.

Reflow before you truncate.

Let text wrap and containers grow whenever possible. If a visible label must be shortened, keep the complete accessible name available.

01 · DisplayBalance 2–5 lines

A better way forwardEin besserer und gemeinsamer Weg in die Zukunft

Make room for the unexpected.Schaffen Sie Raum für das Unerwartete und wirklich Bedeutungsvolle.

Ideas need enough space to become clear.Gute Ideen benötigen ausreichend Raum, damit sie verständlich, nützlich und gemeinsam überprüfbar werden.

02 · ControlsGrow or wrap

Send a copy to collaboratorsEine vollständige Kopie an alle beteiligten Mitarbeitenden senden

03 · Technical stringsOwn the overflow

Filename: Balloon-design-system_architecture_review-final-final-v19-with-localization-notes.pdf
URL: https://balloon.design/projects/frameset/evidence-and-provenance/review?approval=required&revision=184029
Identifier: evt_01JYQ9Q1V2F4M7A8P3K6D0N5RX

const decision = await review({
  status: "human_approval_required",
  preserveMeaning: true
});

04 · Progressive disclosureNo dead ellipses

Recommendation

Apply Editorial to the writing workflow

Editorial is the strongest starting point because its quieter hierarchy supports long-form focus while the shared core preserves every application behavior. Before applying it, review the display scale, paragraph measure, evidence treatment, and mobile navigation across the complete workflow.

05 · ConversationStructured reading

You

What should I review before approving this?

Balloon coach

Review the change as a decision, not just a visual preference.

Confirm the recommendation matches the product goal.
Inspect known, inferred, and unknown evidence.
Check mobile reflow and the longest realistic content.

The system should keep approval separate from execution.

approval !== execution

06 · Dense dataRecompose at narrow widths

Approval queue3 items

ChangeOwnerStatus

Conversation paragraph measureMatthewReview

German navigation expansionRowanReady

Long filename recoveryMatthewBlocked

07 · Decision rulesMeaning wins

Wrap: Headings, body, buttons, labels, messages, descriptions
Recompose: Navigation, tables, comparison layouts, paired actions
Scroll: Code, wide data when relationships require columns
Truncate: Repeated utility text with a reliable full-value path
Never hide: Errors, consent, prices, safety, approval scope, required instructions

Foundation · Padding

Use padding to show what belongs together.

Padding creates space inside a boundary. Balloon names it by role so controls, cards, panels, and pages keep a consistent rhythm without sharing one density.

Spacing vocabulary Name the relationship before choosing the value.

Padding: Space between a container’s boundary and its content.
Owned by the container.
Gap: Space between sibling elements inside a layout.
Owned by the parent layout.
Section spacing: Space between major content regions or changes in task.
Owned by the section wrapper or page layout.
Margin: Outside space attached to one element when its parent cannot own the relationship.
Use as an intentional exception.

Role ladderSix jobs, one base scale

Values stay on Balloon’s four-pixel scale. Products request roles instead of raw numbers.

padding.control: 12 × 16Clickable labels and compact actions
padding.field: 12 × 16Editable and selectable controls
padding.card: 24One bounded content group
padding.panel: 32Drawers, dialogs, and working regions
padding.page: 16 → 80Responsive outer protection
padding.section: 64Major narrative or product regions

Live compositionDensity changes roles together

The controls above change the named roles. They do not scale every empty space mechanically.

padding.panel

padding.card

Review the recommendation.

The evidence stays attached to the decision, with enough room to read without weakening the relationship.

Decision note

Six padding rolesName the job before choosing the value.

Compact, default, and open profiles change density while preserving role and hierarchy.

Controlpadding.control

Action

Compact: 8 × 12
Default: 12 × 16
Open: 12 × 20

Fieldpadding.field

Project nameBalloon

Compact: 8 × 12
Default: 12 × 16
Open: 16 × 20

Cardpadding.card

EvidenceThree sources support this direction.

Compact: 16
Default: 24
Open: 32

Panelpadding.panel

Context panel

Compact: 20
Default: 32
Open: 40

Pagepadding.page

Compact: 16
Medium: 32
Wide: ≤ 80

Sectionpadding.section

Section

Compact: 40
Default: 64
Open: 80

01Reduce from the outside in.

On smaller screens, reduce page and section padding first. Preserve control targets and readable card insets as long as possible.

02Keep nested insets unequal.

The outer container should usually have more padding than the groups inside it. Equal nested insets make boundaries hard to read.

03Use logical properties.

Implement with padding-block and padding-inline. Include safe-area insets when content reaches a device edge.

04Density is local.

Frameset may use compact task regions, Editorial may open reading surfaces, and Play may add room around focal groups. Do not change the entire product at once.

Foundation · Layout

Build responsive structure around the content.

Layout defines containers, columns, gaps, and reflow. The Padding foundation defines the space inside each boundary.

01Airbnb

Human-scale tasks, generous spacing, and progressive disclosure.

Interaction reference

02Untitled UI

Four-pixel base, explicit containers, columns, and gutters.

Grid reference

03Linear

Stable shells, compact work areas, and deliberate overflow.

Application reference

04Stripe

Flexible marketing grids, modular reordering, and controlled overlap.

Marketing reference

Primitive scale4 → 128 px

Use named roles in components; reserve raw values for the system layer.

312

416

624

832

1248

1664

2080

2496

32128

Inline: 4 · 8 · 12
Component: 16 · 20 · 24
Section: 48 · 64 · 80
Page: 16 · 32 · 80

Eight layout patternsShared layouts, expression-specific spacing.

Resize with Canvas above, then compare density and expression.

Container + gutterBounds content without wasting the viewport.

Application shellStable navigation, work, and context regions.

Responsive collectionCards follow content, not a sacred column count.

ConversationReadable dialogue with calm action ownership.

Dashboard + dataCompact where comparison creates value.

Marketing splitStory and image move as coordinated modules.

Illustration safe zoneArt can interrupt; text must remain protected.

Scroll + navigationEvery overflow region has one clear owner.

Foundation · Depth + elevation

Use depth to show hierarchy.

Most surfaces remain flat. Elevation is reserved for sticky, draggable, transient, and modal elements. Borders and surface color must still communicate hierarchy when shadows disappear.

01Untitled UI

A calibrated shadow ladder and a useful warning: elevation loses meaning when everything floats.

Shadow spine

02Atlassian

Sunken, default, raised, and overlay surfaces—plus lighter elevated planes in dark mode.

Semantic model

03Fluent

Shadow and light work together to describe distance, prominence, and focus.

Hierarchy reference

04Apple

Translucent materials can separate foreground and background without a heavy shadow.

Material reference

Elevation stackFive surfaces · six roles

Choose an elevation role from the element’s behavior.

04OverlayTransient over content

03RaisedSticky or draggable

02DefaultResting content

01SunkenGrouped well or canvas

Depth anatomyFour coordinated cues

Each cue has a job; none should become decoration.

Surface tone

Primary dark-mode cue. Elevated planes become slightly lighter.

Boundary

Defines crisp resting layers and preserves shape without shadow.

Shadow

Signals real distance. Larger blur means a more transient layer.

Material

Blur belongs to sticky and overlay surfaces, never ordinary cards.

Live hierarchy testDoes the interface still read when the shadows disappear?

Switch scenes and cues above, then compare expression, light/dark, and canvas.

WorkspaceEvidence review

KnownProduct brief

The recommendation matches the approved expression rules.

InferredExpression fit

Editorial best supports this longer reading workflow.

UnknownMobile behavior

Compact navigation still needs a focused review.

Human approvalApply three reviewed changes?

This updates the writing workflow. You can undo the change from version history.

Six elevation rolesUse only when hierarchy requires it.

The role stays the same while each expression changes its visual treatment.

Sunkendepth.surface.sunken

Defaultdepth.surface.default

Resting cardNo lift required

Whitespace and a subtle boundary are enough.

Raiseddepth.shadow.raised

Sticky toolbar

Overlaydepth.shadow.overlay

PopoverThree options

Floating feedbackdepth.shadow.floating

✓

Changes savedVersion history updated

Foundation · Motion

Movement with a reason.

Motion confirms actions, preserves context, and shows where elements move. The interface stays still until something changes.

01Airbnb

Spatial transitions connect one product state to the next.

Interaction reference

02Atlassian

Motion clarifies what changed and what the user can do next.

Purpose and clarity

03Carbon

Productive motion stays quick; expressive motion is reserved for significant moments.

Timing reference

04WCAG

Non-essential movement can be disabled without losing state, feedback, or meaning.

Safety boundary

Timing scaleEight timing roles

Choose duration by purpose and perceived weight.

Instant0

Feedback140

Fast180

Enter260

Move380

Heavy560

Expressive680

Ambient1100

EasingMatch the curve to the movement

Use a defined curve for entering, exiting, moving, or settling.

Enter.2,0,.15,1

Exit.4,0,1,1

Move.4,0,.2,1

Heavy.45,0,.15,1

Expressive.3,0,.15,1

Button motionFour button responses

Buttons respond immediately, then show the resulting state through movement, color, and form.

Tactile pressCompress, hold for a beat, release.

Inviting liftRise gently without changing layout.

Working stateProgress stays calm and interruptible.

ConfirmationColor settles before the check arrives.

Live sequenceOne change in four steps

Replay the sequence, then compare expression, pace, motion preference, and canvas.

RequestApply Editorial to the writing workflow

Prepared12 screens are ready for review.

No changes have been made.

Human approvalReview scope before applying

✓ApprovedVersion history updated

Seven motion patternsShared behavior, expression-specific motion.

Expressions change distance, timing, and finish—not the interaction model.

Immediate feedbackmotion.feedback · 100 ms

Enter + exitmotion.enter · 220 ms

Expression ⌄

Choose oneEditorialFramesetPlay

Progressive disclosuremotion.disclose · 320 ms

Evidence and provenance⌃

Product brief

Direct source · User provided

Spatial navigationmotion.move · 320 ms

01Overview

02Details

Reorder + dragmotion.move · 320 ms

⋮⋮Research

⋮⋮Prototype

⋮⋮Review

Loading + progressmotion.progress · variable

Preparing reviewStep 2 of 3 · Checking contrast

Celebration + joymotion.celebrate · 480 ms

Milestone reachedYour first system is live.

Foundation · Accessibility

Accessibility in every expression.

Editorial, Frameset, Play, and Tool follow the same requirements for reading order, keyboard access, touch targets, error recovery, and assistive technology.

01WCAG 2.2

POUR principles and testable success criteria establish the conformance baseline.

Normative foundation ↗ 02ARIA APG

Patterns translate roles, states, names, and keyboard behavior into working widgets.

Interaction semantics ↗ 03Apple

Platform settings, adaptable interfaces, and comfortable touch behavior shape native quality.

Platform behavior ↗ 04Atlassian

Accessibility is treated as a system-wide product practice, not a final review gate.

Practice model ↗

WCAG foundationFour principles guide the work.

01Perceivable

Meaning survives color, sound, motion, and image loss.

02Operable

Design every task for keyboard, pointer, touch, and supported assistive input.

03Understandable

Language, navigation, instructions, and recovery stay predictable.

04Robust

Names, roles, values, structure, and status remain machine-readable.

Live task pathA small form with complete accessibility requirements

Use Tab and Shift+Tab. Turn on Focus map. Submit empty, recover, then enlarge the text.

Eight requirementsTest the behavior in every expression.

These are review aids—not a claim of automatic WCAG conformance. Real products still require automated checks, keyboard and screen-reader testing, zoom and reflow review, and human evaluation.

Contrast + non-color cuesa11y.cue.redundant

✓ Ready! Needs review? Unknown

Focus + keyboarda11y.focus.visible

Review details

Targets + inputa11y.target.minimum

24 px WCAG minimum
44 px Balloon comfort target

Resize + reflowa11y.text.200

PRODUCT UPDATELonger language still belongs inside the layout.

Name, role, valuea11y.semantic.complete

formPrepare a product check
textboxProject name · required
radiogroupReview priority
buttonStart review

Motion alternativesa11y.motion.reduce

Full preserves spatial context.
Reduced swaps travel for a brief state change.

Errors + recoverya11y.error.recoverable

Email address

! Enter the rest of the address, such as name@example.com.

Language + structurea11y.structure.logical

H1Clear page purpose

H2Logical section heading

الاتجاه والمعنى يعملان معًا

Pattern 01 · Forms

Ask clearly. Help people finish.

A Balloon form turns a task into a calm sequence. It asks only for necessary information, explains unfamiliar requests, and makes recovery obvious.

Core behaviorThree rules shape every form.

Reduce

Remove fields, choices, and instructions that do not change the outcome.

Group

Keep related questions together and order them the way people think.

Recover

Preserve entered values and explain exactly how to fix a problem.

Complete patternOne task. One clear next step.

Labels, guidance, fields, validation, and actions work as one system.

Six rulesDesign the path, not a stack of inputs.

Components supply the parts. The form pattern defines how those parts work together.

Keep labels visible.

Place labels above fields. Placeholder text may show an example, but never replaces a label.

Mark the exception.

If most fields are required, mark optional fields. If most are optional, mark required fields.

Match width to meaning.

Field width should hint at the expected answer without creating false limits.

Validate with intent.

Validate after blur or submit unless immediate feedback clearly helps. Never punish normal typing.

Preserve good work.

Keep valid values through errors, retries, sign-in interruptions, and back navigation.

State what happens next.

Primary action labels begin with a verb and describe the result: Save draft, Send invite, Continue.

Layout rhythmSpace follows the task.

Balloon reference values

Label → field: 8 px
Field → help: 8 px
Field → field: 24 px
Group → group: 32 px
Content → actions: 40 px

One column by default.

A single reading edge is faster to scan and easier to reflow.

Pair only related values.

Use two columns for short, tightly related fields such as city and postal code.

Stack on compact screens.

Preserve source order, use the full available width, and keep actions reachable above the keyboard.

Entry intelligenceUse meaning before detection.

Request platform help with semantic HTML and respond to capabilities. Do not guess behavior from a device or browser name.

Decision	Balloon rule	Implementation cue
Keyboard	Match the keyboard to the value’s meaning.	`type` · `inputmode` · `enterkeyhint`
Suggestions	Offer known values without preventing a new one.	`autocomplete` · saved choices · permission
Formatting	Accept natural entry; normalize without changing meaning.	Locale-aware display · paste-safe · IME-safe
Validation	Explain the issue, identify the field, and suggest recovery.	`aria-describedby` · summary when needed

Formatting recipes Accept like a human. Store like a system.

Formatting helps people read and enter information. It never becomes a brittle gate.

01 · Entry 3/7/2007

Keep the exact, possibly incomplete string while the person is typing.

02 · Display Mar 7, 2007

Present a localized, readable value after the entry is understood.

03 · Canonical 2007-03-07

Send a stable value to application logic and storage.

Example shown in US English. Display follows the product locale; canonical meaning does not.

Date & time

Choose the control from the task.

Known dates and chosen dates are different jobs.

Memorable date

Date of birth For example, 7 March 2007

Day Month Year

Scheduling or availability?Calendar and manual entry stay available together.

Accept: Typed dates, pasted dates, and month names when the context allows them.
Present: Use the product locale and show the expected order in visible help.
Store: YYYY-MM-DD for a date without time-zone conversion.
Validate: Name the invalid part or impossible date after completion or blur.
Never: Auto-advance focus or make a distant birthday calendar-only.

Payment card

Make the secure path feel ordinary.

Use hosted, PCI-compliant fields and let the payment provider own sensitive handling.

Card number

ExpirationSecurity code

Spaces and full-field paste are accepted. Grouping adapts when the card network is known.

Accept: Digits, spaces, hyphens, autofill, and a complete pasted number.
Present: Group digits for scanning without assuming every card uses 16 digits.
Store: Use provider tokens. Do not log or retain raw card data.
Validate: Wait for sufficient input; distinguish invalid number, expiration, and security code.
Never: Use type="number", block paste, or retain the security code after authorization.

Surface 01 · Presentations

Balloon takes the stage.

Stage translates Balloon’s foundations, expressions, and Ribbon charts into editable presentation rules.

One source. Four expressions.

01Foundations
02Expression
03Stage
04Export

Content hierarchy and evidence stay fixed while the expression changes the visual voice.

Live surfaceCover · Story

A minimal opening with one subject and one line of context.

Presentation surface · 01

Balloon Stage

A reusable presentation system built from the same foundations as the product.

Use the global Expression control to restyle this slide without changing its content or reading order.

Presentation typographyPoint-based roles for the room

Deck title: 52–64 pt
Slide title: 32–44 pt
Body: 18–24 pt
Supporting: 17–20 pt
Caption: 12–14 pt
Source: 10–12 pt

Patterns · Batch 01

Actions

Controls that trigger an immediate action or advance a workflow.

01EditorialMonochrome / quiet

02FramesetGraphic / precise

03PlayWarm / welcoming

04ToolOperational / contextual

Try each control. Its behavior stays the same while its styling changes.

Ready for review

Component guidance

Button

Use for explicit, finite actions. Labels begin with a verb.

Variants

Primary · Secondary · Quiet · Destructive

Required states

Default · Hover · Focus · Pressed · Disabled · Loading

Responsive behavior

Minimum 44px touch target. May become full-width when actions stack on mobile.

Accessibility

Native button semantics, visible focus, discernible label, and announced loading state.

Review question

Does each expression feel distinct without changing how the component works?

Foundation · Illustration

A balloon belongs in the room.

Eight compositions and twenty-two reusable objects show how each expression handles illustration. Balloons appear only when they add meaning.

The Balloon signature

Each set may include a balloon or tether when it supports the story. Human figures keep the work grounded.

Current collectionEight packs · three product-facing expressions

Editorial uses abstract realism, Frameset uses technical linework, and Play uses flatter forms and warm color.

01EditorialAbstract realism · ink · air

02FramesetIsometric · linework · signal

03PlayWarm form · humanity · calm joy

Project	Expression	Status	Updated
Typewriter	Editorial	Ready	Sep 4
Workspace	Frameset	Review	Sep 3
Elsewhere	Play	Draft	Sep 1

Play

Make room for the unexpected.

Frame Chair

Signal Lamp

Chapter 6

A light left on

Make room for the unexpected.Schaffen Sie Raum für das Unerwartete und wirklich Bedeutungsvolle.

Apply Editorial to the writing workflow

Review the recommendation.

Reduce

Group

Recover

Keep labels visible.

Mark the exception.

Match width to meaning.

Validate with intent.

Preserve good work.

State what happens next.

One column by default.

Pair only related values.

Stack on compact screens.

Balloon Stage

A room should leave space for a little surprise.

Typewriter assistant

Playful places

Start with one good idea.

We could not load this project.

Use Editorial for the writing workflow.