Skip to main content

​
Buttons

Neo defines four distinct button types with strict usage hierarchy. Only one Primary Button is allowed per view.

​
Primary Button

The highest-emphasis call to action on any screen.
Navy background, white text, full opacity. Cursor pointer.
Limit to one Primary Button per view. It represents the single most important action the user can take.
Never place two Primary Buttons side by side. Demote the secondary action to a Secondary Button.

​
Secondary Button

Used for supporting actions alongside a Primary Button or as standalone mid-emphasis CTAs.
Outlined or subtle fill background. Navy text. Cursor pointer.

​
Optimise Prompts Button

A ghost-style button exclusively for prompt editing contexts. Always paired with a sparkle icon.
This button only appears within prompt configuration views. Do not reuse the sparkle + ghost pattern for other features.

​
Disconnect Button

A destructive ghost button used for disconnecting integrations or removing linked accounts. Requires a confirmation step.
Always require a confirmation dialog before executing the disconnect action. Never fire destructive operations on a single click.

​
Temperature Slider

A horizontal slider for controlling AI creativity/precision from 0.0 to 1.0.
Always display the current numeric value alongside the slider. Users need to see the exact setting, not just the position.

​
Text Inputs

​
Standard Text Input

Empty input with placeholder text in --color-disabled. Border is --color-border.

​
Text Input with Image Upload

Same specs as Standard Text Input, with an image upload icon button (20x20) positioned inside the input on the right edge. Clicking it opens a file picker filtered to image types.
A select menu with a list of text options. Same dimensions as Text Input (536x40, 5px radius). Chevron-down icon on the right. Options panel appears below with 8px gap and --radius-md corners.
Each option includes a label (—type-label-lg) and a description line (—type-caption) below it. Option rows are taller to accommodate the two lines. Use when options need explanation.
Options are grouped under section headers (—type-label-sm, uppercase). Each option has label + body copy. Use for categorized option lists like model selection.
Use the simplest dropdown variant that communicates the options clearly. Only add body copy or headers when options genuinely need explanation.
Never render more than 8-10 options in a visible dropdown list. Use search/autocomplete for longer lists (e.g., model selection with 300+ items).

​
Toggle

A binary on/off switch for settings and feature flags.
Toggles take effect immediately — no save button required. If the change needs confirmation, use a checkbox + save button pattern instead.

​
Upload Cards

​
Document Upload Card

Dimensions: 347 x 86px. Displays file name, size, and a progress/status indicator.
File icon + name + size on the left. Green check-circle icon on the right. Background: --color-white. Border: --color-border.

​
Instagram Upload Card

Same 3 states and dimensions as Document Upload Card, but with an image thumbnail (48x48, --radius-sm) on the left instead of a file icon.
Always show a retry action on failed uploads. Never leave the user in a dead-end state.
Do not auto-dismiss failed upload cards. The user must acknowledge the failure or retry.

​
Usage Credit Card

Displays organization credit consumption. Dimensions: 359 x 199px.
Empty progress bar. Gray fill. Usage text shows “0/0 / X used.” Clean starting state.
The overage state must be visually unmistakable. Use the red OVERAGE badge, red progress bar, and red text together — never omit any of the three indicators.

​
Data Tables

All tables use --type-body for cell content, --type-label-sm for column headers, and --color-border for row dividers.

​
Agent Table (4 columns)

​
User Table (6 columns)

​
Knowledge Base Table (7 columns)

Paginate tables beyond 20 rows. Provide search and column sorting on all tables.
Never render an unbounded table. Always set a page size and show a “Load More” or pagination control.