跳到正文
UIGrammer
EN 中文

风格 · 19

终端

终端 = 黑底等宽字、提示符光标、单一荧光色;写着「工程师造的」。

黑底等宽字,一个闪烁光标。

整页 整体
卡片
按钮
顶栏
标签

终端是什么?

终端把命令行当设计语言。写明等宽字栈、一个 $ 提示符和一处荧光色。它是没有圆角卡片的 dark-ui。

元素

  • 全等宽字
  • 闪烁光标
  • 提示符前缀

把这个词写进 Prompt。

典型色

  • #0A0E0A
  • #33FF66
  • #FFB000

用在

  • 开发者工具
  • 基础设施与 CLI 产品
  • 极客 ethos 品牌
Prompt 配方

[组件] + 终端 + 等宽字 + 提示符光标 + 荧光色

BUILD - Build a complete Terminal marketing homepage. Not a card, not an isolated navbar, not a dashboard, not tabs. - Domain from Use on: developer tools, infra and CLI products, hacker-ethos brands first; consumer reuse only the mono, not the prompt metaphor. STYLE - Terminal: monospace on near-black, a single phosphor accent, prompt prefixes, a blinking cursor - Page #0A0E0A; primary text green #33FF66 at 88% alpha; accent amber #FFB000 for one mark per line; dim rule #1C3A1C - Radius 0 everywhere. No cards-with-shadows, no rounded corners, no gradient, no glass - Type: a monospace stack (JetBrains Mono / IBM Plex Mono). No sans for UI, no system font - A `~/` prompt before the wordmark, a `$` before hero commands, a ▋ block cursor after the last hero line LAYOUT - Container max-width 1120px, mono, left-aligned. Every block is a flat near-black panel with a 1px dim-green rule, not a floating card - Top bar is shell chrome: `~/north` left, `~/product` `~/docs` links, `./start` CTA right — all prompt-prefixed, 1px bottom rule - Whitespace is generous but mechanical; nothing is a soft blob SECTIONS 1. Hero: a `$ build` command line, an oversized headline "Built by engineers.", one dek line, `./start` CTA plus `:docs` ghost 2. Three output blocks: ship, measure, price — each a `$` line, kicker, one line, `less` link 3. Feature band: two columns, left a `$ cat` cover block of mono lines, right a numbered list of four claims 4. Pricing strip: three flat panels, the middle one with a full-green border 5. Closing CTA band: a wide panel with one amber `./start` CTA 6. Three-column shell footer: ~/product / ~/company / ~/colophon INTERACTION - Hover brightens borders to full green and speeds the cursor blink; links gain a 1px green underline. No lift, no soft shadow - Focus is a 2px solid #33FF66 outline, never a glow - The hero cursor blinks on a steady 1s step; respect prefers-reduced-motion by freezing it MOTION - Motion is minimal and mechanical: a 1s cursor blink, a 120ms border brighten on hover, nothing eases - Use steps(), no bounce, no slide. The only "animation" is the cursor and an optional type-in on the hero command - Entrance is a monospace type-in (character by character) on the hero `$` line, 20ms per char; other blocks appear instantly - prefers-reduced-motion: no blink, no type-in, states change instantly TECHNICAL - React, Tailwind CSS, a .term panel (mono + prompt prefix + cursor). One homepage route. DON'Ts - Do not call this dark-ui: Terminal has zero rounded corners and zero cards-with-shadows; dark-ui is a charcoal dashboard - No sans for UI, no rounded pills, no gradient, no glass, no blur - No color other than green and amber, no neon magenta, no photo - Do not output only a headline plus two empty cells. Do not clone one `$` line as the whole page