Developer Terminal

STYLEKIT_STYLE_REFERENCE
style_name: Developer Terminal
style_slug: developer-terminal
style_source: /styles/developer-terminal

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a Developer Terminal design expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden
- Any sans-serif / serif font (font-sans, font-serif)
- White or light backgrounds (bg-white, bg-gray-50, etc.)
- rounded-lg or larger radii (only rounded-sm and rounded-none allowed)
- Gradients bg-gradient-* and glassmorphism backdrop-blur
- Photography or illustration (a terminal only has glyphs)
- A 5th accent color (only #8BE9FD / #FF79C6 / #FFB86C / #6272A4 allowed)
- Heavy shadows shadow-md and above

## Must Follow
- font-mono globally
- Background #0A0E12, panels #0D141B, borders border-[#1F2937]
- Primary text phosphor green #4AF626; comments start with # in #6272A4
- Section headings start with a prompt prefix: visitor@stylekit:~$ command
- Headings or inputs carry a blinking cursor block (w-2 h-4 bg-[#4AF626] animate-pulse)
- Organize content as command + output pairs; lists as ls -la aligned output
- Status via exit code badges: [0] OK (green) / [1] ERR (magenta #FF79C6)
- End pages with a tmux style status bar
- Separate sections with ASCII rules (------)

## Color Semantics
- #4AF626 green: primary output, success, prompt commands
- #8BE9FD cyan: paths, links, usernames, info
- #FF79C6 magenta: keywords, errors, destructive actions
- #FFB86C amber: strings, numbers, warnings
- #6272A4 blue-gray: comments, secondary info, inactive items

## Motion & Interaction
- Cursor blink via steps() or animate-pulse, roughly 1s period
- Hover only shifts background alpha (hover:bg-[#4AF626]/10) or border brightness; no translate or scale
- Optional faint scanline texture (repeating-linear-gradient, alpha under 0.03)
- Use transition-colors duration-150

## Responsive
- Mobile: still a single-column terminal window, text-xs/text-sm, tables scroll horizontally
- Desktop: terminal window centered around max-w-5xl, keep an 80-column feel

## Self-Check
1. No non-mono font anywhere on the page
2. No gradients, glassmorphism, heavy shadows, or images
3. Every section reads as the output of a command
4. Color carries semantics only, never decoration
5. A tmux status bar exists at the bottom and at least one cursor blinks

---

# Developer Terminal Design System

> Turn a website into a terminal session: phosphor-green mono text, prompt prefixes, paired command-and-output blocks, and a tmux status bar. Tool authenticity as developer identity.

## Design Philosophy

Developer Terminal does not imitate how a terminal looks; it borrows how a terminal speaks. For developers, the terminal is home -- the most honest, efficient, decoration-free tool they own. Building a personal site as a terminal session is a statement: my identity needs no marketing page, the tool itself is my business card.

Core concepts:
- Content as output: every block of content is the result of a command. Visitors are not "browsing a page", they are "reading a session" -- headings are prompts, body copy is stdout, errors are stderr
- Tool authenticity: a real terminal has no gradients, no shadows, no photography. Only monospace glyphs, a cursor, and color semantics. This restraint is not poverty -- it is professionalism itself
- Color as syntax highlighting: phosphor green for primary output, cyan for paths and links, magenta for keywords and errors, amber for strings and warnings, blue-gray for comments. Color never decorates, it only means
- Session liveness: a blinking cursor implies the session is still open; a tmux status bar implies the system is still running. The page is not a static document, it is a living process

The paradox of terminal aesthetics: it looks the least "designed", yet demands the strictest design discipline -- a single sans-serif glyph or gradient block shatters the whole illusion.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#1F2937]
Radius: rounded-sm
```

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-none
hover: hover:shadow-none
focus: ring-1 ring-[#4AF626]/60
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:bg-[#4AF626]/10
Hover opacity: (none)
Transition: transition-colors duration-150
Active: active:bg-[#4AF626]/20
```

### Typefaces
```
Heading: font-mono font-bold tracking-tight
Body: font-mono
Mono: font-mono
```

### Type scale
```
Hero: text-2xl md:text-4xl
H1: text-xl md:text-2xl
H2: text-lg md:text-xl
H3: text-base md:text-lg
Body: text-sm
Small: text-xs
```

### Spacing
```
Section: py-8 md:py-12
Container: px-4 md:px-6
Card: p-4
Gap sm: gap-2
Gap md: gap-3
Gap lg: gap-5
```

### Color roles
```
Background primary: bg-[#0A0E12]
Background secondary: bg-[#0D141B]
Background accent: bg-[#4AF626], bg-[#8BE9FD], bg-[#FF79C6], bg-[#FFB86C]
Text primary: text-[#4AF626]
Text secondary: text-[#8BE9FD]
Text muted: text-[#6272A4]
Button primary: bg-[#4AF626] text-[#0A0E12] hover:bg-[#3FD41F]
Button secondary: bg-transparent text-[#4AF626] border border-[#1F2937] hover:border-[#4AF626]/60
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `font-sans`
- `font-serif`
- `bg-white`
- `bg-gray-50`
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-full`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `backdrop-blur`

### Banned patterns
- matches `^font-(sans|serif)`
- matches `^bg-(white|gray-50|gray-100|slate-50)`
- matches `^rounded-(lg|xl|2xl|3xl|full)`
- matches `^shadow-(md|lg|xl|2xl)`
- matches `^bg-gradient-`
- matches `^backdrop-blur`

### Why they are banned
- `font-sans`: Developer Terminal is monospace-only; every glyph must be font-mono
- `bg-white`: Terminals are near-black; use bg-[#0A0E12] or bg-[#0D141B]
- `rounded-lg`: Terminal chrome stays flat and sharp; rounded-sm is the maximum radius
- `shadow-md`: Terminals are flat surfaces; no elevation shadows
- `backdrop-blur`: No glassmorphism; a terminal renders opaque character cells

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
font-mono
text-sm
rounded-sm
transition-colors duration-150
```

### Every card must include
```
font-mono
bg-[#0D141B]
border border-[#1F2937]
rounded-sm
```

### Every input must include
```
font-mono
bg-[#0A0E12]
border border-[#1F2937]
rounded-sm
text-[#4AF626]
caret-[#4AF626]
placeholder:text-[#6272A4]
focus:outline-none focus:border-[#4AF626]/60
```

---

## [COMPARE] Developer Terminal wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="font-mono text-sm rounded-sm transition-colors duration-150 bg-[#4AF626] text-[#0A0E12] hover:bg-[#3FD41F]">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="font-mono bg-[#0D141B] border border-[#1F2937] rounded-sm p-4">
  <h3 class="font-mono font-bold tracking-tight text-base md:text-lg">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="font-mono bg-[#0A0E12] border border-[#1F2937] rounded-sm text-[#4AF626] caret-[#4AF626] placeholder:text-[#6272A4] focus:outline-none focus:border-[#4AF626]/60" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Developer Terminal page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#0A0E12] text-[#4AF626] border border-[#1F2937] px-4 md:px-6">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-3">
    <a href="/" class="font-mono font-bold tracking-tight text-base md:text-lg">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-3 font-mono text-xs">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#4AF626] text-[#4AF626] py-8 md:py-12 px-4 md:px-6">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-mono font-bold tracking-tight text-2xl md:text-4xl">
      {HEADLINE}
    </h1>
    <p class="font-mono text-sm max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="font-mono text-sm rounded-sm transition-colors duration-150 bg-[#4AF626] text-[#0A0E12] hover:bg-[#3FD41F]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#0A0E12] text-[#4AF626] py-8 md:py-12 px-4 md:px-6">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-mono font-bold tracking-tight text-lg md:text-xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
      <!-- Card template - repeat for each card -->
      <div class="font-mono bg-[#0D141B] border border-[#1F2937] rounded-sm p-4">
        <h3 class="font-mono font-bold tracking-tight text-base md:text-lg">{CARD_TITLE}</h3>
        <p class="font-mono text-sm text-[#6272A4]">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="font-mono bg-[#0A0E12] border border-[#1F2937] rounded-sm text-[#4AF626] caret-[#4AF626] placeholder:text-[#6272A4] focus:outline-none focus:border-[#4AF626]/60" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#0D141B] text-[#8BE9FD] py-8 md:py-12 px-4 md:px-6">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
      <div>
        <span class="font-mono font-bold tracking-tight text-base md:text-lg">{LOGO_TEXT}</span>
        <p class="font-mono text-xs">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-mono font-bold tracking-tight text-base md:text-lg">{COLUMN_TITLE}</h4>
        <ul class="font-mono text-xs">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Developer Terminal post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `font-mono text-sm rounded-sm transition-colors duration-150`
- [ ] Card includes: `font-mono bg-[#0D141B] border border-[#1F2937] rounded-sm`
- [ ] Input includes: `font-mono bg-[#0A0E12] border border-[#1F2937] rounded-sm text-[#4AF626] caret-[#4AF626] placeholder:text-[#6272A4] focus:outline-none focus:border-[#4AF626]/60`

### Forbidden check
- [ ] Not using `font-sans`
- [ ] Not using `font-serif`
- [ ] Not using `bg-white`
- [ ] Not using `bg-gray-50`
- [ ] Not using `rounded-lg`
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-full`

### Style rule check
- [ ] Use font-mono everywhere, no exceptions
- [ ] Near-black bg-[#0A0E12] with phosphor green text-[#4AF626] as primary text
- [ ] Start section headings with a prompt prefix: visitor@stylekit:~$ command
- [ ] Use a blinking cursor block w-2 h-4 bg-[#4AF626] on headings or inputs
- [ ] Structure content as command + output pairs; comment lines start with # in text-[#6272A4]

### Style drift check
- [ ] Does not violate: Never use sans-serif or serif fonts (font-sans, font-serif)
- [ ] Does not violate: Never use white or light backgrounds (bg-white, bg-gray-50)
- [ ] Does not violate: Never use rounded-lg or larger radii (terminal chrome stays within rounded-sm)
- [ ] Does not violate: Never use gradients (bg-gradient-*) or glassmorphism (backdrop-blur)
- [ ] Does not violate: Never use photography or illustration (a terminal only has glyphs)

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Developer Terminal

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use sans-serif or serif fonts (font-sans, font-serif)
- use white or light backgrounds (bg-white, bg-gray-50)
- use rounded-lg or larger radii (terminal chrome stays within rounded-sm)
- use gradients (bg-gradient-*) or glassmorphism (backdrop-blur)
- use photography or illustration (a terminal only has glyphs)
- exceed 4 terminal accent colors (cyan/magenta/amber/blue-gray only)
- use heavy shadows shadow-md or above (terminals are flat)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] never use sans-serif or serif fonts (font-sans, font-serif)
- [ ] never use white or light backgrounds (bg-white, bg-gray-50)
- [ ] never use rounded-lg or larger radii (terminal chrome stays within rounded-sm)
- [ ] never use gradients (bg-gradient-*) or glassmorphism (backdrop-blur)
- [ ] never use photography or illustration (a terminal only has glyphs)