Magicbeans

# Magicbeans — Style Reference
> Notion-esque productivity canvas
Theme: light

Magic Beans employs a clean, Notion-inspired aesthetic with abundant white space and high-contrast typography. Accents of vibrant orange and green punctuate the monochrome base, primarily through subtle iconography, adding a touch of playfulness to an otherwise business-focused interface. Emphasis is placed on clear information hierarchy through distinct text sizing and bold headings, while soft card shadows and fully rounded buttons suggest an approachable, user-friendly experience.

## Colors
| Name | Value | Role |
|------|-------|------|
| Canvas White | `#ffffff` | Page backgrounds, card surfaces, UI elements |
| Ghostly Gray | `#faf9f7` | Secondary card backgrounds, footer background – subtle depth against Canvas White |
| Carbon Black | `#000000` | Primary text, button backgrounds, accent elements, notification bars – high contrast for readability |
| Graphite | `#1a1a19` | Strong text, primary action text on light backgrounds, button backgrounds – used almost interchangeably with Carbon Black for core text and interactive elements |
| Charcoal | `#333331` | Secondary text for body copy and headings, providing a softer alternative to Graphite while maintaining contrast |
| Light Steel | `#e5e7eb` | Hairline borders, subtle dividers, ghost button borders – provides visual separation without heaviness |
| Fog | `#f0f0f0` | Card borders, providing a slightly darker demarcation than Light Steel |
| Subtle Gray | `#808080` | Muted helper text, placeholder text |
| Magic Orange | `#ff5310` | Orange text accent for links, tags, and emphasized short phrases. |
| Magic Green | `#44c67f` | Green text accent for links, tags, and emphasized short phrases |
| Accent Green | `#81e9b0` | Lighter variant of Magic Green, used for decorative borders and subtle backgrounds in Notion-style UI elements |
| Product Blue | `#0098f1` | Accent for product illustrations and occasional informational highlights |

## Typography
| Family | Role |
|--------|------|
| Inter | Primary typeface for all UI elements, headings, and body copy. Its versatility across weights supports a clear content hierarchy on the Notion-inspired surfaces while maintaining legibility. |