Basisby Form & PhaseComponents / in practice
Back to Form & Phase

Basis / Form & Phase

A system.
Put to work.

Real components, complete states, and the pages that give the rules a reason to exist.

01 / In practice

The system in context.

A connected studio website shares the same foundations, controls, and interaction behaviors. These are three useful starting points.

01 / Homepage

The next thing.
Made possible.

Open the homepage 02 / Expertise

Whatever comes next.
Let’s give it shape.

Explore the detail 03 / Contact

What’s on
your mind?

Try the contact flow
Clear folded glass with warm light on an ivory field
Light / a quiet field beside the message.
Illuminated folded glass against charcoal
Dark / preserve the edges, deepen the field.
Material stays decorative. Copy remains live and selectable. On small screens, the crop moves away from the words; text and controls never depend on the image.
02 / In practice

Let the light lead.

The material language lives in working controls and surfaces, with a directional light source that follows the pointer.

Only edges within 96 px of the pointer respond. Touch and reduced motion keep the resting appearance.

Light. Edge. Depth.

A material,
throughout the experience.

Move near an edge: a 1 px rim and a quiet bloom appear. The fill stays steady. Move away and the edge settles back.

A clear way forward

What’s taking shape?

The stack: steady surface → 1 px clothoid rim → soft bloom. Primary uses a deep vermilion fill and coral edge; the second action demonstrates a custom blue edge. The effect is local to nearby controls.
03 / In practice

Every action, considered.

Five variants. Six states. Three surfaces. One shared component.

Specimen surface

Hover, pressed, and focus are held for visual comparison. Loading and disabled states use the real component behavior.

Five button variants across six states on a light surface
Variantdefaulthoverpressedfocusloadingdisabled
primary
secondary
outline
ghost
Text / link
The accent surface uses ink for text and solid controls. Action color adapts to the surface; bright orange is reserved for the larger field.
40 / 48 / 56 px minimum
Leading / trailing / icon only
Circular icons / 40 · 48 · 56 px
Same circle through every state
04 / In practice

Clarity through every state.

Native text controls and Radix selections use the same spacing, labels, focus, and feedback rules.

small / 40 px

Enter a complete email address.

default / 48 px

Enter a complete email address.

large / 56 px

Enter a complete email address.

A visible label stays present.

Enter a complete email address.

Still selectable and focusable.

Unavailable for this example.

Checkbox

Switch

Radio group

Engagement
Use Tab to enter a group, arrow keys to move through radio options and selects, and Space to toggle. Error text is linked to its field.
05 / In practice

A response you can follow.

Try the working interactions, including the moments when an action takes time or needs another attempt.

Your operating system’s reduced-motion setting always takes precedence.

Choose an outcome to compare loading, success, and recovery.

Disclosure uses the content’s actual height. Open and close remain legible without motion, and focus stays on the trigger.

A contained conversation.

Dialogs capture focus, close with Escape, and return focus to the trigger.

06 / In practice

Give the content room.

Compare narrow and wide layouts with short and extended content.

A shared foundation

Room for what’s next.

Thoughtful foundations make the next decision easier.

Explore the approach
Width is a maximum, so the specimen still fits a smaller screen. The live pages use fluid type, natural height, and a single-column flow below their content breakpoints.