Basel Standard

Authored interface standard

The Basel Standard.

A disciplined interface standard for dense, product-facing software. Designed and authored by Byron Wall.

Product-facing patterns

Tables, overlays, forms, and navigation resolved together.

State discipline

Density, focus, validation, and dark mode handled as one system.

Installable output

Registry items remain practical to adopt inside shadcn workflows.

Product specimen
Lausanne Register
Collection control

Dense records, metadata rails, and review drawers without visual drift.

Rows248
Under review16
Ready09
RecordSectionStateUpdated
Editorial specimen / Issue 12Print archiveReview22 Mar
Product bulletin / Launch noteEditorial releaseReady21 Mar
Reference plates / Material scanResearchIntake19 Mar
Baseline
Grid and measure

The proof starts with alignment. Copy, labels, and controls sit on a consistent structural rhythm.

Shared columns and consistent measure across title, metadata, and controls.
State
Keyboard-visible focus

Dense surfaces keep focus explicit. Accessibility remains visible instead of being left to default browser behavior.

Default row
Keyboard focus visible
Focus remains explicit inside dense surfaces instead of falling back to generic browser glow.
Stress
Resize and overflow

Long labels, compressed rows, and overlay states hold together without visual drift or improvised fixes.

Internationale QualitatssicherungsdokumentationReady
state: "focused"
overflow: "wrap"
density: "maximum"
Long strings, compressed rows, and implementation details are part of the proof, not hidden from it.

Interactive demo

See the system under load.

The point is not more controls. The point is whether the interface keeps its reading order when density, language length, overlays, and keyboard states are all in play.

Interactive demo / Product console

Structure under pressure.

Switch the scenario, density, and proof state. The specimen should stay legible when hierarchy is put under pressure.

Theme
Density
Scenario
Proof
Stress
Lausanne Register

Collection intake

Structured records, acquisition notes, and review states in one reading surface.

Search / command
Filter / owner / state
Registered
248
Under review
16
Ready to publish
09
RecordSectionOwnerStatusValueUpdated
AR-241
Editorial specimen / Issue 12
Print archive
M. Keller
Review
12 assets
22 Mar 2026
AR-233
Product bulletin / Launch note
Editorial releases
R. Baumann
Approved
Ready
21 Mar 2026
AR-226
Reference plates / Material scan
Research archive
A. Moser
Intake
31 files
19 Mar 2026
Activity
Resize / stable
Metadata rail updated without changing table rhythm.
Keyboard focus remains visible inside compact density.
Drawer spacing matches panel rules in both themes.
Selected record
Editorial specimen / Issue 12

Requires caption hierarchy pass and long-label overflow review.

Proof notes
Maximum density

Rows compress without losing hierarchy, border rhythm, or keyboard focus visibility.

Long-text translation

German-length labels and drawer headings wrap without breaking the grid.

Overlay parity

Command, drawer, and validation states inherit the same spacing and rule system.

Why this is enough
The controls are curated around the states buyers actually need to judge.
The specimen keeps the product surface in view instead of turning into a settings wall.
Accent appears once as featured emphasis, while validation stays clearly separate.

Why it works

A calmer, more exact interface language.

Type as structure

Typography creates reading order before color does.

Grid before decoration

Alignment and rhythm carry composition instead of effects.

Color as signal

Accent remains sparse and functional, not atmospheric.

Rules as architecture

Borders and dividers define the system without softening it.

Use cases

Breadth, shown in context.

Show the system where it earns trust: control planes, dense data surfaces, and research views where structure matters more than decoration.

Package

A complete edition, not a starter scaffold.

The value is the work that has already been resolved: hierarchy, density, navigation, overlays, state treatment, and documentation that explains how the parts belong together.

Shadcn-compatible components and installable registry items
Resolved density, focus, overlay, and navigation patterns
Docs pages with usage, previews, and composition guidance
Editorial and product blocks that preserve the same design language

Proof

Credibility, made visible.

Artifact proof
State behavior is visible.

Focus, overflow, validation, and resize handling are shown directly instead of being left as claims.

System proof
The same logic carries landing, docs, and product UI.

The standard reads as one authored system across surfaces instead of one more styled demo.

Implementation proof
Install paths remain direct.

Registry items, docs, and package framing stay close to practical adoption.

FAQ

What buyers usually need to know.

How much integration work is still required?

You still need product-specific content and wiring. The difficult baseline work is already resolved: hierarchy, dense states, overlays, focus visibility, and structural spacing.

Is this only for marketing pages or visual demos?

No. The core value is product-facing UI: tables, forms, navigation, command surfaces, drawers, and documentation that explain how those pieces behave in practice.

Will the style hold up in serious software?

That is the point of the demo. The page shows long labels, compressed density, keyboard states, and dark-mode parity so the system is judged under load instead of at rest.

What does the purchase actually include?

The standard includes installable components, composed blocks, documentation, and the authored decisions that usually consume weeks of internal design and frontend iteration.

Closing

Give the product a sharper standard.

For teams that want software to feel edited, composed, and ready to be trusted.

Included
Editorial Article Heroblock
Product Card Editorialblock
Swiss Buttoncomponent
Swiss Cardcomponent