developer toolsv1.0.0·dark

Terminal

Terminal — Dense Developer Tools

developer-toolsdarkmonoterminaldense

38 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

terminal · rendered from tokens

Color

brand.primary

oklch(0.78 0.17 145)

brand.secondary

oklch(0.75 0.12 200)

brand.onBrand

oklch(0.15 0.01 150)

text.primary

oklch(0.92 0.012 150)

text.muted

oklch(0.7 0.02 150)

text.link

oklch(0.78 0.17 145)

surface.base

oklch(0.16 0.008 150)

surface.raised

oklch(0.205 0.01 150)

surface.sunken

oklch(0.12 0.006 150)

border.default

oklch(0.3 0.012 150)

state.success

oklch(0.78 0.17 145)

state.danger

oklch(0.68 0.2 25)

state.warning

oklch(0.82 0.16 90)

state.info

oklch(0.75 0.13 220)

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

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Terminal is for tools that live in a developer's muscle memory: monospace everywhere, phosphor green, and information density turned up. It's keyboard-first, fast, and unapologetically technical.

Layout & Grid

Compact rows, fixed-width columns, and tight 0.25rem rhythm. Everything aligns to a monospace grid so logs, diffs, and tables stay scannable.

Components

Buttons

Small, sharp radius.sm buttons; primary uses phosphor green with dark onBrand text. Keyboard shortcuts are shown inline.

Logs & Tables

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

Dense but readable: light and muted text pass WCAG AA on the dark surfaces. Focus is a bright ring, every action has a shortcut, 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: terminal

4name: Terminal

5title: Terminal — Dense Developer Tools

6version: 1.0.0

7category: developer-tools

8tags: [developer-tools, dark, mono, terminal, dense]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [dark]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.78 0.17 145)", type: color }

17 secondary: { value: "oklch(0.75 0.12 200)", type: color }

18 onBrand: { value: "oklch(0.15 0.01 150)", type: color }

19 text:

20 primary: { value: "oklch(0.92 0.012 150)", type: color }

21 muted: { value: "oklch(0.7 0.02 150)", type: color }

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

23 surface:

24 base: { value: "oklch(0.16 0.008 150)", type: color }

25 raised: { value: "oklch(0.205 0.01 150)", type: color }

26 sunken: { value: "oklch(0.12 0.006 150)", type: color }

27 border:

28 default: { value: "oklch(0.3 0.012 150)", type: color }

29 state:

30 success: { value: "{color.brand.primary}", 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: "oklch(0.75 0.13 220)", type: color }

34 typography:

35 family:

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

37 sans: { value: "Inter, 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.125rem", type: dimension }

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

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

44 "3xl": { value: "2.5rem", 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.375rem", 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 6px 18px oklch(0 0 0 / 0.5)", type: shadow }

60 motion:

61 duration:

62 base: { value: "100ms", 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, monospace-grid aligned", type: descriptor }

69 zIndex:

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

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

72---

74# Terminal Design System

76## Brand & Voice

77Terminal is for tools that live in a developer's muscle memory: monospace

78everywhere, phosphor green, and information density turned up. It's keyboard-first,

79fast, and unapologetically technical.

81## Layout & Grid

82Compact rows, fixed-width columns, and tight `0.25rem` rhythm. Everything aligns

83to a monospace grid so logs, diffs, and tables stay scannable.

85## Components

86### Buttons

87Small, sharp `radius.sm` buttons; primary uses phosphor green with dark

88`onBrand` text. Keyboard shortcuts are shown inline.

90### Logs & Tables

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

95Dense but readable: light and muted text pass WCAG AA on the dark surfaces.

96Focus is a bright ring, every action has a shortcut, and motion is near-instant.

Related systems

View →

Button

Circuit

98AA

Circuit — Electric Dark Dev 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