Bed Intentions — Design System Reference

1. Visual Theme & Atmosphere

Bed Intentions is a Shopify-based bedding brand that has escaped the template trap. The design language is typographically sophisticated, layering multiple custom fonts with clearly differentiated roles: a serif-adjacent round display font for editorial headings, a condensed social font for callouts, a monospaced condensed font for metadata and pricing, and a grotesque sans for body copy. The palette leans light and airy — off-white, white, pale sage/khaki accents — with careful animation timing built into the custom property system. The overall atmosphere is that of a premium lifestyle brand: considered, quiet, and confident in its whitespace.

2. Color Palette & Roles

Foundation

• rgb(255,255,255) — primary background (--color-background-1)
• Off-white page surfaces (inherited from Shopify Dawn/custom theme variables)

Text

• rgb(11,11,11) — primary text (--oke-text-primaryColor)
• rgb(76,74,74) — secondary text (--oke-text-secondaryColor)
• rgb(182,182,182) — border / divider tone

Interactive

• rgb(232,230,216) — active button border (--oke-button-borderColorActive) — a warm warm off-white
• rgb(219,221,228) — default button border (--oke-button-borderColor) — a cool light gray

Review / badge system (OK ENDI)

• Primary text: rgb(11,11,11)
• Secondary: rgb(76,74,74)
• Borders: rgb(182,182,182) and rgb(219,221,228)

The palette is deliberately muted and natural. No bright accent colors. The button border shift between cool gray and warm off-white encodes a tactile directional signal.

3. Typography Rules

Bed Intentions is one of the more ambitious typographic systems in this set, with four named font roles:

Key typographic decisions:

• LMMonoLtCond10 as the primary title font — a monospace condensed at font-weight: 300 — creates a technical, editorial precision uncommon in e-commerce
• ABCSocialCondensed adds tall, compressed energy for accent text
• OfficeTimesRound provides a soft, rounded serif personality for editorial headings
• The Shopify theme variables (--font-heading-family, --font-body-family) use different fonts than the custom theme variables — there are effectively two parallel type systems in use

4. Component Stylings

Buttons (OK ENDI review widget)

• Border: rgb(219,221,228) default → rgb(232,230,216) active (cool-to-warm shift)
• Border-radius: 4px — subtly rounded, not pill-shaped
• Font-weight: 700 — bold, assertive labels
• Font-size: 14px via --oke-text-regular

Animation system (explicit timing tokens)

• Short: 0.1s
• Default: 0.2s
• Announcement bar: 0.25s
• Medium: 0.3s
• Long: 0.5s
• Extra-long: 0.6s
• Extra-longer: 0.75s
• Extended: 3s
• All use cubic-bezier(0, 0, .3, 1) ease-out — fast start, gradual finish

The animation token system is unusually detailed — eight named durations signal that transitions are choreographed, not incidental.

5. Layout Principles

6-column grid with 16px gutters and 30px page margins. Layout width is calc(100vw - (2 * 30px)) — responsive to viewport without fixed breakpoints. Column width is derived: calc((layout-width - (5 * 16px)) / 6). This is a genuine grid system, not utility classes pretending to be a grid. The precision suggests the design was spec’d before it was built.

6. Depth & Elevation

The extracted data shows minimal shadow use:

• --media-shadow-opacity: 0.0 — media elements have no shadow by default
• --focused-base-box-shadow: 0 0 0 .3rem rgb(var(--color-background)), 0 0 .5rem .4rem rgba(var(--color-foreground), .3) — focus states use a glow + ring technique

Depth is editorial: whitespace and typographic contrast do the layering work. The focused state is the most complex shadow in the system.

7. Do’s and Don’ts

Do:

• Use the four-font system purposefully: Monument Grotesque for body, Social Condensed for callouts, LM Mono for prices/metadata, OfficeTimesRound for editorial headings
• Apply the animation timing tokens — never use arbitrary transition values
• Use the 6-column/16px-gutter/30px-margin grid system for all layouts
• Shift button border from cool gray to warm off-white on active state

Don’t:

• Introduce bright accent colors — the palette is deliberately muted and warm-neutral
• Use font-weight below 300 for title fonts (LMMonoLtCond10 is already light)
• Mix the Shopify theme fonts (Assistant) with the custom theme fonts at the same typographic level
• Skip animation — the eight-token duration system implies motion is expected everywhere

8. Responsive Behavior

Breakpoints: not defined in custom properties — the grid uses calc() and viewport units to be intrinsically responsive. The layout width formula (100vw - 60px) works at any breakpoint. The --layout-columns-count: 6 variable could be overridden at a media query level to collapse to 4 or 2 columns without changing the column-width formula.

9. Agent Prompt Guide

Build a UI that matches Bed Intentions’ design language.

Light off-white page. Use ABCMonumentGrotesk for body copy, LMMonoLtCond10 (light, 300 weight) for prices and metadata, OfficeTimesRound for editorial headings, ABCSocialCondensed for callout text. 6-column grid, 16px gutters, 30px page margins. Button borders are light cool-gray (rgb(219,221,228)) by default, shift to warm off-white (rgb(232,230,216)) on active — a subtle but intentional temperature shift. Focus states use a double glow: background-color ring + foreground-color soft glow. Animate everything using the cubic-bezier(0, 0, .3, 1) easing at the appropriate duration tier (0.1s–0.75s). The palette is muted naturals only.

Generated by Sparkbites — extracted from live CSS analysis