Your idea. On the web.
For the world to see.

We build blistering fast, modern web experiences. Test drive the new Etch Architecture with full support for Container Queries, light/dark modes, and native CSS nesting.

Color Variants

Sizes & Layout

Card in Dark Context

Even in Light Mode, the .card class naturally pulls the dark surface background.

Featured

Shadows Adapt Too

The .shadow-lg class swaps to a subtle white glow thanks to the context.

  • Custom Ribbon
    Custom Eyebrow

    Standard static card (h3)

    Line clamp feature can be adjusted to truncate text. Current text will truncate after 4 lines and ellipses will be shown at the end. Setting allows 1 line, 2 lines, 3 lines, 4 lines
    Default Button
  • View Card
    ● Custom styled eyebrow

    Primary color heading

    Entire Card Clickable. Disabled default Btn and Img. Card Interactive.
  • View Card
    Custom Ribbon
    Hero Card

    Heading size increased via class

    Place text or rich text here

What we do

We focus on craftsmanship.

The Process

  • Strategy & Discovery
  • UI/UX Design
  • Etch Development

The Results

  • 99+ PageSpeed Scores
  • Semantic, Accessible HTML
  • Global Design Tokens

Say Hello

Utility Instances

.transition .position-relative .bg-primary .text-white .rounded-lg .shadow-sm .p-1-0 .mt-0-5 .mb-0-5 .text-left
.bg-secondary .rounded-md .shadow-md .p-2-0 .mt-1-0 .mb-1-0 .text-center
.bg-white .rounded-full .shadow-lg .p-3-0 .mt-1-5 .mb-1-5 .text-right
.p-6-0 .px-2-0 .py-2-0 .mt-3-0 .mb-3-0
.px-4-0 .py-4-0 .mt-5-0 .mb-5-0
.px-6-0 .py-3-0 .gap-1-0 .justify-center .align-center
.text-xs
.sr-only
.is-hidden
.has-fade-in .is-visible
.has-hover-lift
Dark context outline on bg-primary