Ui Design

Patterns & examples

Styling with Lip Gloss

Use a consistent pattern for styling TUI components.

• Pattern, Define base styles for common elements like headers, borders, and focused items. Use padding and margins to create breathing room.

Colour palette selection

Choose colours that are accessible and look good on most terminal themes.

• Good, Use high-contrast colours for primary actions and subtle shades for background elements. Avoid relying purely on colour for meaning.

Keyboard shortcuts display

Make it easy for users to discover and remember shortcuts.

• Example, Display a footer or sidebar with common shortcuts like [q] quit, [?] help, or [enter] select.

Status and progress

Keep the user informed about background tasks.

• Pattern, Use a spinner for tasks with unknown duration and a progress bar for tasks with a known number of steps.

Anti-patterns to avoid

• ❌ Information overload, crowding the screen with too many elements. Use spacing and progressive disclosure to keep it simple.
• ❌ Illegible colour combinations, using colours that are hard to read on certain backgrounds (e.g., light yellow on white).
• ❌ Rigid layouts, designing UIs that break when the terminal window is resized.
• ❌ Hidden focus, failing to clearly indicate which element is currently selected or has focus.

KB Reference

~/vaults/baphled/3. Resources/Knowledge Base/AI Development System/Skills/UI-Frameworks/UI Design.md

Related skills

• ux-design, for designing the interaction flow.
• bubble-tea-expert, for building TUIs with the Elm architecture.
• huh, for building interactive forms.
• accessibility, for making your TUI inclusive.
• vhs, for recording terminal demos to evaluate visual clarity.