OpenAI

# OpenAI Design System

## Visual Theme & Atmosphere
Clean, minimal, content-first. The interface fades into the background to let conversations and content take center stage. White surfaces with subtle gray borders create a calm, professional environment that emphasizes readability over decoration.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #10A37F | Brand accent, CTAs, links |
| Background | #FFFFFF | Main canvas |
| Surface | #F7F7F8 | Cards, input fields, secondary areas |
| Text | #202123 | Primary body text |
| Muted | #6E6E80 | Secondary text, placeholders |
| Border | #E5E5E5 | Dividers, input borders |
| Success | #10A37F | Positive states |
| Error | #EF4146 | Error states |
| Warning | #F5A623 | Warning states |

## Typography Rules
- **Heading Font**: Söhne, system-ui, sans-serif
- **Body Font**: Söhne, system-ui, sans-serif
- **Mono Font**: Söhne Mono, monospace
- **Base Size**: 16px
- **H1**: 2.25rem / weight 700
- **H2**: 1.75rem / weight 600
- **H3**: 1.375rem / weight 600
- **H4**: 1.125rem / weight 600
- **Body**: 1rem / weight 400 / line-height 1.6

## Component Stylings
- **Buttons**: Rounded (8px), primary fill or ghost variants, 32px height
- **Cards**: White background, 1px #E5E5E5 border, 12px radius, subtle shadow
- **Inputs**: Filled #F7F7F8 background, 1px border, 12px radius, focus ring with primary
- **Navigation**: Clean horizontal nav, logo left, minimal links

## Layout Principles
- Content max-width: 768px for reading
- Generous whitespace (32px+ between sections)
- 16px grid system
- Centered layout with balanced margins

## Depth & Elevation
- Level 0: Flat, no shadow (background)
- Level 1: 0 1px 2px rgba(0,0,0,0.05) (cards)
- Level 2: 0 4px 12px rgba(0,0,0,0.08) (dropdowns)
- No heavy shadows or dramatic elevation

## Responsive Behavior
- Mobile-first design
- Breakpoints: 640px, 768px, 1024px
- Single column on mobile, centered content
- Touch targets: minimum 44px