developer toolsv1.0.0·dark

Circuit

Circuit — Electric Dark Dev Tools

developer-toolsdarkcyanlimeelectric

38 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

circuit · rendered from tokens

Color

brand.primary

oklch(0.75 0.13 195)

brand.secondary

oklch(0.8 0.16 125)

brand.onBrand

oklch(0.15 0.02 230)

text.primary

oklch(0.93 0.01 220)

text.muted

oklch(0.71 0.018 220)

text.link

oklch(0.75 0.13 195)

surface.base

oklch(0.17 0.012 235)

surface.raised

oklch(0.215 0.014 235)

surface.sunken

oklch(0.13 0.01 235)

border.default

oklch(0.31 0.016 235)

state.success

oklch(0.8 0.16 125)

state.danger

oklch(0.68 0.2 25)

state.warning

oklch(0.82 0.16 90)

state.info

oklch(0.75 0.13 195)

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

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Circuit is a dark dev console with current running through it: electric cyan, acid lime, and a faint glow on the active element. Built for observability, infra, and CLIs that earn their dark mode.

Layout & Grid

Dense dark panels with monospace logs and metrics. A cyan glow marks the live region; the lime color.brand.secondary confirms healthy status.

Components

Buttons

Sharp radius.sm buttons in cyan with dark onBrand text and a subtle glow on hover. Shortcuts shown inline.

Logs & Metrics

Monospace rows on color.surface.base with color.border.default dividers; status uses state colors plus a glyph so meaning never relies on hue.

Accessibility

Glowing but legible: light and muted text pass WCAG AA on the dark surfaces. Glows are decorative shadows, accents stay bright, and motion is near-instant.

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

4name: Circuit

5title: Circuit — Electric Dark Dev Tools

6version: 1.0.0

7category: developer-tools

8tags: [developer-tools, dark, cyan, lime, electric]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [dark]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.75 0.13 195)", type: color }

17 secondary: { value: "oklch(0.8 0.16 125)", type: color }

18 onBrand: { value: "oklch(0.15 0.02 230)", type: color }

19 text:

20 primary: { value: "oklch(0.93 0.01 220)", type: color }

21 muted: { value: "oklch(0.71 0.018 220)", type: color }

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

23 surface:

24 base: { value: "oklch(0.17 0.012 235)", type: color }

25 raised: { value: "oklch(0.215 0.014 235)", type: color }

26 sunken: { value: "oklch(0.13 0.01 235)", type: color }

27 border:

28 default: { value: "oklch(0.31 0.016 235)", type: color }

29 state:

30 success: { value: "{color.brand.secondary}", type: color }

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

32 warning: { value: "oklch(0.82 0.16 90)", type: color }

33 info: { value: "{color.brand.primary}", type: color }

34 typography:

35 family:

36 mono: { value: "IBM Plex Mono, ui-monospace, monospace", type: fontFamily }

37 sans: { value: "IBM Plex Sans, system-ui, sans-serif", type: fontFamily }

38 scale:

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

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

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

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

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

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

45 weight:

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

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

48 leading:

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

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

51 spacing:

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

53 radius:

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

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

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

57 shadow:

58 sm: { value: "0 1px 2px oklch(0 0 0 / 0.4)", type: shadow }

59 md: { value: "0 0 24px oklch(0.75 0.13 195 / 0.2)", type: shadow }

60 motion:

61 duration:

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

63 easing:

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

65 breakpoint:

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

67 iconography:

68 style: { value: "1.25px stroke, circuit-like, glowing", type: descriptor }

69 zIndex:

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

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

72---

74# Circuit Design System

76## Brand & Voice

77Circuit is a dark dev console with current running through it: electric cyan,

78acid lime, and a faint glow on the active element. Built for observability,

79infra, and CLIs that earn their dark mode.

81## Layout & Grid

82Dense dark panels with monospace logs and metrics. A cyan glow marks the live

83region; the lime `color.brand.secondary` confirms healthy status.

85## Components

86### Buttons

87Sharp `radius.sm` buttons in cyan with dark `onBrand` text and a subtle glow on

88hover. Shortcuts shown inline.

90### Logs & Metrics

91Monospace rows on `color.surface.base` with `color.border.default` dividers;

92status uses state colors plus a glyph so meaning never relies on hue.

94## Accessibility

95Glowing but legible: light and muted text pass WCAG AA on the dark surfaces.

96Glows are decorative shadows, accents stay bright, and motion is near-instant.

Related systems

View →

Button

Terminal

98AA

Terminal — Dense Developer Tools

developer toolsdeveloper-toolsdark

View →

Button

Compile

98AA

Compile — Light Developer Tools

developer toolsdeveloper-toolslight

View →

Button

DesignMD

100AA

DesignMD — The system that themes itself

developer toolscleanmodern