Highlight Lime
#f5ff7dHero section background, full-bleed color punctuation — the single saturated surface color; never use for text, borders, or buttons
Repeat
getrepeat.ioWebsite preview
The design language
Repeat uses an editorial highlighter-on-paper language: a vivid lime wash dominates the canvas like a marker swipe, a warm cream ground reads as notebook stock, and a single near-black ink carries every word of authority. Typography is assertive and uppercase — Poppins at heavy weight sets section titles in tight 1.2 line-height stacks, while Montserrat runs the body in a calm 17px — the contrast between shouting headlines and conversational body is the visual rhythm. Components are flat, generously rounded at 25px, and rely on thin black borders rather than shadows; even the CTA is a near-flat white card with a hairline border sitting on the lime. The single lime accent should be used sparingly as full-bleed section punctuation, never as a button fill or text color — color here is atmosphere, not chrome.
Color palette
brand
accent
Lavender Wash
#e2d8ffAccent section background — soft violet surface for variety beats between white and lime sections
Periwinkle Wash
#c3d5fcAccent section background — cool blue surface paired with Lavender Wash for tonal variety in content sections
neutral
Ink
#171717Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color
Paper
#ffffffHairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color
Notebook Cream
#ede7e2Page canvas for body sections, feature row backgrounds — warm off-white that softens white cards and reads as paper stock
Olive Ink
#37352fSecondary near-black surface — warmer than Ink, used as a fill on the logo grid tiles and nav background accent
Typography
Type scale
Major Second (1.125) · 17px basedisplay
37px · 600 · 1.2The quick brown fox jumps
heading-lg
34px · 600 · 1.2The quick brown fox jumps
heading
29px · 600 · 1.2The quick brown fox jumps
heading-sm
24px · 600 · 1.2The quick brown fox jumps
subheading
20px · 500 · 1.3The quick brown fox jumps
body
17px · 400 · 1.5The quick brown fox jumps
body-sm
15px · 400 · 1.6The quick brown fox jumps
caption
13px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Poppins
- Weights
- 400, 500, 600
- Sizes
- 17px, 20px, 24px, 29px, 37px
- Line height
- 1.00–1.30
- Letter spacing
- normal
Display and section headings — used uppercase at 600 weight, tight 1.20 line-height creates an editorial stack; substitute: Montserrat or Inter at the same weights
Additional typeface
Montserrat
- Weights
- 400, 500, 600
- Sizes
- 13px, 15px, 17px, 34px
- Line height
- 0.75–2.00
- Letter spacing
- normal
Body, navigation, links, card text, captions, footer — the workhorse; 17px at 400 weight is the default reading size with comfortable 1.50 leading; substitute: Inter or DM Sans
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 40px
- Card padding
- 15px
- Element gap
- 4px
Border radius
nav
8pxcards
25pxicons
3pximages
20pxbuttons
100pxheroCard
25pxSpacing scale
1px2px3px4px5px6px8px9px12px13px15px16px17px24px34px40px45px48px50px62px83px96px113pxGuidelines
Do
- Use Highlight Lime (#f5ff7d) only as a full-bleed section background — never as text, border, or button fill
- Set all section titles in uppercase Poppins 600 at 29–37px with 1.20 line-height for the editorial headline stack
- Round all content cards at 25px — the 25px radius is the system fingerprint
- Pair the filled black pill CTA (Ink background, 100px radius) with the white CTA card on lime as the primary action pattern
- Use 1px Ink borders instead of shadows to separate cards from the canvas
- Switch section background colors (lime → cream → white → lavender) to create visual rhythm between content blocks
- Set body copy in Montserrat 400 at 17px with 1.50 leading — never below 15px
- Underline text links in Ink with no other decoration
Don’t
- Do not use Highlight Lime for text, borders, icons, or button fills — it is a surface color only
- Do not introduce colored buttons (blue, green, red) — actions are Ink-filled or Paper-outlined only
- Do not use shadows heavier than rgba(0,0,0,0.01) — the system is intentionally flat
- Do not mix in a third typeface — the system is strictly Poppins + Montserrat
- Do not use sharp corners on cards or images — 20–25px is the minimum radius for surfaces
- Do not place the primary CTA button directly on the lime background — wrap it in a white card first
- Do not use line-height looser than 1.30 on headings — the tight editorial stack is the signature
- Do not use gradients — Repeat is a flat-color system; the only tonal shifts are solid surface swaps
Components
Top Navigation Bar
Global site navigationHorizontal bar with Repeat wordmark left, product/blog links center, and a black 100px-radius pill CTA on the right. White or transparent background, sits above all hero sections. Nav links at 15px Montserrat 500, CTA at 15px Montserrat 600 white on Ink (#171717).
Primary Filled CTA Button
Primary action — demo request, signupBlack pill button at 100px border-radius, Ink (#171717) background, Paper (#ffffff) text, 15px Montserrat 600, ~12px 20px padding. Sits on white or cream surfaces only — never directly on the lime. The
Hero Lime Section
Above-the-fold hero blockFull-bleed Highlight Lime (#f5ff7d) background. Headline at 37px Poppins 600 uppercase in Ink, tight 1.20 leading. Subhead at 17px Montserrat 400 in Ink. The white CTA card sits centered below, creating a card-on-color composition.
Hero White CTA Card
Primary action surface on the lime heroPaper (#ffffff) rounded card, 25px radius, thin Ink (#171717) border at ~1px, generous internal padding (~40px vertical). Contains an arrow glyph and
Secondary Text Link
Tertiary action — low-commitment next stepUnderlined Montserrat 15px 400 in Ink, no background or border. Always paired below the primary CTA card. Example pattern:
Section Heading (Uppercase Poppins)
Page section title29–37px Poppins 600 uppercase in Ink, line-height 1.20, left-aligned. Optional Ink underline divider below. The signature editorial title style — uppercase + tight leading is what makes the design feel like a printed spread.
Brand Product Card
Customer showcase in social-proof section25px-radius card containing a full-bleed product photograph on a solid colored background (teal, pink, cream). 20px image radius via overflow:hidden. No border, no shadow. Three-up grid. Image does the talking; the card is just a frame.
Testimonial Stat Card
Customer proof with metric headline25px-radius white card with thin Ink border, 15px internal padding. Structure: product image on top (rounded), then stat in 17–20px Poppins 600 (e.g.
Logo Grid Tile
Customer logo in social-proof stripOlive Ink (#37352f) rounded square, 25–50px radius, 1:1 aspect ratio, containing the customer brand wordmark in Paper (#ffffff) at ~17px Montserrat 600 centered. Four-up row. No border, no shadow — the fill is the frame.
Feature Row
Product capability explanation with screenshotTwo-column layout on Notebook Cream (#ede7e2) background: text block left (headline + body + bullet list in 17px Montserrat), product screenshot right in a 20px-radius frame. Generous 40px vertical padding. Headline can be Poppins 600 uppercase or sentence-case at 24px.
Footer
Site footerPaper or Notebook Cream background, multi-column link grid in 15px Montserrat 400 Ink, logo and copyright at bottom. Minimal — no heavy social icon blocks, no newsletter modal.
Surfaces & elevation
Level 0
Notebook Cream
#ede7e2Page canvas for feature rows and body content
Level 1
Paper
#ffffffCard surfaces, hero CTA card, inverted sections
Level 2
Highlight Lime
#f5ff7dHero full-bleed, section punctuation
Level 3
Lavender Wash
#e2d8ffSoft accent section background
Level 4
Periwinkle Wash
#c3d5fcSoft accent section background
Repeat uses near-invisible shadows (rgba(0,0,0,0.01)) to create the faintest sense of card lift without visual noise. The system deliberately avoids heavy elevation: depth comes from full-bleed color section changes (white → lime → cream → lavender) rather than drop shadows. Cards separate from the canvas via 1px Ink borders or color contrast, never via shadow stacks. Do not introduce elevation levels beyond this whisper shadow.
Layout & imagery
Layout
Page structure is full-bleed bands stacked vertically, each band owning one background color. The hero is a full-bleed lime band with a centered white CTA card. Below it, a white band holds a 3-column brand showcase grid. A second white band holds a 3-column testimonial grid, followed by a 4-up dark logo strip. Feature rows alternate on Notebook Cream with 2-column text-left/image-right splits. Section vertical rhythm is 40px internal padding with full-bleed color changes doing the work of section dividers. The grid system is a 3-column card grid for showcases and testimonials, and a 4-column grid for the logo strip. Navigation is a simple top bar — no sticky header, no sidebar, no mega-menu. Content density is compact but breathable; cards never touch, always separated by the canvas color.
Imagery
Imagery is product-first photography shot against solid colored studio backgrounds — teal, pink, cream — with no lifestyle context or human models. The product IS the hero, framed inside 25px-radius cards. Product crops are tight, well-lit, high-key. No illustrations, no 3D renders, no abstract graphics. Iconography is minimal and outlined; brand logos in the customer strip are white wordmarks on dark tiles. The overall image-to-text ratio is image-light — photography serves as proof of customer success, not as decorative atmosphere. Color variety in imagery comes from the colored backdrops, not from filters or color grading.
Design notes
Agent Guide
**Quick Color Reference**\n- text: #171717 (Ink)\n- background: #ffffff (Paper) for cards, #ede7e2 (Notebook Cream) for canvas\n- border: #171717 (Ink) at 1px\n- accent surface: #f5ff7d (Highlight Lime) for full-bleed sections only\n- primary action: no distinct CTA color
Similar brands
Notion
Same warm-neutral canvas (cream/white) with a single bold accent surface, flat components, thin borders instead of shadows, and uppercase headings carrying authority
Linear
Editorial typography attitude — uppercase bold Poppins/Inter titles at tight line-height paired with calm body copy; monochromatic system with one accent color doing the work
Substack
Notebook-paper warmth (cream canvas), near-black ink typography, and a single saturated color (their red, Repeat's lime) used as full-bleed section punctuation
Gumroad
Bold pill CTAs (black filled), generous 25px+ card radii, flat elevation philosophy, and confident uppercase headlines over warm product photography
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
