saasv1.0.0·light

Beacon

Beacon — Calm Teal SaaS

saastealcalmcleanproduct

38 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

beacon · rendered from tokens

Color

brand.primary

oklch(0.52 0.12 195)

brand.secondary

oklch(0.55 0.16 270)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.24 0.015 220)

text.muted

oklch(0.47 0.02 220)

text.link

oklch(0.52 0.12 195)

surface.base

oklch(0.99 0.004 210)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.965 0.008 210)

border.default

oklch(0.91 0.01 210)

state.success

oklch(0.57 0.14 155)

state.danger

oklch(0.56 0.2 25)

state.warning

oklch(0.7 0.15 75)

state.info

oklch(0.55 0.13 240)

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

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Beacon is the quiet confidence of a tool that just works. A soft teal guides the eye while cool neutrals keep the workspace serene. Helpful, never shouty — it points the way without getting loud.

Layout & Grid

Comfortable in-app density on a 4px rhythm, with clear empty states and gentle onboarding. Teal marks the path; everything else stays neutral.

Components

Buttons

Teal color.brand.primary primaries with radius.md corners and a soft shadow.sm. Secondary actions use a quiet border.

Inputs

Bordered fields with a teal focus ring; inline validation uses state colors with text so meaning never relies on hue.

Accessibility

Primary and muted text both pass WCAG AA on every surface. Focus is always visible, targets are generous, and motion stays brisk and calm.

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

1---

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

3id: beacon

4name: Beacon

5title: Beacon — Calm Teal SaaS

6version: 1.0.0

7category: saas

8tags: [saas, teal, calm, clean, product]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.52 0.12 195)", type: color }

17 secondary: { value: "oklch(0.55 0.16 270)", type: color }

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

19 text:

20 primary: { value: "oklch(0.24 0.015 220)", type: color }

21 muted: { value: "oklch(0.47 0.02 220)", type: color }

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

23 surface:

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

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

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

27 border:

28 default: { value: "oklch(0.91 0.01 210)", type: color }

29 state:

30 success: { value: "oklch(0.57 0.14 155)", 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.55 0.13 240)", type: color }

34 typography:

35 family:

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

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

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

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

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

45 weight:

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

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

48 leading:

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

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

51 spacing:

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

53 radius:

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

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

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

57 shadow:

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

59 md: { value: "0 5px 16px oklch(0.24 0.02 220 / 0.09)", type: shadow }

60 motion:

61 duration:

62 base: { value: "160ms", type: duration }

63 easing:

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

65 breakpoint:

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

67 iconography:

68 style: { value: "1.5px stroke, rounded, friendly", type: descriptor }

69 zIndex:

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

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

72---

74# Beacon Design System

76## Brand & Voice

77Beacon is the quiet confidence of a tool that just works. A soft teal guides the

78eye while cool neutrals keep the workspace serene. Helpful, never shouty — it

79points the way without getting loud.

81## Layout & Grid

82Comfortable in-app density on a 4px rhythm, with clear empty states and gentle

83onboarding. Teal marks the path; everything else stays neutral.

85## Components

86### Buttons

87Teal `color.brand.primary` primaries with `radius.md` corners and a soft

88`shadow.sm`. Secondary actions use a quiet border.

90### Inputs

91Bordered fields with a teal focus ring; inline validation uses state colors with

92text so meaning never relies on hue.

94## Accessibility

95Primary and muted text both pass WCAG AA on every surface. Focus is always

96visible, targets are generous, and motion stays brisk and calm.

Related systems

View →

Button

Cobalt

98AA

Cobalt — Clean & Confident SaaS

saassaasblue

View →

Button

Pulse

Pulse — Vibrant SaaS

Slate

98AA

Slate — Neutral Dashboard System

saassaasneutral