saasv1.0.0·light

Pulse

Pulse — Vibrant SaaS

saasvioletvibrantmodernproduct

41 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

pulse · rendered from tokens

Color

brand.primary

oklch(0.55 0.23 295)

brand.secondary

oklch(0.6 0.16 250)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.24 0.02 295)

text.muted

oklch(0.47 0.025 295)

text.link

oklch(0.55 0.23 295)

surface.base

oklch(0.99 0.003 295)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.965 0.006 295)

border.default

oklch(0.91 0.008 295)

state.success

oklch(0.58 0.15 150)

state.danger

oklch(0.56 0.2 25)

state.warning

oklch(0.7 0.15 75)

state.info

oklch(0.6 0.14 250)

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 Pulse into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/pulse.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

Pulse is the energy of a product team shipping fast. A vivid violet leads, paired with an electric blue, over crisp neutral surfaces. The tone is upbeat and modern without tipping into noisy — color with intent.

Layout & Grid

Spacious marketing pages and dense in-app views share one 4px rhythm. Gradients appear on hero moments; the app itself stays calm and legible.

Components

Buttons

Rounded radius.md buttons fill color.brand.primary with a soft colored shadow.md lift. Secondary actions are bordered and ghost-on-hover.

Cards

Feature cards on color.surface.raised with hairline borders; status uses state colors paired with labels.

Accessibility

Primary and muted text both clear WCAG AA on every surface. Focus rings are always visible, targets meet 44px, and color is never the only signal.

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.md99 lines

1---

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

3id: pulse

4name: Pulse

5title: Pulse — Vibrant SaaS

6version: 1.0.0

7category: saas

8tags: [saas, violet, vibrant, modern, product]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.55 0.23 295)", type: color }

17 secondary: { value: "oklch(0.6 0.16 250)", type: color }

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

19 text:

20 primary: { value: "oklch(0.24 0.02 295)", type: color }

21 muted: { value: "oklch(0.47 0.025 295)", type: color }

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

23 surface:

24 base: { value: "oklch(0.99 0.003 295)", type: color }

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

26 sunken: { value: "oklch(0.965 0.006 295)", type: color }

27 border:

28 default: { value: "oklch(0.91 0.008 295)", type: color }

29 state:

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

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

32 warning: { value: "oklch(0.7 0.15 75)", type: color }

33 info: { value: "oklch(0.6 0.14 250)", type: color }

34 typography:

35 family:

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

37 mono: { value: "JetBrains Mono, 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.65rem", type: dimension }

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

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

45 weight:

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

47 medium: { value: 500, type: fontWeight }

48 bold: { value: 700, type: fontWeight }

49 leading:

50 tight: { value: 1.15, type: number }

51 normal: { value: 1.55, type: number }

52 spacing:

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

54 radius:

55 sm: { value: "0.5rem", type: dimension }

56 md: { value: "0.75rem", type: dimension }

57 lg: { value: "1.125rem", type: dimension }

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

59 shadow:

60 sm: { value: "0 1px 2px oklch(0.24 0.02 295 / 0.07)", type: shadow }

61 md: { value: "0 8px 24px oklch(0.55 0.23 295 / 0.14)", type: shadow }

62 motion:

63 duration:

64 base: { value: "180ms", type: duration }

65 easing:

66 standard: { value: "cubic-bezier(0.2, 0, 0, 1)", type: cubicBezier }

67 breakpoint:

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

69 lg: { value: "1024px", type: dimension }

70 iconography:

71 style: { value: "1.5px stroke, rounded joins, 24px grid", type: descriptor }

72 zIndex:

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

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

75---

77# Pulse Design System

79## Brand & Voice

80Pulse is the energy of a product team shipping fast. A vivid violet leads, paired

81with an electric blue, over crisp neutral surfaces. The tone is upbeat and

82modern without tipping into noisy — color with intent.

84## Layout & Grid

85Spacious marketing pages and dense in-app views share one 4px rhythm. Gradients

86appear on hero moments; the app itself stays calm and legible.

88## Components

89### Buttons

90Rounded `radius.md` buttons fill `color.brand.primary` with a soft colored

91`shadow.md` lift. Secondary actions are bordered and ghost-on-hover.

93### Cards

94Feature cards on `color.surface.raised` with hairline borders; status uses state

95colors paired with labels.

97## Accessibility

98Primary and muted text both clear WCAG AA on every surface. Focus rings are

99always visible, targets meet 44px, and color is never the only signal.

Related systems

View →

Button

Beacon

98AA

Beacon — Calm Teal SaaS

saassaasteal

View →

Button

Cobalt

98AA

Cobalt — Clean & Confident SaaS

saassaasblue

View →

Button

Slate

98AA

Slate — Neutral Dashboard System

saassaasneutral