Warm Parchment
#faf9f6Page canvas, body background — the base layer that gives the entire site its designed-by-hand warmth
Memorisely
memorisely.comWebsite preview
The design language
Memorisely reads as a typographer's workspace: a warm cream canvas, pure white card surfaces, and a single near-black that serves as both text and primary action. The system is deliberately zero-chromatic — no blue, no green, no accent hue — letting Inter's weight contrast and tight negative tracking carry all hierarchy. Components stay flat and pill-leaning: a floating nav bar, 8px button corners, and 100px-radius interactive elements create a designed-by-a-designer feel without ornament. Separation comes from hairline borders in warm linen (#f2f0e9) and the cream-to-white surface jump, not from shadows or color.
Color palette
neutral
Paper White
#ffffffCard surfaces, floating navigation, elevated content blocks — pure white sits one step above the cream canvas
Soft Linen
#f2f0e9Hairline borders, subtle dividers, muted background washes — the warm-tinted replacement for #e5e5e5
Ink Black
#171717Primary text, primary action button background, strong heading borders — the workhorse near-black that unifies copy and CTAs
Jet Black
#000000Maximum-contrast icon strokes, dense border treatments where absolute weight is needed
Carbon
#212121Strong body borders, emphasis dividers — one shade softer than Ink Black for structural lines
Stone
#6e6e6eMuted body text, secondary copy, ghost link color — the first step down from primary text
Ash
#878787Tertiary text, helper labels, company-logo grayscale treatment — the quietest readable gray
Graphite
#414141Heading borders, emphasis underlines — a mid-dark accent for typographic rules
Typography
Type scale
Major Second (1.125) · 16px basedisplay
56px · 600 · 1.14 · -3.36px trackingThe quick brown fox jumps
heading-lg
32px · 600 · 1.25 · -1.28px trackingThe quick brown fox jumps
heading
22px · 600 · 1.27 · -0.88px trackingThe quick brown fox jumps
heading-sm
18px · 600 · 1.38 · -0.72px trackingThe quick brown fox jumps
body
16px · 400 · 1.45The quick brown fox jumps
text-15
15px · 500 · 1.33The quick brown fox jumps
text-14
14px · 500 · 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
sans-serif
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.2
sans-serif — detected in extracted data but not described by AI
Additional typeface
Inter
- Weights
- 400, 500, 600
- Sizes
- 10, 13, 14, 15, 16, 18, 22, 32, 56
- Line height
- 1.14–1.50
- Letter spacing
- -0.06em at 56px display, -0.04em at 22–32px headings, normal at body sizes
- Fallback
- system-ui, -apple-system, 'Segoe UI', sans-serif
The sole typeface across the system. Inter at 600/56px (-3.36px tracking) carries the display headline; 500/22px handles section headings; 400/16px is body. The weight ladder stops at 600 — semibold is the ceiling, which keeps the type from feeling corporate or heavy.
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 16px
- Element gap
- 10px
Border radius
cards
8pxbadges
100pxbuttons
8pxnavPill
100pxproductCards
16pxSpacing scale
2px4px6px7px8px10px12px16px20px24px26px28px32px40px48px56px64px80px120pxGuidelines
Do
- Set the page canvas to #faf9f6 (Warm Parchment) — never use pure white as the page background; pure white is reserved for card surfaces and the floating nav.
- Use #171717 for both primary text and primary action button fills — the shared near-black is what makes the monochrome system feel intentional rather than default.
- Set display headlines to 56px / Inter 600 / -3.36px letter-spacing; the tight negative tracking on large sizes is signature.
- Use 8px border-radius for cards and most buttons, 100px for pills (nav, badges, tags), 16px for product image cards — these three radii cover the entire system.
- Separate sections with 1px #f2f0e9 hairline borders or a cream-to-white surface jump, not with drop shadows.
- Keep all spacing on the 10px element gap / 16px card padding / 80px section gap rhythm; the density should feel compact within components and spacious between them.
- Render all company logos and secondary imagery in grayscale (Ash #878787 range) to preserve the zero-chromatic palette.
Don’t
- Don't introduce any chromatic color — the system is deliberately zero-hue. No blue links, no green success states, no red error accents. Use grayscale weight shifts instead.
- Don't use 0px letter-spacing on display or heading sizes — the negative tracking (-0.04em to -0.06em) is what gives Inter its tightened, premium read at scale.
- Don't apply drop shadows for elevation beyond the three signature uses (nav ring, button ring, product image glow). The system is flat by default.
- Don't set Inter weight above 600 — the weight ladder stops at semibold; going to 700/800 breaks the typographic restraint.
- Don't use border-radius below 8px on interactive elements; 4px or 0px corners will read as a different (sharper, more corporate) system.
- Don't use #ffffff as the page background — it will flatten the warm parchment character of the entire site.
- Don't stack multiple surfaces of the same color (e.g., white card on white section) — the cream-to-white jump is the only surface elevation available.
Components
Floating Pill Navigation
Top-level site navigationA floating horizontal bar centered on the page, not full-width. White (#ffffff) background, 100px border-radius for a perfect pill, subtle 1px outer ring shadow. Contains the brand mark on the left, nav links (Inter 500, 14px, #171717) centered, and no visible CTAs. Sits 24–32px from the viewport top with generous horizontal margin.
Primary Dark Button
Main call-to-action (Browse bootcamps, Enroll, etc.)Filled button with #171717 background and #ffffff text. Inter weight 500, 14–15px, padding 10px 20px. 8px border-radius. Subtle outer-ring shadow at rgba(110,110,110,0.1). No hover state shift in color — the contrast against the cream canvas is already the entire statement.
Ghost Text Link Button
Secondary action (Upcoming workshops, Learn more)No fill, no border. Inter weight 500, 15px, #171717 color, 1px underline offset 4px. Padding 10px 0. Sits beside the primary button at a 12–16px gap. The underline is the affordance — no box, no background.
New Announcement Pill
Inline announcement above the hero headlineSmall horizontal pill (100px radius), #171717 background, #ffffff text. Inter weight 500, 12–13px. Contains the word 'New' in a tiny lighter weight, then the announcement copy. Padding 4px 10px. Acts as a typographic label rather than a badge.
Hero Centered Text Stack
Primary above-the-fold content blockDisplay headline (Inter 600, 56px, -3.36px tracking, #171717) on one or two lines, max-width ~800px, centered. Subtext at 18px, weight 400, #6e6e6, max-width ~560px. Vertical rhythm: 16px between headline and subtext, 24px before the CTA pair, 32px before social proof.
Social Proof Cluster
Trust signal under hero CTAsStacked avatar circles (28–32px, slight overlap, 1.5px white border) on the left, then a row of 5 small filled stars (Inter-rendered ★ glyphs or icons) and a rating line like '4.8 (20k+)' in Inter 500, 14px, #171717. Below in smaller text: 'Trusted by 20k+ Designers' at 13px, #6e6e6e.
Company Logo Strip
Enterprise credibility bandSingle horizontal row of grayscale corporate logos (IBM, ebay, Netflix, Wise, Shopify, Slack, Google, Atlassian). All rendered in #878787 or #a0a0a0 to strip brand color. Vertically centered with the label 'Upskilling teams in 150+ countries' (Inter 500, 13px, #171717) on the left. Generous horizontal gap (40–64px) between logos.
Section Heading Pair
Section opener for content blocksEyebrow label (Inter 500, 12–13px, #171717, often with a small ↗ or → suffix) on top, then a left-aligned heading (Inter 600, 32px, -1.28px tracking, #171717) and an optional subtext (Inter 400, 18px, #6e6e6, max-width ~520px). Stacks vertically with 8–12px gaps between elements.
LIVE Product Card
Workshop/bootcamp preview in a 3-column grid16px border-radius card with a dark product screenshot as the visual (code editor or video call interface). A small '● LIVE' badge pinned top-left: red dot glyph + 'LIVE' in Inter 500, 12px, #171717 on a white pill. Card has no visible border — the dark image itself defines the card edge. Spacing between cards: 24px column gap, 32px row gap.
Code Editor Preview Frame
Product showcase imageMac-window chrome (red/yellow/green dots top-left) wrapping a dark-themed VS Code-style editor. Editor background near #1e1e1, syntax highlighting in muted colors. Always contained within a 16px-radius frame, never full-bleed. Sits on a #ffffff card surface to make the dark UI pop.
Avatar Stack
Inline social proof within cards or lists3–5 overlapping circular avatars (28–32px), each with a 1.5–2px white border (#ffffff) to separate them. Avatars are real photos, not initials. The border color matches the card surface so overlap reads as clean separation regardless of background.
Star Rating Inline
Numeric rating displayFive small filled stars (★) in #171717 at 12–14px, immediately followed by '4.8 (20k+)' in Inter 500 at 13–14px, #171717. Stars are rendered as a single row with 1–2px gaps. No outline, no half-star styling visible — flat filled glyphs only.
Surfaces & elevation
Level 0
Warm Parchment
#faf9f6Page canvas — every section sits on this warm cream base
Level 1
Paper White
#ffffffCard surfaces, floating nav, product preview containers
Level 2
Linen Wash
#f2f0e9Subtle background tints, soft section dividers
Elevation is sparse and structural rather than decorative. The system prefers surface-color jumps (cream → white) over drop shadows, reserving shadow for three specific roles: the floating nav bar's hairline ring, the primary button's 1px outer ring, and the product card's soft 20px glow. Nothing else casts a shadow.
Floating Pill Navigation
rgba(110, 110, 110, 0.1) 0px 0px 0px 1px, rgba(110, 110, 110, 0.2) 0px 1px 0px 0px
Primary Dark Button
rgba(110, 110, 110, 0.1) 0px 0px 0px 1px, rgba(110, 110, 110, 0.2) 0px 1px 0px 0px
Product Image Cards
rgba(191, 191, 191, 0.25) 0px 1px 20px 0px
Layout & imagery
Layout
Max-width 1200px centered on a Warm Parchment (#faf9f6) canvas. The hero is a centered text stack: eyebrow pill → 56px display headline → 18px subtext → dual CTA row (filled + ghost) → social proof cluster → grayscale company logo strip. Below the fold, the layout shifts to left-aligned section heading pairs followed by 3-column product card grids with 24px column gaps and 32px row gaps. The floating pill nav is the only persistent chrome — no full-width header, no sidebar. Section rhythm is consistent: ~80px vertical gap between sections, each section opening with an eyebrow + heading pair. Content density is compact within cards and breathing-room-generous between sections.
Imagery
The visual language is product-screenshot-led rather than photographic: dark-themed code editor windows (VS Code-style) dominate, shown in realistic workflow states with syntax highlighting and file trees. When people appear, they are candid workshop-style portraits of instructors in home/office settings — natural light, no staging, no lifestyle gloss. All images are contained within 16px-radius frames on white card surfaces, never full-bleed. Icons are minimal line-based monochrome glyphs. No illustrations, no 3D renders, no abstract graphics. The role of imagery is product proof — showing real workflows, real editors, real sessions — not decoration.
Design notes
Agent Guide
**Quick Color Reference** - Canvas: #faf9f6 - Card surface: #ffffff - Border / divider: #f2f0e9 - Primary text: #171717 - Muted text: #6e6e6e - primary action: no distinct CTA color **3–5 Example Component Prompts** 1. *Floating pill navigation bar*: White (#ffffff) background, 100px border-radius, subtle outer-ring shadow (rgba(110,110,110,0.1) 0 0 0 1px, rgba(110,110,110,0.2) 0 1px 0 0). Centered horizontally, 24px from viewport top, max-width ~640px. Brand mark left in #171717 at 16px Inter 600. Nav links (Inter 500, 14px, #171717) spaced 24px apart in the center. 2. *Hero section*: Warm Parchment (#faf9f6) background. Display headline 'Actionable AI Design Engineering & Vibe Coding Training' in Inter 600, 56px, letter-spacing -3.36px, #171717, centered, max-width 800px. Subtext 18px Inter 400, #6e6e6e, max-width 560px. Below: a small 'New' announcement pill (#171717 bg, #ffffff text, 100px radius) floating above the headline. No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 4. *LIVE product card grid*: Three columns, 24px gap. Each card is 16px border-radius with no visible border, containing a dark code-editor screenshot (near-black #1e1e10 editor chrome) as the visual. '● LIVE' badge top-left: white pill background, red dot glyph, 'LIVE' in Inter 500 12px #171717. 5. *Section heading pair*: Left-aligned, no centered text below the fold. Eyebrow label in Inter 500 13px #171717 (e.g., 'AI Design Bootcamps ↗'), then heading in Inter 600 32px -1.28px tracking #171717, then optional subtext in Inter 400 18px #6e6e6e. 8px gap between eyebrow and heading, 12px between heading and subtext.
Similar brands
Linear
Same near-black text + monochrome palette philosophy with tight typographic tracking, though Linear leans dark-mode-first
Vercel
Shared designer-engineer aesthetic with achromatic palette and large display headlines in a single sans-serif weight
Notion
Warm off-white canvas with hairline borders replacing shadows, and text-as-interface restraint
Rauno Freiberg
Same flat-surface-on-warm-canvas approach with Inter as the sole typeface and zero chromatic color
Stripe Press
Editorial restraint — warm paper background, near-black type, pill-shaped UI elements, and complete absence of accent color
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
