themx
← Back to themes

Terminal / Developer

minimalist Visual style

Monospace interfaces with explicit commands and status

Reference year: 2026

Compare this theme

Best for

Developer tools, Portfolio, SaaS

Less suitable for

  • Consumer checkout flows where terminal conventions need extra explanation.

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Terminal / Developer preview

Color Palette

Primary #4ADE80
Secondary #38BDF8
Accent #FACC15
Background #0D1117
Text #E6EDF3

Typography

Heading: Space Mono
Body: IBM Plex Mono

Key Characteristics

  • Monospace headings and body text
  • Dark surfaces with limited green and blue accents
  • Command prompts, code blocks, and explicit status labels
  • Thin borders and compact aligned content

Tags

terminal monospace cli code

Terminal design uses monospace type, aligned panels, and command examples to make technical content easy to scan. It is useful for developer products and portfolios that include actual code. Navigation should remain understandable without requiring command-line knowledge.

When to Use

This style suits developer products, technical portfolios, and SaaS documentation. Avoid it for consumer checkout flows where terminal conventions need extra explanation.

Key Visual Elements

Use code examples as content rather than decoration. Label actions and states in plain words. Avoid flashing cursors, automatic typing over important text, and color-only status messages. Give long code blocks their own horizontal scrolling area.

Typography

Space Mono provides distinct headings. IBM Plex Mono gives code, tables, and descriptions a consistent character width. Keep the body font large enough for sustained reading.

Export style

Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.

:root {
  --tx-surface-bg: #0D1117;
  --tx-font-heading: "Space Mono", sans-serif;
  --tx-font-body: "IBM Plex Mono", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #161B22;
  --tx-card-border: #30363D;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0.25rem;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #4ADE80;
  --tx-card-shadow-hover: 0 6px 16px rgba(0,0,0,0.1);
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: #B1BAC4;
  --tx-text-subtle: #8B949E;
  --tx-link-color: #4ADE80;
  --tx-button-radius: 0.25rem;
  --tx-input-bg: #0D1117;
  --tx-input-border: #484F58;
  --tx-text: #E6EDF3;
  --tx-primary: #4ADE80;
  --tx-secondary: #38BDF8;
  --tx-accent: #FACC15;
  --tx-media-filter: none;
}

Prompt Builder

Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.

Example projects:

Use your own components with the exported CSS variables.

Components

Changing the page purpose selects suggested components. You can adjust them below.

Optional design layers

Apply a layout, then a surface effect, then a color mode. Fonts stay with the base theme. The output contains one final token set.

Terminal / Developer

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Optional skills

Include skill references and installation instructions for your coding agent. Selecting a skill here does not install it.

Choose daisyUI or shadcn/ui to include its official skill.

Copy this prompt into your coding assistant. The task mode applies to the UI prompt.

Generated prompt

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Developer tools
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Terminal / Developer (visual-style)
- Monospace headings and body text
- Dark surfaces with limited green and blue accents
- Command prompts, code blocks, and explicit status labels
- Thin borders and compact aligned content

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #4ADE80, secondary #38BDF8, accent #FACC15, background #0D1117, text #E6EDF3
Typography: Space Mono for headings, IBM Plex Mono for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #0D1117;
  --tx-font-heading: "Space Mono", sans-serif;
  --tx-font-body: "IBM Plex Mono", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #161B22;
  --tx-card-border: #30363D;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0.25rem;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #4ADE80;
  --tx-card-shadow-hover: 0 6px 16px rgba(0,0,0,0.1);
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: #B1BAC4;
  --tx-text-subtle: #8B949E;
  --tx-link-color: #4ADE80;
  --tx-button-radius: 0.25rem;
  --tx-input-bg: #0D1117;
  --tx-input-border: #484F58;
  --tx-text: #E6EDF3;
  --tx-primary: #4ADE80;
  --tx-secondary: #38BDF8;
  --tx-accent: #FACC15;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Use aligned monospace sections, visible command examples, and compact status panels.
- Keep navigation and actions explicit. Wrap code or provide horizontal scrolling on small screens.

## Interaction
- Show copy confirmation and clear command status. Keep text stable without continuous typing effects.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Terminal / Developer: Consumer checkout flows where terminal conventions need extra explanation.

## Components
Generate the following components in this style:
- Sidebar
- Tables
- Forms

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.