Wes Ellis./ a personal notebook
Technology. Stories. Side projects.
A few things worth writing down.
SearchSubscribe
← Back to Web Design

Web Design

Fine Use: Sketching a Terminal-Style Design System

By Wes Ellis4 min read
The keys of a cream-colored vintage typewriter on a rustic table.

Part 5 of the thread The design notebook

PROJECT AT A GLANCEPrototype
What it is
Design system
My role
Creator
Year
2025
Built with
  • React
  • CSS
  • Python
  • PySide6
Source code ↗
THE SHORT VERSION4 points
  • A terminal-inspired design system aimed at dev tools, CLI-style apps and retro-themed web apps.
  • The README names 34 planned components across input, display, navigation, feedback and layout (its status section counts 55).
  • The repo has CSS themes, HTML demos, a handful of React files and a Python version with tkinter, PyQt and PySide6 code.
  • Its own status section says plainly: most of those React components aren't built yet.

Terminal-style interfaces are usually hand-rolled: a monospace font, some green text, a blinking cursor, and every screen solving the same layout problems again. A design system is supposed to stop that repetition. So what would one look like if the terminal were the starting point, not a theme bolted on later?

fine-use-design-system is my attempt at the answer. The package description sums up the intent: a terminal-inspired design system prioritizing functional density, real-time data visualization and geometric precision.

What it's meant to be

The README frames Fine Use as a React component library for developer tools, CLI applications and retro-themed web apps. The planned component list is long. It names 34 of them, grouped like this, and the status section further down talks about 55:

Group Components
Input Terminal, CommandInput, SearchBar, CodeInput, PasswordField, AutoComplete, CommandPalette
Display CodeBlock, LogViewer, JSONViewer, DiffViewer, MarkdownRenderer, SyntaxHighlighter, DataTable, TreeView
Navigation FileExplorer, Breadcrumbs, TabBar, Sidebar, ContextMenu, StatusBar, ToolBar
Feedback ProgressBar, Spinner, Toast, Alert, LoadingDots, StatusLight
Layout SplitPane, Panel, Window, Grid, Modal, Drawer

The API sketches are the part I'd point a designer at. A <Terminal> takes a prompt symbol, a theme and an onCommand handler. A <FileTree> takes data, a selection handler and the paths to keep open. Custom themes are a plain object (background, foreground, accent, font family, size) handed to a ThemeProvider, with TypeScript types planned throughout.

What's actually in the repo

Here's where I'll be straight with you, because the README is too. Its own project status section says the React and TypeScript components described above aren't implemented, and calls the repo closer to a design specification than a working library.

What does exist:

  • CSS themes. Retro and editor palettes (amber, VT220, synthwave, gruvbox, monokai, sakura, newspaper, GitHub light and dark) plus a set of industry-flavored ones: financial, healthcare, real estate, construction and community. A universal-config.json sits alongside them.
  • Core CSS and HTML demos. Pages for terminal, input, navigation and feedback components, a file browser, block visualizations and a font-size demo.
  • A few React files, like LogTerminal, DataTable, ProgressBars and ControlPanels, as plain JSX.
  • A Python implementation. Core, adaptive, tkinter and PyQt modules, and a PySide6 demo with its own themes, a dashboard layout and widgets for buttons, a log terminal, metrics and a theme selector.

That last one is the interesting detour. The same visual language is carried into desktop Python apps, so a Qt dashboard and a web page can look like they belong to the same family.

Note

The README calls this a portfolio and demonstration project, and says components may need more testing and refinement before production use. Take that at face value.

How it differs from Terminal UI Components

Fine Use shares a lot of DNA with Terminal UI Components: the same core CSS, demo pages and docs set. The split is scope. Terminal UI Components is the pure CSS kit: HTML, classes, a theme on <body>, no JavaScript. Fine Use is the bigger ambition: a React API, TypeScript, a theme provider, the industry themes and the Python side. One is something you can use on a static page now. The other is a plan for a full system.

Poking at it

If you want to look around, the README's development steps are the way in:

git clone https://github.com/wesellis/fine-use-design-system
cd fine-use-design-system
npm install
npm run dev

npm run dev just serves the folder with Python's built-in web server on port 8080, which is all you need to click through the HTML demos.

Heads up

The README's npm install fine-use-design-system and import { Terminal } ... examples describe the planned API. With the components unbuilt, don't expect those imports to work.

What's next

The README's own recommendation is the right one: either build the components out, or label the repo clearly as a design specification. For now it's useful as a reference for what a terminal-first system could include, and as a starting point for whoever builds the first real component. It's MIT licensed, and contributions are welcome.

LINKED FROM1 note

Keep reading