Bean Orange
#ff5310Decorative squiggle strokes, inline icon accent, brand heartbeat — warm vivid orange that defines the playful personality
Magicbeans
magicbeans.appWebsite preview
The design language
Magicbeans uses a playful Notion-adjacent language: warm off-white canvas, a single near-black pill CTA, and saturated color reserved exclusively for decorative squiggles and inline icons. The hero is the only loud element — a massive bold headline at 64px — and everything else stays quiet, monochrome, and border-driven rather than shadow-driven. Color functions as punctuation, never as structure: orange, green, and blue appear as tiny inline glyphs and wavy hand-drawn strokes scattered around the page edges, never as fills or buttons. Cards float on white against a slightly warm cream background, delineated by hairline gray borders rather than elevation, with a single layered card shadow used sparingly for the product screenshot only.
Color palette
brand
Bean Green
#44c67fDecorative squiggle fills, inline icon accent, growth-positive visual cue — saturated mid-green for energy without screaming
Bean Blue
#0098f1Decorative squiggle outlines, inline icon accent — the third color in the confetti triad used sparingly
accent
Mint Border
#81e9b0Green outline accent for tags, dividers, and focused UI edges
neutral
Ink Black
#1a1a19Primary text, pill CTA background, logo mark, icon strokes — near-black rather than pure black gives a softer, warmer feel than #000000
Pure Black
#000000Occasional hard-black fills for high-contrast accents and announcement bar
Charcoal
#333331Body text, link color, secondary headings — warmer than Ink Black, used when pure black feels too heavy
Slate Gray
#808080Muted helper text, placeholder content, disabled states
Hairline
#e5e7ebDefault border for cards, inputs, icons, nav separators, and table dividers — the most-used color in the entire system
Cloud
#f0f0f0Secondary card borders, subtle structural outlines
Warm Canvas
#faf9f7Page background — the slightly warm off-white that distinguishes this from a sterile pure-white SaaS look
Pure White
#ffffffCard surfaces, button text, elevated panels — the layer above the warm canvas
Mint Wash
#eaf7f0Soft green-tinted surface wash for highlighted sections, tag backgrounds, subtle callout zones
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
64px · 600 · 1The quick brown fox jumps
heading-sm
40px · 600 · 1.2The quick brown fox jumps
subheading
24px · 600 · 1.33The quick brown fox jumps
body-lg
17px · 600 · 1.5The quick brown fox jumps
text-16
16px · 400 · 1.5The quick brown fox jumps
text-15
15px · 500 · 1.5The quick brown fox jumps
text-14
14px · 600 · 1.43The quick brown fox jumps
caption
13px · 500 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 400, 500, 600, 700
- Sizes
- 13, 14, 15, 16, 17, 24, 40, 64
- Line height
- 1.2 (body), 1.0 (hero)
- Letter spacing
- normal at all sizes — Inter's natural tracking is tight enough that the 64px headline reads as confident rather than loose
- Fallback
- system-ui, -apple-system, 'Segoe UI', sans-serif
- Features
- "cv11", "ss01" on for the single-story 'a' and alternate 'l' — gives Inter a more characterful, less generic look
All text — single-family system. Hero at 64px/weight 600+ is the loudest element; body sits at 16-17px/weight 400. Inter is the obvious Notion-native choice, so it feels native to the product it serves. Weight 500 carries nav and button labels; 600-700 reserved for headlines.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 80-100px
- Card padding
- 32px
- Element gap
- 8-16px
Border radius
nav
8pxtags
9999pxcards
12-16pxinputs
8pxbuttons
9999pxSpacing scale
4px6px8px12px16px20px24px32px40px64px73px80px100px140px158px200pxGuidelines
Do
- Use #1a1a19 for all primary CTAs — never use a chromatic color as a button background
- Reserve saturated color (#ff5310, #44c67f, #0098f1) exclusively for decorative squiggles and inline icons — never as fills, backgrounds, or large text
- Use 1px solid #e5e7eb for all card and input borders; avoid shadows except on the product preview card
- Set page background to #faf9f7, not #ffffff — the warm off-white is what distinguishes the brand from generic SaaS
- Use border-radius 9999px for all buttons, tags, and pills; 12-16px for cards; 8px for nav and inputs
- Set the hero headline at 64px Inter weight 600-700 with line-height 1.0 — the massive headline is the page's visual anchor
- Include 3 hand-drawn squiggle decorations per major page section in rotating Bean Orange, Green, and Blue
Don’t
- Don't use #ff5310, #44c67f, or #0098f1 as CTA button backgrounds or large filled shapes — they are decorative only
- Don't apply heavy drop-shadows to content cards — only the product preview card gets elevation
- Don't use pure white #ffffff as the page background — always use #faf9f7 for the warm canvas
- Don't use border-radius below 8px on any element — the minimum radius in this system is 8px
- Don't introduce new chromatic colors outside the Bean Orange/Green/Blue triad + Mint accent
- Don't use letter-spacing modifications — Inter's natural tracking is already correct for all sizes
- Don't set body text below 14px or above 17px — the type system is intentionally compact for a productivity-tool feel
Components
Pill Primary CTA
The single call-to-action — always near-black with white text, fully roundedBackground #1a1a19, text #ffffff, Inter weight 500 at 16px, border-radius 9999px, padding 12px 24px. Used for the main action on every page. Inherits Notion's button language — small, confident, never oversized.
Ghost Text Link
Secondary navigation and inline linksText only, no background or border. Inter weight 400-500 at 14-16px in #1a1a19. Hover state is opacity 0.7. Examples: 'Pricing', 'Twitter' in the nav.
Product Preview Card
The dashboard screenshot container — the hero visual assetBackground #ffffff, border-radius 16px, the layered multi-stop shadow (rgba 0.01→0.04 over 94px vertical spread). This is the only component that uses a shadow stack — it gives the product screenshot a 'floating above the page' quality without looking heavy.
Hairline-Bordered Card
Standard content card for features, pricing tiers, or content blocksBackground #ffffff, border 1px solid #e5e7eb, border-radius 12px, padding 32px. No shadow — borders do the structural work. Keeps the page feeling light and Notion-document-like.
Mint-Highlighted Card
Featured/active card variant with green accent borderSame as hairline card but border-color #81e9b0 instead of #e5e7eb. Background may be #eaf7f0. Used to draw attention to recommended pricing tier or a featured feature.
Announcement Bar
Top-of-page message stripBackground #000000, text #ffffff, Inter weight 500 at 13-14px, centered, padding 6-8px vertical. High contrast to break from the warm canvas.
Squiggle Decoration
Hand-drawn wavy lines scattered around page edgesSVG strokes in #ff5310, #44c67f, or #0098f1. Appear as decorative accents near hero, feature sections, and footer. Stroke-width approximately 4-6px, no fill, freeform curves. These define the brand's playful personality.
Inline Brand Icon
Small colored glyphs embedded inside the hero headlineSVG icons in Bean Orange and Bean Green placed inline with hero text (e.g., the heart/bean icons in 'Your finances & invoices'). Size approximately 48-56px to match the cap-height of 64px Inter bold. These are the only place saturated color meets typography.
Nav Bar
Top navigation — minimal, asymmetricLogo left ('● magic beans' with small dot glyph), 2 text links right. Background transparent over #faf9f7. Height approximately 60-64px, no border, no shadow. Padding 0 24px.
Footer Background
Page footer surfaceBackground #faf9f7 matching canvas — no visual break, just structural separation by content.
Feature Icon Set
Small outlined icons for feature lists or grid cardsStroke-only, 1.5-2px stroke weight, color #1a1a19, typically 20-24px. Never filled. Notion-style line icons.
Surfaces & elevation
Level 0
Warm Canvas
#faf9f7Page background — the warm off-white that softens the entire page
Level 1
Pure White
#ffffffCard surfaces, elevated content, product screenshots
Level 2
Mint Wash
#eaf7f0Highlighted/featured card backgrounds, soft callout zones
Level 3
Charcoal Pop
#1a1a19CTA buttons, announcement bars, logo mark — the darkest surface
Shadow is reserved exclusively for the product preview card — it's the only element that should appear to float. All other cards use hairline borders (#e5e7eb) to define edges. This keeps the page feeling document-like and Notion-native rather than app-like.
Product Preview Card
0px 6px 13px rgba(0,0,0,0.04), 0px 24px 24px rgba(0,0,0,0.03), 0px 53px 32px rgba(0,0,0,0.02), 0px 94px 38px rgba(0,0,0,0.01)
Layout & imagery
Layout
Max-width 1200px centered. Hero is a centered single-column stack: massive 64px headline with inline colored icons, small body subtext, then black pill CTA. Below the hero, a single product preview card (dashboard screenshot) floats full-width with the layered shadow. The page uses generous vertical breathing room — 80-100px section gaps. Navigation is a minimal top bar with logo left and 2 text links right, no hamburger. Content sections are centered text blocks, not multi-column grids. The overall density is low — this is a marketing landing page, not a dashboard.
Imagery
No photography or product photography — the visual language is pure UI and hand-drawn decoration. The hero features a large product screenshot (Notion dashboard) as a single floating card. Decorative squiggles in orange, green, and blue are hand-drawn SVG strokes (not illustrations or icons) placed asymmetrically around page edges. Icons are thin-stroke line icons in #1a1a19, never filled. The overall visual register is 'playful productivity app' — the squiggles add personality that a sterile invoicing tool wouldn't have, but the absence of illustration or photography keeps it document-native.
Design notes
Agent Guide
**Quick Color Reference** - text: #1a1a19 - background: #faf9f7 - card surface: #ffffff - border: #e5e7eb - accent (decorative): #ff5310 / #44c67f / #0098f1 - primary action: no distinct CTA color **Example Component Prompts** 1. Create a hero section: background #faf9f7. Headline 'Your finances & invoices powered by Notion' at 64px Inter weight 600, color #1a1a19, line-height 1.0, centered. Embed a 48px orange #ff5310 heart icon inline after 'finances' and a 48px green #44c67f paper-plane icon inline before 'invoices'. Subtext at 17px Inter weight 400, color #333331, max-width 560px, centered, 24px below headline. Black pill button below subtext: bg #1a1a19, text #ffffff, Inter 16px weight 500, border-radius 9999px, padding 12px 24px, 24px gap above. 2. Create a product preview card: container with background #ffffff, border-radius 16px, padding 0 (image bleeds to edges), and shadow 0px 6px 13px rgba(0,0,0,0.04), 0px 24px 24px rgba(0,0,0,0.03), 0px 53px 32px rgba(0,0,0,0.02), 0px 94px 38px rgba(0,0,0,0.01). Max-width 900px, centered. 3. Create a feature card: background #ffffff, border 1px solid #e5e7eb, border-radius 12px, padding 32px. Title at 24px Inter weight 600 #1a1a19, body at 16px Inter weight 400 #333331, 16px gap between title and body. Optional 24px line-icon in #1a1a19 above title. 4. Create a top nav: background transparent (over #faf9f7), height 60px, padding 0 24px, flexbox with logo left ('● magic beans' at 15px Inter weight 500 #1a1a19, the dot is a 8px #1a1a19 circle) and 2 text links right ('Pricing', 'Twitter' at 14px Inter weight 400 #1a1a19, 24px gap between them). 5. Add decorative squiggles: 3 hand-drawn SVG curves (path-based, no fill, stroke-width 5, stroke-linecap round) placed absolutely around the hero — one orange #ff5310 in the top-left area, one green #44c67f in the bottom-right, one blue #0098f1 in the bottom-left. Each curve is a freeform S-shape approximately 80-120px wide.
Similar brands
Notion
Same Inter typeface, same warm off-white canvas, same hairline-border card language, same pill-shaped black CTAs — Magicbeans is intentionally Notion-native
Linear
Same minimal single-CTA landing pattern, same restraint with color, same massive bold hero headline anchoring the page
Stripe
Same generous vertical breathing room and centered single-column hero structure with product preview card below
Figma
Same playful use of hand-drawn decorative shapes (squiggles) around page edges to add personality without cluttering the interface
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
