Design System inspired by IBM
Enterprise tech. Corporate blue, Carbon Design System, structured grid precision.
npx getdesign@latest add ibmRun this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.
Enterprise tech. Corporate blue, Carbon Design System, structured grid precision.
DESIGN SYSTEM INSPIRATION OF IBM
Enterprise tech. Corporate blue, Carbon Design System, structured grid precision.
Color Palette
Enterprise tech. Corporate blue, Carbon Design System, structured grid precision.
Typography
A type system inspired by IBM.
Cards
Card patterns inspired by IBM.
Components
Other component primitives mapped from the IBM spec.
Design System Inspired by IBM
1. Visual Theme & Atmosphere
Enterprise tech. Corporate blue, Carbon Design System, structured grid precision.
Key Characteristics:
- IBM Blue (#0F62FE) as primary brand color
- Carbon Design System with 2x grid
- IBM Plex type family (Sans, Mono, Serif)
- Structured enterprise grid precision
- Accessibility-first component design
2. Color Palette & Roles
Primary
- IBM Blue (
#0F62FE): Brand color - Blue 80 (
#002D9C): Brand color - Blue 20 (
#D0E2FF): Brand color - Gray 100 (
#161616): Brand color - Gray 80 (
#393939): Brand color - Gray 60 (
#6F6F6F): Brand color - Gray 10 (
#F4F4F4): Brand color - White (
#FFFFFF): Brand color - Red (
#DA1E28): Brand color - Green (
#24A148): Brand color
3. Typography Rules
Font Family
- Display & UI:
IBM Plex Sans,IBM Plex Mono,IBM Plex Serif
Hierarchy
| Role | Size | Weight | Line Height |
|---|---|---|---|
| Display | 64px | 700 | 1.1 |
| H1 | 48px | 700 | 1.2 |
| H2 | 32px | 600 | 1.3 |
| Body | 16px | 400 | 1.6 |
| Small | 14px | 400 | 1.5 |
| Code | 14px | 400 | 1.6 |
4. Component Stylings
Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.
5. Layout Principles
- Base unit: 4-8px
- Max container: 1100-1200px
- Consistent section spacing: 80-120px vertical
6. Depth & Elevation
Depth is communicated through background color shifts and subtle shadows or borders.
7. Do's and Don'ts
Do
- Follow the established color palette strictly
- Maintain typographic hierarchy
- Use brand-consistent border-radius
Don't
- Introduce off-brand colors
- Use inconsistent spacing
- Override the established visual language
8. Responsive Behavior
| Breakpoint | Width |
|---|---|
| Mobile | <640px |
| Tablet | 640-1024px |
| Desktop | >1024px |
9. Agent Prompt Guide
Quick Color Reference
- IBM Blue:
#0F62FE - Blue 80:
#002D9C - Blue 20:
#D0E2FF - Gray 100:
#161616 - Gray 80:
#393939 - Gray 60:
#6F6F6F
Typography
- Font:
IBM Plex Sans,IBM Plex Mono,IBM Plex Serif