SuperCLI brand and design guidelines · v1
One mark.
One shared language.
From the first discovery to your next command.
Consistent visuals, clear paths, and purposeful motion.
Brand identity
S for Super. And for your next command.
A folded geometric ribbon forms the S, echoing the rhythm of a command line. The lower-right dash is a cursor. The mark works on its own without a terminal window frame.
SuperCLIPrimary mark · Klein Blue
Minimum mark size: 16 px. Clear space should be at least ¼ of the mark width. Do not stretch, rotate, or add shadows. Vendor icons use original brand assets.
Your next command. More possibilities.
Tool names come first, descriptions second. Use tabular numerals and system monospace for commands. Type scale and color establish hierarchy.
npm install -g wrangler
Information architecture and page flow
Discover → Compare → Use → Contribute
All tools share one directory. Categories and vendors are filters; there are no separate vendor / community directories.
Brand purpose, real tool examples, and use cases.
Start exploring →Categories and rankingsNarrow your choicesCombine keywords, vendors, and use cases with explicit sorting and snapshots.
Browse cloud tools →Tool detailsDecide where to startPurpose, installation, sources, licenses, and shareable direct links.
View Wrangler →Contribution flowShare your experienceAdd information → Open a PR → Local verification → Manual merge.
How to contribute →These are live pages and views. Home, directory, and contributions share a page; tool details use URL parameters for direct access, and brand guidelines have their own page.
Components and states
Clear feedback at every step.
Buttons, search, empty states, dialogs, and feedback share tokens. These demos use the directory styles.
Primary and secondary actions
Hover communicates intent, focus stays visible, and pressing gives subtle feedback. Disabled controls do not respond to clicks.
Search and empty results
Directory filters are saved in the URL for sharing.
View a real empty state →Details and sources
Native dialogs manage focus. Escape closes them and returns focus to the trigger. Sources and installation notes remain readable.
Open real tool detailsLoading and failure
The directory loads statically with the page, without simulated loading animations. Missing GitHub metrics show Unranked; failed clipboard operations leave commands available for manual copying.
View tool information →Motion guidelines
Visible changes. Uninterrupted actions.
Motion supports entry, focus, and confirmation. No automatic carousels, typing loops, or cursor-following decoration.
Start quickly. Settle gently.
150 ms: button feedback
240 ms: card and detail entry
360
ms: homepage entry
cubic-bezier(0.16, 1, 0.3, 1)
Motion uses only transform and opacity. With Reduce Motion enabled, movement and entry animations stop while all actions remain available.