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

## 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)