MA Quilts is a crayon-bright textile-art studio: a flat, poster-like canvas where oversize Manrope headlines shout in tangerine against wash-yellow and blush-pink full-bleed blocks. The entire interface stays two-dimensional — no shadows, no gradients, no filled buttons — relying on thick chromatic borders, enormous letter-spaced type, and full-bleed color blocks to do all the visual work. Layout is spacious and gallery-like, with product imagery given room to breathe and labels in monospace caps. The system reads more like a zine or museum wall text than a SaaS dashboard, and any new page should preserve that paper-poster logic: chromatic borders instead of fills, type as ornament, and backgrounds that change like colored paper sheets rather than cards on a neutral surface.
#f15a24Headlines, body text accents, and outlined button borders — the single loud color that carries the whole brand. Used as a 1-2px border on buttons and links, and as fill for all display and heading text. Never appears as a filled button background; the system speaks in outlines
#ffed8cYellow wash for highlight backgrounds, decorative bands, and soft emphasis behind content.
#050133Secondary text and link borders — a near-black with a violet bias that softens the page's high-contrast black on white. Used for body copy and as an alternate outlined-action border
#ffccccSecondary full-bleed background block, often paired with product photography to make fabric colors pop. Used as a flat color field, never as a tint or gradient
#f4a398Soft warm surface for transitional sections — a diluted cousin of Tangerine used when a page needs a quieter colored block
#ffffffDefault page canvas and content section background. The neutral ground between colored blocks
#000000SVG fills, occasional body text, and the darkest neutral when Midnight Navy reads too colored. Pure black only where the page demands the most weight
#333333Secondary text, image captions, and subtle borders. Sits between Ink Black and Paper White for muted helper copy
#cce1e2Decorative SVG fill and soft wash — a near-gray with a cool cast used inside illustrations and as a quiet background tint
126px · 700 · 1 · 15.12px trackingThe quick brown fox jumps
72px · 700 · 1 · 8.64px trackingThe quick brown fox jumps
68px · 700 · 1.2The quick brown fox jumps
60px · 200 · 1 · 7.2px trackingThe quick brown fox jumps
36px · 700 · 1.2 · 2.16px trackingThe quick brown fox jumps
30px · 400 · 1.2 · 1.8px trackingThe quick brown fox jumps
29px · 700 · 1The quick brown fox jumps
23px · 700 · 1.4 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary display and heading family across the entire site. Weight 200 (light) carries the massive display headlines — the thin strokes against tangerine fill create the signature 'stenciled poster' feel where the type reads as colored shape rather than inked letter. Weight 700 is used for emphasis and button labels.
Captions, dates, product labels, and metadata — all uppercase tracking in Tangerine beneath images. The monospace's mechanical rhythm contrasts with Manrope's humanist curves and signals 'catalog label' rather than 'editorial body'.
66px0px0px66px4px9px10px14px15px18px24px30px35px43px46px48px50px51px54px58px66px72px96px108px115px192pxTransparent background with 1-2px Tangerine (#f15a24) border, 66px border-radius, 9px vertical / 46px horizontal padding. Label in Manrope weight 400-700, uppercase, Tangerine fill. On hover the border thickens or inverts to filled Tangerine with white text. No drop shadow. The pill radius (66px) is the system's only rounded element — everything else is sharp-cornered.
No background, no border. Underline rendered as a 1-2px Tangerine or Midnight Navy border-bottom. Text in Tangerine or Midnight Navy at body-sm (18px) Manrope. Sits inline within paragraphs and list items.
Manrope weight 200 at 126px (display) or 60-72px (heading), line-height 1.00, letter-spacing 0.12em. Fill is always Tangerine (#f15a24). Text wraps naturally and is left-aligned, never centered. The light weight + wide tracking combination is the site's defining typographic signature.
Edgeless section spanning the full viewport width. Background is Sun Yellow (#ffed8c), Blush Pink (#ffcccc), or Coral Wash (#f4a398). Internal content is contained within the 1200px page max-width. Used to break the page into 'colored paper sheets' rather than cards on a neutral surface.
Square or 4:5 product photograph on a flat Blush Pink or Paper White background. No border, no shadow, no rounded corners. Caption sits beneath in Roboto Mono 14px uppercase Tangerine: product name on one line, optional price below. Padding around image is 0 — the photo bleeds to the card edge.
Rectangular photograph (3:2 or 4:3 ratio) on Paper White, no border or radius. Date in Roboto Mono 14px Tangerine sits directly below the image, then the post title in Manrope 23px weight 400 in Ink Black. 30px gap between image and date, 10px between date and title. No card container — each post is a vertical stack on the white canvas.
Roboto Mono 14px, uppercase, Tangerine (#f15a24), letter-spacing normal. Centered beneath the corresponding image. Functions as a museum-style object label.
Transparent or Sun Yellow background depending on the current section. Left: Tangerine 'M' wordmark at 30px Manrope weight 700. Right: hamburger menu icon rendered as two Tangerine horizontal lines (no border, no background). Fixed to top edge with no visible divider.
Two-column split at full viewport height. Left column: Sun Yellow background with left-aligned Display Headline (Manrope 200 at 126px, Tangerine) stacked vertically. Right column: Blush Pink background containing a single large product photograph (the quilt coat) hanging from a visible wooden hanger. No margins between the two color blocks — they meet at a hard edge.
Manrope weight 700 at 60-72px, Tangerine, uppercase, left-aligned, letter-spacing 0.12em. Sits above a row of product cards with 48px vertical breathing room. Often breaks across multiple lines with each word on its own line.
#ffffffDefault canvas for product grids, blog lists, and the dominant content surface
#ffed8cFull-bleed hero and accent sections — the brand's most recognizable surface
#ffccccProduct photography backdrop and secondary colored block
#f4a398Tertiary warm surface for section transitions
The page reads as a vertical stack of full-bleed colored panels rather than a contained card grid. The hero is a 50/50 split: yellow left with left-aligned oversize headline, pink right with a single hanging garment photograph. Below the hero, sections return to white canvas with generous 48-80px vertical gaps between blocks. Product grids use a 4-column row of equal-width photographs, each captioned beneath — no gutters beyond the caption gap. Blog sections use a 3-column row. Section headings are oversized and left-aligned, often breaking across multiple lines with single words per line. Navigation is minimal: a small 'M' logo top-left and a hamburger top-right, both flat against whatever colored block the page is currently on. There are no sticky headers, no sidebars, no breadcrumbs — the page scrolls linearly through colored panels like turning pages in a zine. Content is contained within a 1200px max-width but the colored backgrounds themselves always bleed to the viewport edge.
Photography is the product. Every product and blog image is a tight, straight-on photograph of a finished quilt or garment — no lifestyle context, no models in environments, no styled rooms. Garments are photographed hanging from visible wooden hangers against flat Blush Pink or Paper White backdrops, making the wooden hanger a recurring visual motif. Quilt photographs are shot flat-lay on neutral surfaces or hung vertically. Color treatment is true-to-life and saturated — the oranges, navies, pinks, and yellows of the patchwork read as vivid as possible because the rest of the interface is otherwise flat color blocks. No illustrations, no abstract graphics, no icons beyond the simple 'M' wordmark and the two-line hamburger. The quilt patterns themselves function as the site's only ornamental visual content — every triangle and stripe in a photograph echoes the geometric language of the headlines.
**Quick Color Reference** - text (headings, labels): #f15a24 Tangerine - text (body): #000000 Ink Black - text (secondary/captions): #333333 Graphite - background (canvas): #ffffff Paper White - background (hero/blocks): #ffed8c Sun Yellow, #ffcccc Blush Pink, #f4a398 Coral Wash - border (buttons, links): #f15a24 Tangerine, #050133 Midnight Navy - primary action: #f15a24 (outlined action border) **Example Component Prompts** 1. *Outlined Pill Button*: Manrope weight 400 uppercase, 14-18px, Tangerine #f15a24 text on transparent background, 1-2px Tangerine solid border, 66px border-radius, 9px padding-top/bottom, 46px padding-left/right, no shadow. 2. *Display Headline*: Manrope weight 200, 126px, line-height 1.00, letter-spacing 15.12px (0.12em), Tangerine #f15a24 fill, left-aligned, stacked vertically word per line. 3. *Product Gallery Card*: photograph on flat Blush Pink #ffcccc background, 0px border-radius, no shadow, no padding — image bleeds to edge. Caption in Roboto Mono 14px uppercase Tangerine #f15a24, centered 30px below image. 4. *Split Hero Block*: full-viewport, 50/50 split. Left: Sun Yellow #ffed8c background, display headline left-aligned. Right: Blush Pink #ffcccc background, product photograph of garment on wooden hanger, 0px border-radius, no padding. 5. *Section Heading*: Manrope weight 700, 72px, line-height 1.00, letter-spacing 8.64px (0.12em), Tangerine #f15a24 fill, left-aligned, uppercase, 48-80px vertical breathing room above and below.
The system has zero elevation. There are no drop shadows, no inner shadows, no glow effects, no blurred surfaces. Depth is communicated entirely through flat color blocks meeting at hard edges — Sun Yellow against Blush Pink, white against Tangerine text. This is a deliberate craft-zine choice: the quilts themselves are flat textiles, and the interface mirrors their two-dimensional material logic. Any new component must preserve this flatness; if a card or button needs separation from its background, the answer is always a 1-2px chromatic border, never a shadow.
Same craft-portfolio presentation with oversize serif/sans display type, textile-photography-first grids, and a single saturated accent color carrying the entire brand.
Same flat-poster aesthetic with full-bleed color blocks, product photography on saturated backgrounds, and oversized geometric type as the dominant visual element.
Same bold geometric pattern language treated as hero content, flat color-block sectioning, and oversized sans-serif headlines in a single brand color.
Same zine-like layout with full-bleed colored panels, minimal outlined navigation, and display type that breaks across lines word by word.
Same craft-brand approach of oversize headings in a single accent color, flat product photography without lifestyle staging, and museum-label caption typography.
Use the design exports or connect Musterlab to your AI.
