ecommercev1.0.0·light

Drift

Drift — Coastal Lifestyle Store

ecommercecoastaloceanlifestyleairy

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

drift · rendered from tokens

Color

brand.primary

oklch(0.53 0.11 215)

brand.secondary

oklch(0.68 0.1 70)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.26 0.02 215)

text.muted

oklch(0.47 0.022 215)

text.link

oklch(0.53 0.11 215)

surface.base

oklch(0.99 0.006 210)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.965 0.01 210)

border.default

oklch(0.9 0.012 210)

state.success

oklch(0.58 0.14 150)

state.danger

oklch(0.56 0.2 25)

state.warning

oklch(0.72 0.14 75)

state.info

oklch(0.58 0.12 230)

Typography

3xlThe quick brown fox

2xlThe quick brown fox

xlThe quick brown fox

lgThe quick brown fox

baseThe quick brown fox

smThe quick brown fox

Components

Buttons

Inputs

Fintech

Selection

Notifications

AutoManual

Feedback

successdangerwarninginfo

Tokens validatedAll contrast checks pass WCAG AA.

Data

AMRKJD+5

2,847+12%

Storage64%

Navigation

OverviewTokensActivity

Home/Library/Item

123

Cards

Confetti

A bright, joyful design language with playful motion.

Pro

$12/ mo

Unlimited exports

Private systems

Priority support

Aria Moss

Owner

success

Ravi Kohli

Editor

info

Lena Park

Viewer

warning

Radius, shadow & spacing

full

Use this system

Three ways to drop Drift into your workflow.

Save the file for your tool — your agent then generates UI in Drift, automatically.

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/drift.mdc

Project rule — applied to every generation.

WsWindsurf

.windsurfrules

Repo root — Cascade reads it automatically.

GCGitHub Copilot

.github/copilot-instructions.md

Repo-wide custom instructions for Copilot.

The system

Brand & Voice

Drift smells like salt air. Ocean blue and warm sand over bright, airy surfaces make a store for surf, travel, and the outdoors. Relaxed and aspirational — browsing should feel like a slow weekend.

Layout & Grid

Big lifestyle photography, lots of whitespace, and soft rounded cards. Copy is easygoing; the sandy color.brand.secondary warms call-outs.

Components

Buttons

Rounded radius.md ocean-blue buttons with relaxed labels and a gentle shadow.md lift. Secondary actions stay bordered and light.

Product Cards

Full-bleed imagery on color.surface.raised with breezy captions; badges pair state colors with text.

Accessibility

Primary and muted text pass WCAG AA on every surface. Imagery never carries meaning alone, tap targets are large, and focus stays clearly visible.

Tokens

Color (14)

Tokens

breakpoint

iconography

motion

radius

shadow

spacing

typography

zIndex

Export

One source of truth, five formats — copy or download any of them.

design.md97 lines

1---

2$schema: https://designmd.in/schema/v1.json

3id: drift

4name: Drift

5title: Drift — Coastal Lifestyle Store

6version: 1.0.0

7category: ecommerce

8tags: [ecommerce, coastal, ocean, lifestyle, airy]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.53 0.11 215)", type: color }

17 secondary: { value: "oklch(0.68 0.1 70)", type: color }

18 onBrand: { value: "oklch(0.99 0 0)", type: color }

19 text:

20 primary: { value: "oklch(0.26 0.02 215)", type: color }

21 muted: { value: "oklch(0.47 0.022 215)", type: color }

22 link: { value: "{color.brand.primary}", type: color }

23 surface:

24 base: { value: "oklch(0.99 0.006 210)", type: color }

25 raised: { value: "oklch(1 0 0)", type: color }

26 sunken: { value: "oklch(0.965 0.01 210)", type: color }

27 border:

28 default: { value: "oklch(0.9 0.012 210)", type: color }

29 state:

30 success: { value: "oklch(0.58 0.14 150)", type: color }

31 danger: { value: "oklch(0.56 0.2 25)", type: color }

32 warning: { value: "oklch(0.72 0.14 75)", type: color }

33 info: { value: "oklch(0.58 0.12 230)", type: color }

34 typography:

35 family:

36 sans: { value: "Outfit, system-ui, sans-serif", type: fontFamily }

37 mono: { value: "ui-monospace, monospace", type: fontFamily }

38 scale:

39 sm: { value: "0.875rem", type: dimension }

40 base: { value: "1rem", type: dimension }

41 lg: { value: "1.25rem", type: dimension }

42 xl: { value: "1.6rem", type: dimension }

43 "2xl": { value: "2.2rem", type: dimension }

44 "3xl": { value: "3rem", type: dimension }

45 weight:

46 regular: { value: 400, type: fontWeight }

47 bold: { value: 600, type: fontWeight }

48 leading:

49 tight: { value: 1.12, type: number }

50 normal: { value: 1.6, type: number }

51 spacing:

52 base: { value: "0.25rem", type: dimension }

53 radius:

54 sm: { value: "0.625rem", type: dimension }

55 md: { value: "1rem", type: dimension }

56 lg: { value: "1.5rem", type: dimension }

57 full: { value: "9999px", type: dimension }

58 shadow:

59 sm: { value: "0 1px 3px oklch(0.26 0.02 215 / 0.07)", type: shadow }

60 md: { value: "0 10px 28px oklch(0.26 0.02 215 / 0.1)", type: shadow }

61 motion:

62 duration:

63 base: { value: "240ms", type: duration }

64 easing:

65 standard: { value: "cubic-bezier(0.22, 1, 0.36, 1)", type: cubicBezier }

66 breakpoint:

67 md: { value: "768px", type: dimension }

68 iconography:

69 style: { value: "1.75px stroke, soft rounded, breezy", type: descriptor }

70 zIndex:

71 dropdown: { value: 1000, type: number }

72 modal: { value: 1300, type: number }

73---

75# Drift Design System

77## Brand & Voice

78Drift smells like salt air. Ocean blue and warm sand over bright, airy surfaces

79make a store for surf, travel, and the outdoors. Relaxed and aspirational —

80browsing should feel like a slow weekend.

82## Layout & Grid

83Big lifestyle photography, lots of whitespace, and soft rounded cards. Copy is

84easygoing; the sandy `color.brand.secondary` warms call-outs.

86## Components

87### Buttons

88Rounded `radius.md` ocean-blue buttons with relaxed labels and a gentle

89`shadow.md` lift. Secondary actions stay bordered and light.

91### Product Cards

92Full-bleed imagery on `color.surface.raised` with breezy captions; badges pair

93state colors with text.

95## Accessibility

96Primary and muted text pass WCAG AA on every surface. Imagery never carries

97meaning alone, tap targets are large, and focus stays clearly visible.

Related systems

View →

Button

Bazaar

98AA

Bazaar — Warm Conversion Commerce

ecommerceecommercewarm

View →

Button

Boutique

98AA

Boutique — Elegant Retail

ecommerceecommerceelegant

View →

Button

Carto

98AA

Carto — Marketplace Commerce

ecommerceecommercemarketplace