2.AG reads as a clinical apothecary crossed with a modern science brand: near-white canvas, deep teal structural surfaces, and one vivid mint accent that activates CTAs and data highlights. Inter Tight is tightened for a pharmaceutical voice — slightly negative tracking on display sizes, generous tracking on small caps for ingredient lists and badges. Components lean into large pill radii (30–50px) for buttons and soft 12–20px corners on cards, signaling a brand that is precise about dosage but warm on the body. Dark teal sections (Rapid Relief Cream header, stat blocks) ground the page in clinical authority, while bright green punctuation provides energetic, almost pharmacy-shelf accent. Layout is split, generous, and product-forward: hero pairs a dark editorial half with a bright product half, sections alternate white and teal, and reviews/stats form dense but airy card grids.
#244d54Primary structural color — dark hero background, stat block surfaces, icon strokes, navigation wordmark, secondary button borders. A near-gray teal that reads as ink rather than ocean, so it grounds the brand without going clinical-cold
#2ecea0Primary action color — filled CTA backgrounds, badge fills, active dots, announcement bar, review star highlights. Bright green with cyan lean, makes every interactive element feel switched on and biological
#6dddbdTeal text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color
#000000Body text, hairline borders, icon strokes, input borders. The dominant structural neutral — most borders on the site are pure black, giving the UI a stark, editorial frame
#151515Primary heading text and secondary borders. Softer than pure black for large headlines where Carbon reads as too heavy
#4d4d4dSubhead text, button text on light surfaces, muted labels
#858585Muted body text, helper copy, disabled labels, secondary icon strokes. The workhorse neutral for anything that needs to recede
#999999Input borders, placeholder color, low-priority surface accents
#e5e7ebCard and section dividers, subtle borders on white surfaces, separators between review cards
#f0f1f2Lightest card and list surface — sits one step above pure white for subtle elevation on the page canvas
#ffffffPage canvas, card surfaces, button text, input fills. The dominant light surface
62px · 400 · 1 · 1.24px trackingThe quick brown fox jumps
48px · 500 · 1.1 · -2px trackingThe quick brown fox jumps
45px · 400 · 1.21 · 0.9px trackingThe quick brown fox jumps
36px · 400 · 1.25 · 0.72px trackingThe quick brown fox jumps
30px · 400 · 1.3 · 0.6px trackingThe quick brown fox jumps
28px · 400 · 1.2The quick brown fox jumps
24px · 400 · 1.33The quick brown fox jumps
20px · 400 · 1.4 · 0.4px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary brand typeface across headings, body, buttons, badges, and UI. The custom tighter cut tightens headline rhythm and gives small caps a pharmaceutical, prescription-label feel.
Secondary face used for stat block numerals and a few large product display sizes. Inter handles the very large gradient stats with clean digits that gradient-fill cleanly.
12-20px50px (pill)5px30-50px (pill)250px3px4px5px6px7px8px10px11px12px14px15px16px17px18px20px22px24px25px28px29px30px32px35px36px40px50px58px60px65px80px90px301pxFull-width band in #2ecea0 mint with 12–14px white Inter Tight text, often a truck icon + shipping promise. Height ~40px, single line, no border, sits flush above the nav.
White bar, ~64px tall, with black 2.AG wordmark left, 3–5 text links (Shop, Science, Contact) in 16px Inter Tight 500 with 15–30px horizontal padding, search icon and bag icon (with 8px black dot showing item count) right-aligned. No drop shadow, hairline #e5e7eb bottom border.
Full-height #244d54 background with 3D wireframe human figure showing glowing joints. Headline in Inter Tight 62px / 500, white, letter-spacing ~1.2px, left-aligned at 50–60% width. Pill CTA below in transparent fill with 1px #2ecea0 mint border, white text, 50px radius, 14px 48px padding.
Light gray/white background with circular bubble/bokeh photography behind a product tube. Product image ~60% of panel width, centered. No text overlay.
Transparent background, 1px #2ecea0 border, white text 16px Inter Tight 500, 50px border-radius, 14px 48px padding. Used for the hero 'Get Relief' call. Tracking is tight — almost no letter-spacing.
Solid #2ecea0 background, white text, 30–50px radius, 12–16px vertical and 24–48px horizontal padding. Used for 'Add to bag' and review prompt CTAs.
30–50px radius, 8px 16px padding, #2ecea0 fill, white 12–14px Inter Tight 600 text. Used for '10,000 MG', '1000 MG', and active filter chips.
White #f0f1f2 background panel, 20px border-radius, 20–24px internal padding, 1px #e5e7eb hairline border. Holds the cream tube + outer box on a light stage. No shadow — relies on border for edge.
Stacked rows with ~56px height each, separated by 1px #e5e7eb hairline. Large 18–20px Inter Tight 500 in Deep Teal #244d54 for the value ('2 cannabinoids', '5 key ingredients'), 12–13px muted text in #858585 for the descriptor below.
White card on #f0f1f2 background, 12–20px radius, 1px #e5e7eb border, 20–24px padding. 5 mint stars top, 18–20px quote in Inter Tight 500 Ink #151515, reviewer name in 12–13px Slate #858585 with a small mint checkmark for verified buyers.
Same dimensions and styling as Review Card but holds a 9:16 vertical video poster with a centered white circular play button outlined in 1px mint. Replaces quote text with thumbnail.
Deep Teal #244d54 background, 20px radius, 40–60px padding. Headline numeral 48–62px in a vertical gradient from Soft Teal #6dddbd to Mint #2ecea0, applied as a CSS background-clip text fill. Percent sign 24–30px in white, sitting at top-right of the numeral.
White fill, 1px #999999 border, 5px radius, 12–16px padding, 14–16px Inter Tight 400 text in Carbon #000000. Placeholder in #999999. No visible focus ring in extracted data — relies on border thickening or state change.
Single horizontal row at the top of the reviews section, 5-star header left-aligned, then inline reviewer quotes in Inter Tight 14–15px, 500, Carbon — separated by bullets, all caps spaced ~0.05em.
16px Inter Tight 500 Carbon #000000, no underline, 15–30px horizontal padding, 7px vertical padding. Active state would shift to Deep Teal #244d54.
#ffffffDefault body background and main content area
#f0f1f2Subtle elevation for review list rows and secondary card groups
#244d54Hero left panel, stat blocks, deep editorial sections
#2ecea0Announcement bar and pill badge fills for active emphasis
The design system deliberately avoids box shadows. All depth is communicated through hairline 1px borders (#e5e7eb on white surfaces, #000000 on neutral fills) and tonal surface steps from Paper #ffffff to Bone #f0f1f2 to Deep Teal #244d54. This is a clinical, flat aesthetic — the product does the heavy lifting, the chrome stays out of the way.
Max-width 1280px centered container, with full-bleed dark/light split hero as the only section that breaks out. Hero is a 50/50 split: dark teal editorial panel left, bright product panel right. Subsequent sections alternate Paper #ffffff and Deep Teal #244d54 in horizontal bands. Content blocks use 2-column asymmetric (image left, copy right) for product, and 4–5 column card grids for reviews, with one slot swapped for a vertical video card. Stats section is a 3-column grid of large gradient numerals on deep teal. Vertical rhythm is generous — ~64px between major sections, ~24px within cards. No sidebar; navigation is a single top bar. Bottom review marquee scrolls horizontally above the card grid.
Imagery is sparse and product-led. Hero combines a 3D wireframe human figure with glowing pain-point nodes (deep teal stage, mint glow accents) against a product photograph with bubble/serum bokeh on white. PDP uses clean product-on-white photography of the cream tube and outer carton with no lifestyle context. No human lifestyle photography appears; the science diagram and the object shot are the only visual languages. Icon style is thin-line 1px stroke monochrome, mostly white on teal or black on white. Decorative star fields in the stat blocks carry no extra imagery — the large gradient numerals do the visual work.
**Quick Color Reference** - text: #000000 (body) / #151515 (headings) / #858585 (muted) - background: #ffffff (canvas) / #f0f1f2 (soft card) / #244d54 (structural dark) - border: #e5e7eb (hairline on light) / #000000 (structural) / #999999 (input) - accent: #2ecea0 Mint Pulse - primary action: #2ecea0 (filled action) - gradient text: linear-gradient #6dddbd → #2ecea0 for stat numerals **Example Component Prompts** 1. Build a hero section. Split 50/50: left half #244d54 with a 3D wireframe human figure; headline 'A breakthrough in topical cannabinoids' in Inter Tight 500, 62px, white, letter-spacing 1.2px. Below it a pill CTA with transparent background, 1px #2ecea0 border, white 16px text, 50px radius, 14px 48px padding. Right half white with circular bubble bokeh and the product tube centered at 60% panel width. 2. Build a stat row. 3 columns of stat blocks on #244d54 background, 20px radius, 48px padding. Each shows a numeral (93%, 99%, 0%) at 62px Inter weight 500 with a #6dddbd→#2ecea0 vertical gradient via background-clip text, percent sign 24px white at top-right, white caption 12px below in 0.09em tracked caps. 3. Build a review card. White #ffffff background, 12px radius, 1px #e5e7eb border, 20px padding. Five #2ecea0 stars at 14px, then 18px Inter Tight 500 quote in #151515, then 12px #858585 reviewer name with a small mint checkmark icon to indicate verified. 4. Build a dosage badge. #2ecea0 background, 50px radius, 8px 16px padding, white text '10,000 MG' at 12px Inter Tight 600 with 0.05em tracking. 5. Build a product PDP section. Left column: white #f0f1f2 panel, 20px radius, 24px padding, holds the cream tube image centered. Right column: 36px Inter Tight 500 product name in #151515, 5 mint stars + review count, a Mint Pulse dosage badge, 16px body in #000000, then a stacked feature list with 1px #e5e7eb row dividers and 20px Inter Tight 500 feature text in #244d54.
Same clinical wellness language: white canvas, deep teal-green structural surfaces, bright green CTA, pill-shaped buttons, and ingredient-badge hierarchy
Pharmaceutical-adjacent branding with uppercase tracked labels, deep teal accents, and split editorial hero
Direct-to-consumer wellness with clean sans-serif, soft card surfaces, and a single bright accent for dosage and CTA
Minimalist product-led hero with oversized pill CTA, editorial split panels, and editorial uppercase tracked labels
Modern apothecary feel with deep cool brand color, generous white space, and small uppercase tracked metadata
Use the design exports or connect Musterlab to your AI.
