easy designComponent library

Easy Design / Interface kit

Useful details, made deliberate.

A practical set of controls for products that need clarity, tactility, and restraint. Every component below is built to be used—not just looked at.

01

Actions

Buttons

Compact by default, expressive only when it helps. Hover illuminates; click gives a short, physical response.

Primary action40 px

The familiar blue action, tuned with a narrow top highlight and a quiet contact shadow.

Secondary action40 px

Quiet secondary actions preserve hierarchy without disappearing from the interface.

Grouped control32 px

Small decisions belong in small controls. One surface, one selected state, no extra noise.

Complete button inventory

101 variants · 32–40 px controls
001Solid

Blue · Pill

002Solid

Cobalt · Pill

003Solid

Ink · Pill

004Solid

Slate · Pill

005Solid

Ice · Pill

006Solid

Pearl · Pill

007Glass

Blue · Pill

008Glass

Cobalt · Pill

009Glass

Ink · Pill

010Glass

Slate · Pill

011Glass

Ice · Pill

012Glass

Pearl · Pill

013Quiet

Blue · Pill

014Quiet

Cobalt · Pill

015Quiet

Ink · Pill

016Quiet

Slate · Pill

017Quiet

Ice · Pill

018Quiet

Pearl · Pill

019Outline

Blue · Pill

020Outline

Cobalt · Pill

021Outline

Ink · Pill

022Outline

Slate · Pill

023Outline

Ice · Pill

024Outline

Pearl · Pill

025Solid

Blue · Round

026Solid

Cobalt · Round

027Solid

Ink · Round

028Solid

Slate · Round

029Solid

Ice · Round

030Solid

Pearl · Round

031Glass

Blue · Round

032Glass

Cobalt · Round

033Glass

Ink · Round

034Glass

Slate · Round

035Glass

Ice · Round

036Glass

Pearl · Round

037Quiet

Blue · Round

038Quiet

Cobalt · Round

039Quiet

Ink · Round

040Quiet

Slate · Round

041Quiet

Ice · Round

042Quiet

Pearl · Round

043Outline

Blue · Round

044Outline

Cobalt · Round

045Outline

Ink · Round

046Outline

Slate · Round

047Outline

Ice · Round

048Outline

Pearl · Round

049Solid

Blue · Capsule

050Solid

Cobalt · Capsule

051Solid

Ink · Capsule

052Solid

Slate · Capsule

053Solid

Ice · Capsule

054Solid

Pearl · Capsule

055Glass

Blue · Capsule

056Glass

Cobalt · Capsule

057Glass

Ink · Capsule

058Glass

Slate · Capsule

059Glass

Ice · Capsule

060Glass

Pearl · Capsule

061Quiet

Blue · Capsule

062Quiet

Cobalt · Capsule

063Quiet

Ink · Capsule

064Quiet

Slate · Capsule

065Quiet

Ice · Capsule

066Quiet

Pearl · Capsule

067Outline

Blue · Capsule

068Outline

Cobalt · Capsule

069Outline

Ink · Capsule

070Outline

Slate · Capsule

071Outline

Ice · Capsule

072Outline

Pearl · Capsule

073Solid

Blue · Pill

074Solid

Cobalt · Pill

075Solid

Ink · Pill

076Solid

Slate · Pill

077Solid

Ice · Pill

078Solid

Pearl · Pill

079Glass

Blue · Pill

080Glass

Cobalt · Pill

081Glass

Ink · Pill

082Glass

Slate · Pill

083Glass

Ice · Pill

084Glass

Pearl · Pill

085Quiet

Blue · Pill

086Quiet

Cobalt · Pill

087Quiet

Ink · Pill

088Quiet

Slate · Pill

089Quiet

Ice · Pill

090Quiet

Pearl · Pill

091Outline

Blue · Pill

092Outline

Cobalt · Pill

093Outline

Ink · Pill

094Outline

Slate · Pill

095Outline

Ice · Pill

096Outline

Pearl · Pill

097Solid

Blue · Round

098Solid

Cobalt · Round

099Solid

Ink · Round

100Solid

Slate · Round

101Solid

Ice · Round

02

Overlays

Menus & dialogs

Small transitions clarify spatial relationships. Menus emerge from their triggers; dialogs arrive with an intentional, reduced-motion-safe layer.

Dropdown menuAnimated

Open it. The panel has a real anchor, a restrained pop-in, and focused menu rows.

Confirmation modalLayered

Dialog states hold attention without adding unnecessary drama or visual clutter.

03

Data & feedback

Tables, lists, and status

Data components stay quiet so the information can lead. Edges are intentional, density is practical, and state has a single visual language.

Recent projects

Updated in the last 7 days
ProjectOwnerStatus
Field notes
AntoineLive
Studio archive
MaeDraft
Northline
JordanIn review

Today

Three items need attention
  • MS
    Review homepage copyDue today · Marketing
  • JR
    Confirm launch assetsDue today · Product
  • AL
    Share prototype notesTomorrow · Design

Project notifications

Receive updates from collaborators

System note

Less interface, more intention.

Everything here shares one principle: the component should feel finished before it asks to be noticed.