---
schema_version: 1
id: "terminal-utility"
name: "Terminal Utility"
summary: "A readable command index and chronological information panels with a consistent monospace voice."
family: "technical"
tags: ["monospace", "precise", "task-led"]
best_for: ["services", "documentation", "data"]
avoid_for: []
density: "dense"
image_dependency: "low"
motion_level: "subtle"
complexity: "low"
signature: {"composition": "Dense command index in A; chronological log beside a summary rail in B.", "typography": "System monospace throughout, with explicit timestamp and command hierarchy.", "navigation": "Plain text section links, command disclosures and a separate log index.", "content_rhythm": "Short input/output explanations or chronological events with supporting panels.", "imagery": "No image dependency; original text, rules and status notation.", "color_and_material": "Dark green-black surfaces, pale text and restrained green accents.", "interaction": "Native service details, a local log search and a filter with pressed state.", "motion": "Static output, no blinking cursor; brief transitions removed for reduced motion."}
status: "ready"
prompt_path: prompts/terminal-utility/prompt.en.md
---

# Terminal Utility

## Intent

Terminal Utility presents a small technical practice as a useful, readable command surface. The fictional Shellwick studio explains operational services with concise verbs, visible parameters and honest output examples. It suits documentation, technical services and public project logs. The page is a website, not an executable terminal: visitors follow links and open explanations without entering shell commands. Familiar console notation provides orientation while semantic HTML remains the actual interface.

## Signature

Keep four invariants: a consistent monospace voice; dense but aligned text rows; explicit command, timestamp and status labels; and navigation that behaves like a readable text index. A uses expandable command descriptions to explain services. B switches to a chronological operations notebook with supporting summary panels. Both retain short measures within wider information bands. The dark green surface is a useful example palette, but alignment, notation and truthful state labels carry the identity more than the color alone.

## Typography

Use system Courier New with a monospace fallback for display and body roles. Large headings are still typographic anchors, not giant decorative code fragments. Small uppercase metadata needs sufficient line height and letter spacing. Separate timestamps, verbs and explanations through weight and spacing instead of requiring color to decode them. Long command-like labels may wrap at safe boundaries. Keep ordinary explanatory prose close to its associated label, and avoid wide paragraphs of dense monospaced text.

## Color and surfaces

A nearly black green ground holds pale readable text, a soft green accent and muted gray-green notes. Raised panels use a slightly lighter semantic surface. Thin borders divide information regions without turning every sentence into a floating card. Status labels include words as well as color. All interface colors use generated token variables, including outlines, secondary copy and control states. No bitmap texture, scanline filter or luminous glow should reduce the clarity of small text.

## Layout A

A compact Shellwick header leads to a large terminal-style introduction and a clearly labeled demonstration command. Three native command disclosures explain audit, repair and handoff services with useful inputs and expected deliverables. A numbered runbook describes the actual sequence a customer would discuss with the practice. Each disclosure links to matching log entries, and the closing scope note points to the separate log composition. This is a service index with progressive detail, not a conventional sales hero followed by feature cards.

## Layout B

Open with a snapshot heading and a plain date label. A narrow side panel summarizes the fictional run, while the wider column contains timestamped change and note entries. Real filter buttons and a local search narrow the entries; a status bar and live count report the visible result, and index links open the log pre-filtered. A native disclosure explains the sample data boundary. Finish with a return link and demonstration identity. Chronology and supporting panels replace the command-first service explanation used in A.

## Imagery

This direction does not require photographs or generated images. Rules, simple status markers and short textual output examples are original HTML and CSS. An empty asset registry is intentional: it records that no external fonts, images or textures are needed. If adapting to technical screenshots, give each image a specific explanatory task and a useful alternative description. Avoid decorative source-code wallpaper, random hexadecimal strings and meaningless charts that imply information without giving the reader anything to inspect.

## Navigation and interaction

Use ordinary section links and a visible link between the two compositions. Native details controls provide keyboard-operable service explanations. The B log filter uses real buttons, aria-pressed state and a politely announced result count. Hidden entries leave the interaction order and return when the matching filter is selected. The filter is a local view of a static sample, not a network query. Never show a command prompt that appears to accept input unless that interaction is genuinely implemented.

## Motion

The references use only short color changes on links and buttons. There is no blinking cursor, typing simulation or repeated status pulse. Reduced-motion removes nonessential transitions entirely. All content is readable in a still screenshot and remains available with animation disabled. A future live log may add new rows, but should preserve scroll position and explain freshness without constant motion. Do not borrow terminal animation conventions that make a readable document harder to navigate.

## Responsive behavior

At desktop widths the service descriptions use compact aligned labels and explanations. The log uses a summary rail beside the chronological list. At tablet widths reduce outer padding while maintaining readable row spacing. At 360 pixels the summary moves before the log, timestamps move above their messages and command disclosures wrap naturally. Navigation and filter buttons wrap instead of overflowing. No horizontal code scroller is required to understand the service offering or inspect the fictional entries.

## Accessibility

Use one main landmark and page heading, visible focus and a skip link. Status words and timestamps remain readable without color. Native disclosures expose their open state, and filter buttons maintain pressed state and an announced count. Evidence separates actual responsive, keyboard, resource and axe checks from visual judgment. Lithuanian glyph loading and real background-token consumption are tested in the browser. These checks apply to the references and do not establish universal WCAG certification for every future adaptation.

## Adaptation

Replace fictional services and sample events with truthful project-specific information. Preserve the command-label-to-explanation relationship in A and the timestamp-to-message relationship in B. A WordPress page or React component can use the same semantic details, buttons and ordinary links without introducing a terminal emulator. Label real data freshness and avoid presenting static examples as current system health. If the target audience is unfamiliar with console notation, explain the verbs in plain language rather than expecting shell knowledge.

## Avoid

1. Do not add an inert input line that pretends to execute commands; links and disclosures must reveal their real behavior. 2. Do not use scanlines, glow or tiny text as a substitute for a readable technical hierarchy. 3. Do not label fictional snapshot values as live monitoring; statuses carry a text label, never colour alone.

## Closest styles

Industrial Spec is the nearest ready technical neighbor. Terminal Utility uses command-like service disclosures, a purpose panel and timestamped filterable logs. Industrial Spec organizes dimensioned elevations, a compact specification sheet and two-view envelope comparison. Command/runbook/log navigation differs from product/specification/drawing routes. Chronological state records and monospace operations differ from static geometric evidence and dimensional rows. Data Observatory is another comparison: quarter metrics, synchronized chart changes and exact sortable numeric records replace textual operational entries. P13 compares actual A/B desktop/mobile compositions and records compact secondary labels as a bounded limitation rather than a full mobile-quality claim.