Skip to main content

Primitive lab

A compact public surface for checking the copied primitives, spacing, and section shells before the real storefront build starts.

Reusable pieces now in the repo

These are the first-line building blocks copied from BenchyStudio and ready to reuse for the public site.

Button

Shared action styles

The button primitive carries Benchy’s existing radius, border, focus, and state patterns so calls to action stay visually aligned across pages.

SectionCard

Simple content framing

Cards provide a clean default for grouped content, notes, and page subsections without introducing a second visual system.

PageHeader

Consistent section intros

Headings and descriptions use the same typography and spacing on every public route so sections can be added quickly without custom title blocks.

Shared breakpoints

The public shell follows Benchy’s existing responsive rhythm instead of inventing a new one.

Small640px

Compact spacing and stacked actions are the default baseline for phones and narrow browsers.

Medium768px

Tablet layouts open up the section padding and multi-column card arrangements without changing the overall structure.

Large1024px

Desktop spacing settles into the wide Benchy marketing rhythm so larger sections feel stable and deliberate instead of stretched.