Lime Wash
#ebffb1Primary CTA fill (Start Building button) — a pale lime that glows against the bone canvas like a fresh highlighter mark
Base44
base44.comWebsite preview
The design language
Base44 operates in a sunlit, near-monochrome workspace language: a warm off-white canvas (#faf9f7) holds flat white cards with whisper-thin borders and almost no shadow, letting air and generous spacing carry the visual weight. Typography splits between a custom geometric sans for UI chrome and a lighter display face for headlines that breathe at 48-56px with tight tracking — authority through spaciousness, not density. Three signature colors punctuate this quiet system: a lime-green CTA (#ebffb1 fill, #ade900 border) that makes the primary action glow like a fresh highlighter, a vivid orange (#ff631f) reserved for the logo and decorative accents, and a sunset gradient band that breaks the monochrome with warmth. Components feel lightweight and fast — fully-rounded pill buttons, 8px-radius cards, ghost inputs, and minimal elevation. Motion is gentle and spring-like (cubic-bezier(0.22, 1, 0.36, 1)) with everything easing into place rather than snapping.
Color palette
brand
Lime Edge
#ade900Green accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color
Ember Orange
#ff631fLogo color, decorative fill accents, secondary action — vivid orange used sparingly to anchor brand identity
Sunset Gradient
#ffae53Full-bleed section banner — a warm peach-to-coral gradient used as a single atmospheric band between content sections
accent
Sky Wash
#5db3cfHero radial gradient — a cool blue-cyan that radiates from the top of the hero section, giving the page an airy open-sky feeling
neutral
Canvas Bone
#faf9f7Page background, section bands, large surface fills — the warm off-white that defines the entire atmosphere
Card White
#ffffffCard surfaces, elevated panels, input backgrounds, footer — pure white sitting on the bone canvas
Ink Black
#0f0f0fPrimary text, filled action buttons, icon strokes, nav color — the dominant near-black that carries all type and the filled dark CTA
Graphite
#232529Secondary text, button text, nav strokes — slightly softer than Ink Black for de-emphasized copy
Hairline
#d1d1d1Default 1px borders on cards, inputs, dividers — the thinnest structural line
Soft Border
#e6e6e6Secondary borders, subtle surface backgrounds — softer than Hairline for nested edges
Muted Ink
#a0a0a0Tertiary text, disabled states, muted icon strokes
Typography
Type scale
Major Second (1.125) · 16px basedisplay
56px · 400 · 1.05The quick brown fox jumps
heading-lg
54px · 400 · 1.2The quick brown fox jumps
heading
48px · 400 · 1.05 · -0.96px trackingThe quick brown fox jumps
heading-sm
25px · 400 · 1.2The quick brown fox jumps
text-24
24px · 400 · 1.42The quick brown fox jumps
subheading
20px · 400 · 1.1The quick brown fox jumps
text-18
18px · 400 · 1.3The quick brown fox jumps
text-17
17px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
WixMadeforText
- Weights
- 400, 500, 700
- Sizes
- 12, 14, 16, 18
- Line height
- 1.25, 1.30, 1.50
- Letter spacing
- 0.025em at 12px, 0.18em uppercase at 12px, normal at 16px
- Fallback
- Inter
Primary UI sans — body text, buttons, nav, inputs, badges, all chrome. The geometric forms and slightly expanded tracking on small sizes (0.025em at 12px, 0.18em uppercase) give it a friendly, slightly humanist feel that keeps 16px body text comfortable to scan
Additional typeface
WixMisoRegular
- Weights
- 400
- Sizes
- 20, 24, 48, 54, 56
- Line height
- 1.05, 1.10, 1.20, 1.42
- Letter spacing
- -0.0200em
- Fallback
- DM Serif Display or Source Serif Pro at matching weight
Display headline face — used at 48-56px with tight tracking (-0.02em) and very tight line-height (1.05). The single weight at 400 creates a calm, confident headline that doesn't shout — authority through spaciousness. Body sizes (20-24px) share the same character, keeping the type system coherent across scales
Additional typeface
WixMisoLight
- Weights
- 400 (light cut)
- Sizes
- 17, 25
- Line height
- 1.20, 1.50
- Fallback
- DM Serif Display Light or a lighter serif like Lora at matching weight
Secondary display — lighter weight version for subheadings (25px) and lead body text (17px), creating tonal contrast against the Regular headlines. Same family guarantees harmony while the weight difference adds hierarchy without size jumps
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 16px
Border radius
tags
9999pxcards
8pxinputs
8pxbuttons
9999pxlarge-cards
30pxSpacing scale
2px3px4px6px7px8px9px10px12px16px20px22px24px25px28px32px37px40px58px80px90px94px115px120px236px316pxGuidelines
Do
- Use WixMisoRegular at 48-56px weight 400 with -0.96px tracking for all primary headlines — the single-weight serif creates calm authority without shouting
- Set all buttons and tags to 9999px (pill) radius — the fully-rounded shape is the system's defining silhouette
- Use #ebffb1 fill + #ade900 border for the primary CTA, never plain black or blue — the lime glow is the brand's signature action
- Maintain hairline borders at 1px #d1d1d1 for all structural dividers — never use heavier borders or visible elevation to separate content
- Keep the page canvas at #faf9f7 (warm bone) and use #ffffff only for cards that need to lift off the canvas — the two-tone surface system is the entire depth model
- Apply the uppercase eyebrow label treatment (12px, 0.18em tracking, weight 500) to all section labels — it transforms small text into architectural wayfinding
- Use cubic-bezier(0.22, 1, 0.36, 1) for all entrance animations — the spring-like ease-out matches the warm, unhurried atmosphere
Don’t
- Don't add drop shadows to cards — the system uses background contrast (white on bone) for hierarchy, not elevation. Reserve the single shadow for the hero prompt card only
- Don't use #ff631f orange on text or large fills — it's reserved for the logo, decorative accents, and the submit circle inside the input
- Don't set headline weight above 400 — the system uses weight and tracking for hierarchy, not boldness. Heavier weights would break the calm, spacious feel
- Don't use saturated blue for links or actions — the system has no traditional 'info blue'; interactive elements are either lime, black, or ghost
- Don't create dark sections — the page is entirely light-mode. Use the sunset gradient band for atmospheric breaks, never a full dark background
- Don't use borders heavier than 1px — the hairline aesthetic is the entire structural language. Thicker borders feel heavy and corporate
- Don't use corner radii below 8px on any surface — the system rounds generously (8px cards, 30px hero card, 9999px pills). Sharp corners clash with the warm, friendly tone
Components
Lime CTA Pill
Primary action buttonFully rounded pill (9999px radius), filled #ebffb1 with a 1px #ade900 border, #0f0f0f text, 8px/16px padding, 14-16px WixMadeforText weight 500. The lime-on-lime-edge combo makes the primary action glow — it should be the most colorful element on any page
Ink Filled Pill
Secondary dark actionFully rounded pill (9999px radius), solid #0f0f0f fill with #ffffff text, 0px/21.6px horizontal padding. Used for dark-mode CTAs and 'Get started' variants where the lime pill isn't appropriate
Ghost Pill Button
Tertiary action, suggestion chipsTransparent background, #232529 or #0f0f0f text, 1px #d1d1d1 border, 9999px radius, 8px/12px padding. Used for the suggestion chips ('Reporting Dashboard', 'Gaming Platform') beneath the hero input
Frosted Nav Pill
Sticky header CTA containerSemi-transparent white background (rgba(255,255,255,0.4)) with backdrop-filter blur(6px), 9999px radius, 1px border at rgba(15,15,15,0.15). The frosted-glass treatment makes the nav feel weightless and floating
Text Link Button
Inline nav and footer linksNo background, no border, #0f0f0f text at 16px WixMadeforText weight 400. Zero padding — sits inline with nav items. Underline appears on hover only
Flat White Card
Standard content card, FAQ items, feature blocksPure white #ffffff fill, 8px radius, 1px #d1d1d1 border, no shadow, 24px padding. The absence of shadow keeps the page feeling flat and architectural — hierarchy comes from background contrast (white card on bone canvas), not elevation
Soft Shadow Card
Hero input container, elevated prompt cardNear-white #fefcfb fill, 30px radius, soft shadow rgba(0,0,0,0.07) 0px 6px 20px 0px. Used sparingly — only for the central hero input and elements that need to feel lifted and interactive. The 30px radius is much larger than standard cards, marking it as a 'focal' surface
Ghost Input
Prompt input, search fieldTransparent background inside a Soft Shadow Card container, no border, #0f0f0f placeholder text, 25px top padding, 16px horizontal padding, 28px left padding (for icon). The input feels like writing on a clean sheet rather than filling a form field
Orange Submit Circle
Action trigger inside inputSolid #ff631f fill, circular shape (~40px), white arrow icon centered. The vivid orange against the white card creates a single hot-spot of color — the one moment where the brand orange becomes functional
Uppercase Eyebrow Label
Section labels, category tags12px WixMadeforText weight 500, letter-spacing 0.18em, uppercase, #232529 color. Used for labels like 'NOT SURE WHERE TO START? TRY ONE OF THESE:' — the wide tracking transforms small text into architectural labels
Accordion FAQ Row
FAQ itemNo background, no card — just a 1px #d1d1d1 bottom border, full-width row, question text in WixMadeforText 16px #0f0f0f, plus icon on the right. The flat list with hairline dividers replaces traditional card-based FAQs
Top Navigation Bar
Site headerSticky header, #faf9f7 background, max-width 1200px centered, logo left (orange disc + black wordmark), nav links centered (Product, Use Cases, Resources, Pricing, Enterprise), language toggle + frosted lime CTA right. Height ~56px
Sunset Gradient Band
Atmospheric section dividerFull-bleed band using the sunset gradient (transparent → peach #ffe0de → orange #ffae53 → coral #ff7f47 → transparent). Used as a single horizontal band between content sections to break the monochrome without requiring a full dark section
Surfaces & elevation
Level 0
Canvas Bone
#faf9f7Page background, large section fills — the warm off-white that defines atmosphere
Level 1
Card White
#ffffffContent cards, FAQ rows, standard elevated surfaces — pure white sitting on bone
Level 2
Soft Cream
#fefcfbHero prompt card, focal interactive surfaces — nearly-white cream with the single soft shadow
Level 3
Lime Wash
#ebffb1Primary CTA fill — the action surface that breaks the monochrome
Elevation is deliberately minimal: most surfaces are flat with hairline borders, and the single soft shadow (rgba(0,0,0,0.07) 0px 6px 20px) is reserved for the hero prompt card only. Depth comes from background contrast (white card on bone canvas) and generous spacing, not from stacked shadows. The system treats elevation as an exception, not a tool.
Layout & imagery
Layout
Max-width 1200px centered container with generous side padding. The hero is a full-bleed light section with a centered headline stack (56px display + 18px subtext) and the prompt input card as the visual anchor, all sitting under a sky-blue radial gradient wash. Below the hero, a full-bleed sunset gradient band breaks the monochrome before returning to the bone canvas for content sections. Section rhythm is consistent: large vertical breathing room (~80px section gaps), centered text stacks alternating with asymmetric two-column layouts. The FAQ section uses a split layout: left-aligned heading column and right-aligned accordion list. Navigation is a sticky top bar with frosted-glass CTA pill, logo left, centered nav, and actions right. The footer is a dark band (contrasting with the light body) at the very bottom.
Imagery
Imagery is minimal and product-focused: the hero features a centered prompt-input card (the product itself as the hero visual), followed by full-bleed gradient bands (sky-blue radial wash, sunset horizontal band) that act as atmospheric dividers rather than decorative images. No photography, no stock illustrations, no product screenshots in the visible sections. Icons are simple line/stroke style in #0f0f0f, with the brand logo using a solid orange disc with black horizontal lines (a stylized database/server icon). The visual density is text-dominant with the product UI (the input card) serving as the primary visual anchor.
Design notes
Agent Guide
primary action: #0f0f0f (filled action) Create a Primary Action Button: #0f0f0f background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. ## Quick Color Reference - Text (primary): #0f0f0f - Text (secondary): #232529 - Background (canvas): #faf9f7 - Surface (card): #ffffff - Border (hairline): #d1d1d1 ## Example Component Prompts 1. **Hero prompt card**: White #fefcfb surface, 30px border-radius, soft shadow rgba(0,0,0,0.07) 0px 6px 20px. Inside: transparent ghost input with #0f0f0f placeholder text, 25px top padding, 28px left padding for icon. Orange #ff631f circular submit button (~40px) on the right with white arrow icon. 3. **FAQ accordion row**: Full-width row with 1px #d1d5 bottom border, no background, WixMadeforText 16px #0f0f0f question text left-aligned, plus icon (#0f0f0f stroke) right-aligned. No card wrapping, no padding beyond vertical breathing room. 4. **Display headline**: WixMisoRegular 48px weight 400, #0f0f0f color, line-height 1.05, letter-spacing -0.96px. Centered or left-aligned on #faf9f7 canvas. Never bold — the single weight at 400 is the entire hierarchy tool. 5. **Uppercase eyebrow label**: WixMadeforText 12px weight 500, letter-spacing 0.18em, uppercase, #232529 color. Place above section headings as wayfinding — the wide tracking transforms small text into an architectural label.
Motion Philosophy
Motion is gentle and spring-like, matching the warm unhurried atmosphere. Primary easing: cubic-bezier(0.22, 1, 0.36, 1) for entrances (spring-out), standard ease for color/border transitions (0.15-0.16s). The named animation 'fade-in-up' handles content entrance. Durations are short (0.15-0.3s for micro-interactions, up to 2s for ambient animations). Everything transitions: color, background-color, border-color, fill, stroke, transform, and opacity — but never layout properties. The frosted nav pill uses backdrop-filter blur(6px) to create a floating weightless header.
Similar brands
Linear
Same single-accent approach — Linear uses a purple action color against a dark canvas; Base44 uses lime against a warm bone canvas with the same restraint
Vercel
Both use generous whitespace, hairline borders, and minimal elevation; Vercel's Geist typography and Base44's WixMiso share the same single-weight display approach
Framer
Same fully-rounded pill buttons, warm off-white canvas, and atmospheric gradient bands breaking up monochrome content sections
Notion
Both use a nearly-monochrome palette with a single vivid accent color, ghost inputs that feel like writing on paper, and generous spacing that lets content breathe
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
