| name | oneagent-frontend-design |
| description | Apply OneAgent's Ollama-inspired minimalist design system when creating or modifying frontend components. Use when building UI elements, styling components, or reviewing frontend code in the OneAgent project. Enforces strict grayscale palette, specific border-radius rules, SF Pro Rounded typography, and zero-shadow philosophy. |
OneAgent Frontend Design System
OneAgent uses an Ollama-inspired design system: radical minimalism with pure grayscale, rounded geometry, and zero shadows.
Core Principles
- Pure Grayscale — No chromatic colors except blue focus ring (
#3b82f6 at 50%)
- Zero Shadows — Depth from borders and background shifts only
- Rounded Geometry — Three-tier radius: 12px (containers), 8px (interactive), 9999px (pill, special cases only)
- Weight Restraint — Only 400 (body) and 500 (headings), never bold
Quick Color Reference
| Role | Color | Hex |
|---|
| Primary Text | Pure Black | #000000 |
| Page Background | Pure White | #ffffff |
| Secondary Text | Stone | #737373 |
| Button Background | Light Gray | #e5e5e5 |
| Borders | Light Gray | #e5e5e5 |
| Muted Text | Silver | #a3a3a3 |
| Dark Text | Near Black | #262626 |
| Subtle Surface | Snow | #fafafa |
| Focus Ring | Ring Blue | #3b82f6 (50%) |
Typography Rules
- Display/Headlines:
SF Pro Rounded, weight 500
- Body/UI:
ui-sans-serif, weight 400
- Code:
ui-monospace, weight 400
- Line Heights: 1.0 (headings), 1.43–1.56 (body)
Component Styling
Buttons
All buttons: padding: 10px 24px, border-radius: 8px
| Type | Background | Text | Border |
|---|
| Primary (Gray) | #e5e5e5 | #262626 | 1px solid #e5e5e5 |
| Secondary (White) | #ffffff | #404040 | 1px solid #d4d4d4 |
| CTA (Black) | #000000 | #ffffff | none |
Cards & Containers
- Background:
#ffffff or #fafafa
- Border:
1px solid #e5e5e5 when needed
- Radius:
12px
- Shadow: none
Inputs & Forms
- Background:
#ffffff
- Border:
1px solid #e5e5e5
- Radius:
8px
- Focus:
#3b82f6 ring
- Placeholder:
#a3a3a3
Tabs
- Radius:
8px
- Active:
#e5e5e5 background, #262626 text
- Inactive: transparent,
#737373 text
Tags
- Radius:
8px
- Background:
#e5e5e5
- Text: dark
Layout Rules
- Spacing base: 8px
- Button padding: 10px 24px (all buttons)
- Card padding: 24–32px
- Section spacing: 88–112px
- Max width: 1024–1280px centered
Do's and Don'ts
Do
- Use pure white (
#ffffff) background
- Use 8px radius on interactive elements
- Use 12px radius on containers
- Keep palette strictly grayscale
- Use SF Pro Rounded at weight 500 for headlines
- Maintain zero shadows
- Use monospace for code/terminal
Don't
- Introduce chromatic colors
- Use radius other than 12px/8px/9999px
- Add shadows
- Use font weights above 500
- Use gradients
- Add decorative illustrations
- Use borders heavier than 1px
- Add hover animations
Reference Files
Responsive Breakpoints
| Name | Width | Changes |
|---|
| Mobile | <640px | Single column, hamburger nav |
| Tablet | 768–850px | 2-column begins |
| Desktop | 850–1024px | Standard layout |
| Large | 1024–1280px | Max width |
Example Prompts
- "Create a button with
bg-[#e5e5e5] text-[#262626] rounded-[8px] px-6 py-2.5"
- "Style a card with
bg-white border border-[#e5e5e5] rounded-[12px] p-6 shadow-none"
- "Add a focus ring with
focus:ring-2 focus:ring-[#3b82f6]/50"
