Bed Threads Design System typography composition.
Design system · 2022 · Bed Threads platform

Design System.

The foundation that powered every Bed Threads page: typography, cards, buttons, grid, project templates. Source of truth for the team.

Role UX/UI Designer
Client Bed Threads
Year 2022
Disciplines Design system · Documentation · Tokens

Brief

Build a design system that creates consistency across every Bed Threads touchpoint, from the homepage to PDP to BYOB to marketing modules.

Problem

Without a system, every page solved type, spacing, and components from scratch. Engineering re-implemented the same patterns and the brand drifted page to page.

My role

End-to-end on the system:

  • Type variables and usage rules
  • Card, button, and grid foundations
  • Project template for new pages
  • Documentation engineering could ship from

Typography

Type variables and usage defined the visual hierarchy across every digital touchpoint: readable, consistent, and unmistakably Bed Threads.

Bed Threads typographic scale reference.
Type scale.
Bed Threads typography usage guidelines.
Usage guidelines.

Card system

Modular and flexible. Cards hold grouped content (product listings, promotional offers, editorial) with consistent structure and visual hierarchy across every section of the platform.

Bed Threads card system: modular content containers.
Card system: modular containers.

Buttons

Three button types (Primary, Secondary, Tertiary), each with a clear purpose, all sharing the same design language.

Bed Threads button system: Primary, Secondary, Tertiary.
Three button types.
Bed Threads primary button states.
Primary button states.
Bed Threads complete button system variations.
System variations.

Grid

A grid that scales from mobile to desktop without re-deciding spacing on every page.

Bed Threads grid system specifications.
Grid specifications.

Project template

A template every new page is built from, so the system is the default, not an afterthought.

Bed Threads project template layout.
Template structure.
Bed Threads project template additional example.
Template applied.

Methods

Component library Tokens Typography Documentation Developer hand-off Cross-platform

Thanks for stopping by.