saasv1.0.0·light

Slate

Slate — Neutral Dashboard System

saasneutraldashboardindigodata

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

slate · rendered from tokens

Color

brand.primary

oklch(0.5 0.11 272)

brand.secondary

oklch(0.62 0.09 230)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.25 0.012 272)

text.muted

oklch(0.47 0.014 272)

text.link

oklch(0.5 0.11 272)

surface.base

oklch(0.985 0.002 272)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.962 0.004 272)

border.default

oklch(0.905 0.006 272)

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

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Slate is built for dashboards that live open in a tab all day. Cool greys do the heavy lifting; indigo appears only where the eye needs to go. The tone is matter-of-fact and engineering-grade — readable density over decoration.

Layout & Grid

Tight 4px rhythm, compact rows, and aligned numeric columns in mono. Panels separate with hairline borders rather than heavy shadows.

Components

Buttons

Medium-weight labels, radius.md corners, and a restrained shadow.sm. Destructive actions switch to color.state.danger.

Tables

Zebra-free; rows divide with color.border.default. Sort and filter affordances are quiet until hovered.

Accessibility

All text passes WCAG AA on base and raised surfaces. Numeric data uses tabular figures, and every interactive element has a visible focus ring.

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: slate

4name: Slate

5title: Slate — Neutral Dashboard System

6version: 1.0.0

7category: saas

8tags: [saas, neutral, dashboard, indigo, data]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.5 0.11 272)", type: color }

17 secondary: { value: "oklch(0.62 0.09 230)", type: color }

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

19 text:

20 primary: { value: "oklch(0.25 0.012 272)", type: color }

21 muted: { value: "oklch(0.47 0.014 272)", type: color }

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

23 surface:

24 base: { value: "oklch(0.985 0.002 272)", type: color }

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

26 sunken: { value: "oklch(0.962 0.004 272)", type: color }

27 border:

28 default: { value: "oklch(0.905 0.006 272)", 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: "IBM Plex Sans, system-ui, sans-serif", type: fontFamily }

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

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

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

45 weight:

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

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

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

49 leading:

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

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

52 spacing:

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

54 radius:

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

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

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

58 shadow:

59 sm: { value: "0 1px 2px oklch(0.25 0.01 272 / 0.07)", type: shadow }

60 md: { value: "0 6px 18px oklch(0.25 0.01 272 / 0.09)", type: shadow }

61 motion:

62 duration:

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

64 easing:

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

66 breakpoint:

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

68 iconography:

69 style: { value: "1.5px stroke, square caps, geometric", type: descriptor }

70 zIndex:

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

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

73---

75# Slate Design System

77## Brand & Voice

78Slate is built for dashboards that live open in a tab all day. Cool greys do the

79heavy lifting; indigo appears only where the eye needs to go. The tone is

80matter-of-fact and engineering-grade — readable density over decoration.

82## Layout & Grid

83Tight 4px rhythm, compact rows, and aligned numeric columns in `mono`.

84Panels separate with hairline borders rather than heavy shadows.

86## Components

87### Buttons

88Medium-weight labels, `radius.md` corners, and a restrained `shadow.sm`.

89Destructive actions switch to `color.state.danger`.

91### Tables

92Zebra-free; rows divide with `color.border.default`. Sort and filter affordances

93are quiet until hovered.

95## Accessibility

96All text passes WCAG AA on base and raised surfaces. Numeric data uses tabular

97figures, and every interactive element has a visible focus ring.

Related systems

View →

Button

Cobalt

98AA

Cobalt — Clean & Confident SaaS

saassaasblue

View →

Button

Beacon

98AA

Beacon — Calm Teal SaaS

saassaasteal

View →

Button

Pulse

98AA

Pulse — Vibrant SaaS

saassaasviolet