Agentic

Agentic is the look of software that thinks one step ahead. It feels calm but proactive: the interface anticipates intent, explains its reasoning, and always offers a clear, confident next action. Reach for it when you are building assistants, copilots, or automation tools where the product should feel like a capable collaborator rather than a passive form.

Design principles

• Lead with the next action. Every screen surfaces a single, named recommendation the user can accept, tweak, or dismiss.
• Make reasoning visible. Suggestions carry a short "why" so the system feels intelligent, not opaque.
• Feedback is adaptive and continuous. State changes (thinking, running, done) are always animated and legible.
• Confidence is a first-class signal. Rank suggestions and visually weight high-confidence items.
• Keep the canvas dark and focused so accents and live indicators read as the most important elements.
• Reduce decision load. Offer chips and presets before asking the user to type from scratch.

Color

The base is a deep blue-black background (#0B0D17) with a slightly lifted surface (#151826) for cards and panels. The violet primary (#6D5CE7) drives all primary actions and active states, while the mint secondary (#22E5A4) signals success, completion, and live system activity. Foreground text is near-white (#EEF1FA); muted slate (#A8B0C8) handles secondary copy and metadata. Borders are a quiet #262B3D so structure stays subtle. For a light variant, invert to a #F6F7FB background, #FFFFFF surfaces, #1A1D2B foreground, and keep the same violet and mint accents, darkening the mint to #0FB680 to hold contrast on light fields.

Typography

Headings use Space Grotesk for a modern, slightly technical voice, set tight at -0.02em tracking and weights 600-700. Body copy is Inter at 400-500 with comfortable 1.6 line-height for streaming text legibility. Labels and chips use uppercase Inter at 500 with +0.04em tracking. Monospaced JetBrains Mono carries inline code, tokens, and tool names. The scale follows a 1.2 minor third so dense panels stay readable without dominating headers.