Design System
Pure white backgrounds everywhere. Black text for titles. Light grey for cards and secondary elements. No gradients, glows, shadows, outlines, or decorative colors — ever. Every screen should feel clean, calm, and precise.
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Pure white backgrounds everywhere. Black text for titles. Light grey for cards and secondary elements. No gradients, glows, shadows, outlines, or decorative colors — ever. Every screen should feel clean, calm, and precise.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Sidebar
Default
Do's & Don'ts
Do
Don't
Icons
UnknownUnknown
Icon preview not available for this library
Library: Unknown · Style: solid
Core Principles
Pure white backgrounds everywhere. Black text for titles. Light grey for cards and secondary elements. No gradients, glows, shadows, outlines, or decorative colors — ever. Every screen should feel clean, calm, and precise.
---
Color
The palette is intentionally tight. White is the background, always. Cards use light grey — either a slightly warm #f5f5f5 or a cooler #efefef, with a darker shade #e8e8e8 for nested or pressed states. Text is black. Secondary text is light grey. The only accent color is blue #0057ff, used exclusively on send buttons. Pill buttons are light grey with black text.
No other colors are introduced. No tints, no brand colors, no decorative fills.
---
Cards
Cards have a light grey background and gently curved corners — rounded but not pill-like. There are no shadows, no borders, no outlines, and no glow. Padding inside cards is generous and consistent. Cards animate in on load with a subtle upward fade using Framer Motion.
---
Buttons
All buttons are pill-shaped with fully rounded corners. The default button is light grey with black text. The only non-grey button is the send button, which is either a small black circle or a small blue circle depending on context. There are no black rectangular buttons, no filled colored buttons other than the send button, and no button outlines.
The active or selected state of a pill button shifts to a slightly darker grey. Button presses animate with a gentle scale-down.
---
Input Boxes
Input boxes are 110px tall, light grey, with softly rounded corners. They are centered on the page with a generous max-width. There is no border, no outline, and no shadow.
The send button sits inside the input box, pinned to the bottom-right corner. It is a small circle — never touching the sides or corners of the input box, always with clear spacing around it. It is either black or blue with a white arrow inside.
For non-chat tools like search or tracker pages, the input is instead a thin pill — around 48px tall — centered on the page. The send button sits inside it the same way.
---
Sidebar — Desktop
The sidebar is thin and contains only icons — no labels, no section headers, no dividers. It sits flat against the background with no visual separation from the main content. Icons are small but legible. The active icon gets a light grey rounded background. Inactive icons are grey. The sidebar never draws attention to itself.
---
Bottom Nav Bar — Mobile
On mobile, a fixed bottom bar replaces the sidebar. Each tab is an icon. The active tab has a light grey pill background and a black icon. Inactive tabs show grey icons. Labels are omitted unless space clearly allows. The bar sits flush at the bottom with safe-area padding.
---
AI Agent Side Panel
AI assistant features always appear as a right-side panel — never a modal, never inline, never a floating bubble.
The panel flows top to bottom: a centered header at the very top, a scrollable message area in the middle, and a fixed input area at the bottom. The header shows the agent name with a single sparkle icon beside it, centered on a transparent background — no card, no pill, no container around it.
The input area is 110px tall and floats at the bottom of the panel. The send button is blue with a white upward arrow, positioned in the bottom-right of the input area with consistent spacing — never flush against any edge. The panel has no borders, no shadows, and no internal dividers. It slides in from the right with a spring animation.
---
Animations
All apps use Framer Motion. Cards and list items enter with a short upward fade, staggered by index for lists. The agent side panel slides in from the right with a spring. Pill buttons scale down slightly on press. Animations are subtle and fast — never decorative or attention-seeking.
---
AI Features
All AI-powered features use Gemini 2.0 Flash Lite as the model. No other model is used.
---
Layout
Standard padding is 24px. Compact contexts use 16px. Spacious sections use 32px. Gaps between cards are 12px. Gaps between inline elements are 8px. Max content width is 720px, always centered.
The main content area can sit inside a light grey rounded container with the navigation flat in the background — no separator line between them. The home screen for chat-style tools centers the tall 110px input box. The home screen for utility tools — search, trackers, and similar — centers a thin pill input with supporting elements around it. Each tool type gets its own appropriate home layout, never a generic one.
---
What Never to Do
No gradients. No glows. No shadows. No card borders or outlines. No emojis. No Inter, Roboto, Arial, or system fonts. No black rectangular buttons. No generic AI layouts. No light-grey titles on white — titles are always black. No HugeIcons on send buttons. No identical home layouts across different tool types.
Use with MCP
Don't have the MCP? Install it here