BalloonDesign System · 0.1

Expression

Typeramp

Canvas

Mode

Motion

Expression 01

Play

An airy welcome, warm color, and one delightful beat exactly where it matters.

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

Expression DNA

Airbnbcohesion

Untitledrigor

Notionhumanity

Semantic color

Ink

Paper

Accent

Joy

Type roles

Core Sans / Proxima · Inter

Display 68/72 · 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

Let the words breathe.

Text is content, not a fixed rectangle. These shared rules protect meaning as typefaces, viewports, 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.

Balloon defaults to reflow.

Wrap before truncating. Grow before clipping. Disclose before hiding. Preserve the complete accessible name even when the visible label is shortened.

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 · Spacing + layout

Structure with room to move.

One responsive contract, three distinct rhythms. Layout reorganizes around meaning instead of shrinking a desktop composition until it technically fits.

01Airbnb

Human-scale task anatomy, generous bands, and progressive reveal.

Experience north star

02Untitled UI

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

System spine

03Linear

Stable shells, compact work regions, and deliberate overflow.

Dense product reference

04Stripe

Flexible marketing grids, modular reordering, and controlled overlap.

Storytelling 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 shared contractsSame behavior. Expression-aware rhythm.

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

Hierarchy without theater.

Cards sit by default. Transient, draggable, and blocking layers earn lift. Surface tone, border, occlusion, and blur must preserve the hierarchy when shadow alone cannot.

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

Semantic stackFive surfaces · six roles

The z-axis describes behavior before it describes style.

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 semantic rolesScarce by design.

Components request a role; each expression decides how that distance looks.

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.

Balloon uses motion to preserve context, confirm cause and effect, and make meaningful moments feel human. The interface stays still until something changes.

01Airbnb

Coherent spatial transitions and warm polish make the whole experience feel connected.

Experience north star

02Atlassian

Motion clarifies what changed, why it changed, and what the user can do next.

Purpose + clarity

03Carbon

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

Mechanics only

04WCAG

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

Safety boundary

Timing scaleEight purposeful beats

Durations reflect purpose and perceived mass—not local guesses.

Instant0

Feedback140

Fast180

Enter260

Move380

Heavy560

Expressive680

Ambient1100

Easing grammarDirection has character

Every curve describes arrival, departure, or continuous movement.

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 characterFour responses, one interaction grammar

Buttons answer the input immediately, then use weight, color, and finish to explain the resulting state.

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 choreographyOne change · four legible beats

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 shared contractsSame meaning. Different choreography.

Expressions change distance, rhythm, 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 source⌃

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

Quality everyone can use.

Accessibility is a shared Balloon behavior layer—not a fourth visual expression. The lab makes the invisible contracts visible, then stress-tests them across expression, mode, type, motion, and canvas.

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 keep the system honest.

01Perceivable

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

02Operable

Every task works by 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 a complete contract

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

Eight shared contractsTest the behavior, then tune the 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

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

Foundation · Batch 01

Actions + Inputs

Shared behavior. Three distinct expressions.

01EditorialMonochrome / quiet

02FramesetGraphic / precise

03PlayWarm / welcoming

Interact with every control. Behavior remains shared; expression changes the visual recipe.

Foundation · Illustration

A balloon belongs in the room.

Eight common product worlds and fourteen reusable objects, interpreted through three distinct visual languages. The balloon is sometimes the subject, sometimes the path, and never meaningless decoration.

The Balloon signature

Every pack includes one literal balloon scene and one quieter tether motif. The recurring human moment is a person—sometimes a kid—carrying the lift.

Revised after auditEight packs · three expressions

Airbnb sets the compositional calm. Editorial gains abstract realism; Frameset becomes lighter and technical; Play becomes flatter, airier, and more human.

01EditorialAbstract realism · ink · air

02FramesetIsometric · linework · signal

03PlayWarm form · humanity · calm joy

Design system project status
Project	Expression	Status	Updated
Typewriter	Editorial	Ready	Today
Workspace	Frameset	Review	Yesterday
Elsewhere	Play	Draft	Sep 1

Saved to collection

Where do you want to go?

Play

Make room for the unexpected.

Objects with a point of view

Frame Chair

Signal Lamp

Hierarchy you can feel.

Let the words breathe.

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

Apply Editorial to the writing workflow

Structure with room to move.

Hierarchy without theater.

Movement with a reason.

Quality everyone can use.

Button

Same meaning. Different voice.

A balloon belongs in the room.

Accessible color library

A room should leave space for a little surprise.

Typewriter assistant

Playful places

Start with one good idea.

We could not load this project.

Publish component library

Use Editorial for the writing workflow.

Where would you like to go from here?

Type system changes