TerminalUI Design System

TerminalUI Design System mockup preview
Click to expand

Dark, monospaced, hacker-green-on-black design system for CLI-inspired web apps and terminal emulators

Primary#00FF41
Secondary#FF6600
Tertiary#00BFFF
Background#0D0D0D
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayJetBrains Mono · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headlineJetBrains Mono · 24px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

subheadJetBrains Mono · 18px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body_largeJetBrains Mono · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyJetBrains Mono · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body_smallJetBrains Mono · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

captionJetBrains Mono · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

overlineJetBrains Mono · 11px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

codeJetBrains Mono · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

Dark, monospaced, hacker-green-on-black design system for CLI-inspired web apps and terminal emulators

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

defaultactive

StatusChip

default

default

Default

default

Elevation & Depth

Subtle
Medium
Large
Overlay
Scanline

Do's & Don'ts

Do

Use JetBrains Mono for ALL text
Use inverted colors for hover/active states
Maintain 0px border radius
Include scanline CRT effects
Prefix interactive elements with CLI symbols

Don't

Use box shadows
Use background fills on buttons at rest
Use images/icons; only ASCII
Use line heights below 1.5 for body
Use easing curves in transitions
Download .md

License MIT
Uploaded yesterday
Version v1
File size 6.5 KB
Downloads 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/terminalui-design-system and implement it in my code

Don't have the MCP? Install it here