Isla is a warm editorial apothecary: a cream-paper canvas, a single vivid red that does the work of an alarm clock, and a typographic mix of geometric sans (Soehne/Nimbus) paired with Garamond italic for emotional moments. The palette stays close to skin and paper — off-white, warm sand, blush, deep ink — with red appearing only as a small functional burst: CTAs, section eyebrows, add-to-cart fills, inline accents. Components are flat and quiet: 3px corners, hairline borders, no shadows, no gradients. Layout breathes; product photography carries the visual weight while type remains a composed voice — uppercase tracked labels over serif italics over sans body.
#e4263dPrimary action — filled add-to-cart buttons, CTA borders, section eyebrows, price accents, link underlines, and all brand punctuation against the cream canvas. The red carries the entire chromatic load; it must read as deliberate and small, never as decoration
#e4002bSecondary red accent — link borders, icon strokes, and outline-only controls. Slightly deeper than Crimson Seal; use when a quieter red moment is needed alongside the primary
#f5e7dfSoft accent badge fills, warm callout backgrounds — a desaturated peach that gives badge states a skin-like warmth
#000000Primary text, primary borders, navigation rules, body hairlines. The structural anchor of the entire interface
#1a1a1aBadge borders, heading text, list markers, card text on cream — a near-black used where pure black would feel clinical against the warm canvas
#2e2e2eNavigation borders, secondary structural lines — sits between Ink Black and the warm cream as a third depth
#3a3a3aBody text and borders for muted but still-readable paragraphs
#6f6f6fBadge borders, helper text, muted body copy — the first true mid-gray in the scale
#8a8580Warm-leaning gray for tags, secondary body text, and quiet fills where neutrality needs to harmonize with the cream
#e4dfd9Warm button borders, subtle section dividers — the border color that ties the warm palette together instead of fighting it with cool gray
#f8f6f3Page canvas, badge fills, soft card surfaces — the dominant background. Slightly warm to harmonize with product photography of amber liquids
#ffffffCard surfaces, button text on red, elevated product panels — the brightest surface that sits one step above the cream canvas
68px · 400 · 1The quick brown fox jumps
60px · 400 · 0.98The quick brown fox jumps
54px · 400 · 1.05The quick brown fox jumps
36px · 400 · 1.1The quick brown fox jumps
30px · 400 · 1.1The quick brown fox jumps
26px · 600 · 1.25The quick brown fox jumps
20px · 600 · 1.3The quick brown fox jumps
19px · 500 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary body face at comfortable reading sizes (13–16px). Cleaner, more humanist than Nimbus; used for longer paragraphs and form input text.
Workhorse sans for UI: button labels, body copy, price text, nav links, and all utility surfaces. Carries lnum/tnum features for tabular alignment of prices.
Display and small-bold sans for headlines (60px), navigation, and tracked uppercase labels (11–12px with 0.07–0.10em tracking). The Kraftig cut adds authority without geometric coldness.
Editorial serif for major section headlines (54px) and subheadings (17–26px). The Garamond weight gives the brand its apothecary/editorial voice; pairs with italic for emotional accents.
Signature italic for emotional phrases, pull quotes, and editorial interjections mid-paragraph. Used sparingly — it is a whisper, not a shout.
EB Garamond — detected in extracted data but not described by AI
3px999px3px3px3px1px2px3px4px6px7px8px10px12px14px15px16px18px20px24px25px29px30px32px36px40px45px50px56px60px88px96px100px240pxSolid #e4263d fill, white text, 3px radius, 10px 16px padding, Nimbus Sans 500 at 11px with 0.10em letter-spacing in uppercase. Full-width within product cards. Hover deepens to #e4002b.
Transparent fill, 1px #e4263d border, #e4263d text, 3px radius, 10px 16px padding, Nimbus Sans 500 at 11px uppercase. Paired with a price label in the same row, separated by middle dot.
No background, #000000 or #e4263d text, underlined on hover, Nimbus Sans 400 at 15px. Often paired with a small arrow character (→) to indicate direction.
Square product image on #f8f6f3 background, 3px radius, full-bleed within card padding of 15px. Product name in Nimbus Sans 700 at 15px; benefit description in Nimbus Sans italic at 13px (#000); price in 15px with strike-through original + red sale price. Followed by full-width Add to Cart button.
Nimbus Sans 500 at 11px, uppercase, letter-spacing 0.18em, #e4263d. Sits above headlines with 6–10px margin. The single most repeated brand element.
Garamond Italic 400 at 16–20px, #000, letter-spacing 0.005em. Used for emotional sub-copy like 'Or everything you need.' in #e4263d. Breaks the sans voice intentionally.
Full-width, #f8f6f3 or white background, centered Nimbus Sans 400 at 11px #000 text reading 'Free Shipping Above $75'. Repeats horizontally on a ticker pattern.
White background, '·isla' logo centered in red (the leading dot is a brand mark), nav links flanking in Nimbus Sans 400 at 13px #000. Login + Cart on right with 999px pill border around cart count.
999px radius, 1px #6f6f6f border, transparent fill, Nimbus Sans uppercase 11px text. Used in clusters to enumerate coverage categories (CLEANSE, HYDRATE, BRIGHTEN, REPAIR, EXFOLIATE, PROTECT).
Full-width card, #f8f6f3 fill, 3px radius, 15px padding. Left column: light illustration of 14 bottles on shelf. Right column: 6 Isla bottles with benefit pills below. Numbers (14 vs 6) in 54–68px Nimbus Sans bold.
No overlay, no text — just edge-to-edge product or skin photography (amber pour, eye close-up, glassware). Images carry 3px radius when contained, sharp edges when full-bleed.
Original price in #8a8580 strikethrough Nimbus Sans 400, sale price in #e4263d Nimbus Sans 700. Single line, left-aligned, 12–15px.
999px radius, #f5e7df or #f8f6f3 fill, 1px border in #1a1a1a or #6f6f6f, Nimbus Sans 400 at 10–11px uppercase. Used for category tags and editorial annotations.
#f8f6f3Page canvas — the warm base everything sits on
#ffffffCard surface, product image background, button text on red
#f5e7dfWarm accent fill for badges and soft callouts
#e4263dFilled action surface — Add to Cart, critical alerts
#7e7d7cMuted input/disabled surface for low-emphasis UI
Isla deliberately avoids shadow-based elevation. Depth is communicated through a 4-step surface scale (#f8f6f3 canvas → #ffffff cards → #f5e7df accents → #e4263d actions) and 1px hairline borders in #000000 or #e4dfd9. Components feel printed on paper, not floating in z-space.
Layout is max-width 1200px centered with generous vertical breathing. Hero is a split composition: bold left-aligned headline with eyebrow + italic sub-copy, paired with a large macro product image filling the right two-thirds. Product grids use 4 equal columns with consistent 15px internal padding. Section rhythm is consistent — eyebrow label, headline, body, optional CTA, then 50–64px gap before the next section. No alternating dark/light bands; the entire site lives on the cream canvas. Navigation is a thin top bar with centered logo, flanking nav, and a cart pill on the right.
Photography dominates the visual language. Style: macro product shots of amber liquid pouring from glass bottles and droppers, with natural light, soft white surfaces, and visible refraction. Skin imagery is close-cropped, unretouched-appearing, focused on eyes or lips. No lifestyle context, no models in full. Images are either full-bleed (no rounding) or contained in 3px-radius squares. The photography is the atmosphere; the typography is the architecture.
**Quick Color Reference** - text (primary): #000000 - text (muted): #6f6f6f - background (canvas): #f8f6f3 - border (hairline): #000000 or #e4dfd9 - accent (editorial italic / eyebrow): #e4263d - primary action: #e4263d (filled action) **Example Component Prompts** 1. Create a Primary Action Button: #e4263d background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. *Product card*: #ffffff card on cream canvas, 15px padding. Square product image (3px radius) at top. Product name in Nimbus Sans 700 at 15px #000. Italic benefit line in Nimbus Sans italic 400 at 13px. Price: $58.00 in #8a8580 strikethrough, $50 in #e4263d bold. Full-width Add to Cart button below: #e4263d fill, white text, 3px radius, 10px 16px padding, Nimbus Sans 500 11px uppercase with 0.10em tracking. 3. *Section eyebrow + heading pair*: Red eyebrow 'THE TYPICAL SHELF' in Nimbus 500 11px uppercase 0.18em tracking #e4263d, 10px below it a Nimbus Sans 700 36px heading in #000. Underneath, body copy in Soehne Buch 400 15px #3a3a3a at 1.4 line-height. 4. *Benefit pill cluster*: 999px radius, 1px #6f6f6f border, transparent fill, Nimbus Sans 500 11px uppercase text #000. Pills in a horizontal row with 8px gap. Used to list product functions (CLEANSE, HYDRATE, BRIGHTEN, REPAIR, EXFOLIATE, PROTECT). 5. *Comparison card*: Two columns on #f8f6f3 background, 3px radius, 15px padding. Left: section eyebrow + '14 bottles. Most half-full.' in Nimbus 36px, with light illustration below. Right: same eyebrow variant + 'Six bottles. Everything covered.' in Nimbus 36px, 6 Isla bottles illustration, benefit pills row at the bottom.
Isla's voice emerges from three intentional pairings: (1) Soehne Kraftig 400 display + Nimbus Sans 500 eyebrow — the geometric authority with the tracked micro-label. (2) Garamond Italic 400 + Nimbus Sans 400 body — the serif whisper inside the sans conversation. (3) Soehne Buch 400 paragraph + Nimbus Sans 700 product name — the reader face meeting the merchant face. The Garamond italic in #e4263d is the single highest-impact brand moment; use it 1–2 times per page max.
Same apothecary warmth: cream and sand neutrals, single restrained accent, Garamond-adjacent serifs for headlines, flat components with hairline borders and minimal radii
Same soft pink-cream palette, editorial product photography on pure white, and a single saturated brand color used as small punctuation across otherwise quiet layouts
Same Garamond-italic + sans-serif editorial mix, warm off-white canvas, and apothecary product photography with natural light
Same red-as-seal accent strategy against a cream background, uppercase tracked micro-labels, and flat product cards with hairline detail
Same editorial restraint: cream canvas, serif headlines, tracked uppercase eyebrows, product grids with generous breathing room, and a single chromatic accent used sparingly
Use the design exports or connect Musterlab to your AI.
