BalloonDesign system · v0.1

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

References

Airbnbinteraction

Untitled UIcomponents

Notionrestraint

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

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, and Play 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

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

Foundation · Batch 01

Actions + Inputs

The same component behavior in three visual styles.

01EditorialMonochrome / quiet

02FramesetGraphic / precise

03PlayWarm / welcoming

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 seventeen 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 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

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

Saved to collection

Browse Balloon

Play

Make room for the unexpected.

Objects with a point of view

Frame Chair

Signal Lamp

Typography for the task.

Text that adapts.

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

Apply Editorial to the writing workflow

Use padding to show what belongs together.

Review the recommendation.

Build responsive structure around the content.

Use depth to show hierarchy.

Movement with a reason.

Accessibility in every expression.

Button

Same meaning. Different style.

A balloon belongs in the room.

Color with tested contrast.

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