Fidèle Blue
#1664ebHeadlines, nav links, brand asterisk, announcement bar fill, body borders — the single chromatic ink of the system; whenever color appears, this is it
Fidèle Editions
fidele-editions.comWebsite preview
The design language
Fidèle Editions operates as a risograph studio's web storefront: a warm cream paper canvas printed with one aggressive blue ink. The entire system is built on flatness — no shadows, no gradients, near-zero corner rounding, no decorative borders. Typography does the heavy lifting: a custom geometric sans (BaselGrotesk) at extreme size contrast, with display sizes crushed tight at 0.92 line-height and negative tracking, while small labels breathe with wide positive tracking. The vivid blue is used as a printing press uses ink — for type, nav, the announcement bar, and the massive asterisk logo — never as a subtle accent. Content lives in dense, editorial blocks: full-bleed imagery, tight product grids, photo strips. Every element feels stamped onto paper, not rendered on a screen.
Color palette
brand
Lighter Press Blue
#4f89ecSecondary blue used for subtle borders, icon tints, and decorative strokes where Fidèle Blue would dominate
Link Blue
#006ce5Deeper blue for inline hyperlinks within running text, slightly darker than the primary to read as a separate interactive state
neutral
Paper White
#f8f7efPage canvas and card surfaces — a warm off-white that gives the entire system its print-stock identity; never use pure #ffffff for page background
Card Cream
#e2e2dfElevated surface for cards, panels, and product tiles — one step warmer/darker than Paper White for layering without shadows
Pure White
#ffffffHairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color
Press Black
#121212Body text, dark backgrounds, and the rare filled button — near-black rather than pure black, softening contrast on the cream stock
Typography
Type scale
Major Second (1.125) · 18px basedisplay
62px · 400 · 0.92 · -3px trackingThe quick brown fox jumps
text-41
41px · 400 · 0.92The quick brown fox jumps
text-38
38px · 400 · 1.3The quick brown fox jumps
heading-lg
37px · 400 · 0.96 · -0.74px trackingThe quick brown fox jumps
heading
32px · 400 · 1 · -0.64px trackingThe quick brown fox jumps
text-28
28px · 400 · 0.96The quick brown fox jumps
heading-sm
26px · 400 · 1.2 · 0.65px trackingThe quick brown fox jumps
text-24
24px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Arial
- Weights
- 400
- Sizes
- 13px
- Line height
- 1.2
Arial — detected in extracted data but not described by AI
Additional typeface
BaselGrotesk
- Weights
- 400 (Book), 400 (Regular), 700 (Bold)
- Sizes
- 14, 16, 20, 22, 24, 26, 28, 32, 37, 38, 41, 62
- Line height
- 0.92–1.80
- Letter spacing
- Display 62px: -0.049em (~-3.0px); 32–41px: -0.020em (~-0.8px); 20–28px: 0.025em (~+0.5px); 14–16px body: 0.043–0.067em (~+0.6 to +1.0px)
- Fallback
- Inter, or NB International Pro for a closer geometric match
The sole typeface of the system. Book weight (400) for body and most UI; Regular (400) for lists and some headings; Bold (700) for the rarest emphasis. Display sizes (62px) use line-height 0.92 with -0.049em tracking — characters nearly touch. Small labels (14px) use +0.063em tracking — wide, airy, stamped. The contrast between these two tracking regimes is the type signature.
Additional typeface
OTMagister
- Weights
- 400
- Sizes
- 62
- Line height
- 0.92
- Letter spacing
- -0.0160em
- Fallback
- GT Sectra Display, or Editorial Old (Pangram Pangram)
Occasional display headlines where a more editorial/serif-leaning voice is wanted. Same 62px display size and tight 0.92 leading as BaselGrotesk display, -0.016em tracking.
Additional typeface
GTStandard-M
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.5
GTStandard-M — detected in extracted data but not described by AI
Additional typeface
Assistant
- Weights
- 400
- Sizes
- 26px
- Line height
- 1.5
- Letter spacing
- 0.025
Assistant — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Section gap
- 64px
- Card padding
- 16px
- Element gap
- 5px
Border radius
tags
0pxcards
4pximages
0pxbuttons
4pxSpacing scale
1px2px4px5px7px8px10px11px12px14px15px16px19px21px22px24px28px35px42px48px96px156pxGuidelines
Do
- Use #f8f7ef as the page canvas on every screen — never substitute #ffffff for the base background.
- Set display type (62px) with line-height 0.92 and letter-spacing -0.049em; characters must nearly touch to feel printed, not rendered.
- Set body and label type (14–16px) with tracking +0.043em to +0.067em — the wide tracking is half the editorial voice.
- Reserve Fidèle Blue (#1664eb) for type, the announcement bar, nav links, the asterisk, and outlined actions — one ink, used with volume.
- Keep all corner radii at 0–4px; the page should read as cut paper, not as rounded UI cards.
- Let the product grid float on Paper White without card backgrounds; the 1px white border around each product image is the only frame.
- Use full-bleed image sections (photo strips, hero) with no rounding, no overlay, no caption — let the photography do the work.
Don’t
- Don't introduce drop shadows, inner shadows, or glow effects — the system is deliberately flat and reads as paper, not glass.
- Don't use any chromatic color other than Fidèle Blue, Lighter Press Blue, and Link Blue — the cream + blue duotone is the entire palette.
- Don't use filled solid-color buttons for primary actions; the system's primary control is the outlined Fidèle Blue action.
- Don't set display type with generous line-height (1.2–1.5) — the crushed 0.92 leading is a signature, not a default.
- Don't round cards, images, or tags beyond 4px; anything rounder breaks the print-stock metaphor.
- Don't add gradients, textures, or noise — surfaces are flat solids, period.
- Don't use #ffffff as a page background; it must remain the warm Paper White #f8f7ef to keep the editorial warmth.
Components
Announcement Bar
Top-of-page promotional stripFull-bleed solid Fidèle Blue (#1664eb) background, white text, 1px white internal border. Centered single-line text in BaselGrotesk Book 14px, line-height 1.5, tracking +0.88px. Height ~40px. Acts as the loudest brand-color beat on every page.
Top Navigation Bar
Primary site navigationPaper White (#f8f7ef) background, no border. Three-column flex: left nav links (Shop, About, Journal) in Fidèle Blue 14px; center wordmark 'Fidèle Editions' where 'Fidèle' is blue and 'Editions' is Press Black; right cluster (language selector, search icon, cart icon) in Fidèle Blue. Nav links have 5px horizontal padding. Height ~56px. No dropdown menus visible — flat, link-only.
Hero Image Block
Full-bleed editorial photographEdge-to-edge image with no rounding and no overlay. Sits directly below the nav and announcement bar. May have a single-line headline in BaselGrotesk 32–37px Fidèle Blue overlaid on the Paper White above the image, left-aligned with 14–24px padding.
Product Card
Grid tile for a book, zine, t-shirt, or blanketSquare product image, 1px Pure White (#ffffff) border, no rounding, Card Cream (#e2e2df) background behind image for letterboxing. Below image: product title in Press Black 14px, artist name in Press Black 14px, price right-aligned in Press Black 14px. 16px column-gap in the grid. Title and price sit on the Paper White canvas, not in a card surface.
Product Grid
Shop 'What's on: Latest' listing5-column grid on desktop, uniform product cards, 16px column-gap, 32px row-gap. Section heading 'What's on: Latest' in BaselGrotesk 37–41px Fidèle Blue above the grid, left-aligned with 24px left margin. No card backgrounds behind individual tiles — the grid floats on Paper White.
Outlined Action Button
Primary interactive control1–2px solid Fidèle Blue border, transparent or Paper White fill, Fidèle Blue text in BaselGrotesk Book 14px, padding 12px 24px, 4px corner radius. No fill state — this system uses outlined actions, not filled ones. Hover: invert (blue fill, white text).
Photo Strip Section
Full-bleed editorial image bandEdge-to-edge row of 4–6 images, each ~16.6% width, no gaps, no rounding, no captions. Functions as a visual divider between content blocks. Sits on Paper White with no card treatment.
Split Feature Section
Two-column image+content block50/50 split: one side holds a single large element (the giant blue asterisk SVG, or a photograph), the other holds supporting content. No background change between columns, no border — separation is purely spatial. The asterisk itself fills ~60% of its column as a 200–300px solid Fidèle Blue shape.
Giant Asterisk Mark
Brand signature / decorative elementSolid Fidèle Blue SVG of a 6-point asterisk (~200–300px), no stroke, no shadow, no rounding. Functions as a logo, section anchor, and visual punctuation — the system's most identifiable shape. Always rendered on Paper White, never on blue.
Product Detail Link
Title link under a product imagePress Black 14px BaselGrotesk Book, no underline, hovers to Fidèle Blue. Sits flush-left under the image; price uses the same style, flush-right in a separate flex child.
Language Selector
Top-bar utilityFidèle Blue 14px text 'English' with a small downward chevron icon in Fidèle Blue. No dropdown chrome visible — the control is text-only with the caret as the affordance.
Icon Button (Search/Cart)
Top-bar utilityFidèle Blue line icon (search lens, cart bag) at 20px, no button background, no border. Tap target extends to ~40px via padding. Icons are stroke-only, 1.5px weight, no fill.
Footer Rule Line
Section divider1px solid Press Black or 60% Press Black horizontal line spanning the full content width, used to separate the product grid from the photo strip. 32–64px vertical margin on each side.
Surfaces & elevation
Level 0
Paper Stock
#f8f7efThe base canvas — every page sits on this warm cream, never white
Level 1
Card Cream
#e2e2dfProduct cards, inset panels, and elevated tiles — the only layering step above the canvas
Level 2
Pure White
#ffffffImage frames and sharp contrast accents on top of the cream layers
Level 3
Fidèle Blue
#1664ebBrand-color surface for the announcement bar, the giant asterisk, and any section that needs to read as 'inked'
The system is strictly flat. No drop shadows, no inner glows, no border-based depth tricks. Surface hierarchy is communicated by tonal shifts in the cream palette (Paper White → Card Cream) and by the sudden introduction of Fidèle Blue as an 'inked' layer. Edges are sharp (4px max) so the page reads as paper sheets stacked on a table, not as floating Material cards.
Layout & imagery
Layout
Full-bleed editorial layout with no max-width container on outer edges. The top stack is: announcement bar (full-bleed blue) → nav bar (Paper White) → optional headline strip → hero image (edge-to-edge). The product grid sits centered with a left-aligned 37–41px blue heading, 5 columns on desktop, tight 16px gaps. Below the grid, a 1px black rule line separates a full-bleed photo strip (4–6 images, no gaps). The final block is a 50/50 split — giant blue asterisk on the left, shipping photo on the right. The page rhythm is: loud brand bar → image → dense product grid → image band → brand mark + photo. Vertical spacing is compact (64px section gaps), and the layout never alternates light/dark — the cream canvas persists underneath everything except the announcement bar.
Imagery
Imagery is documentary-style product and studio photography: hands operating a risograph press, stacked publications on a table, cardboard shipping boxes wrapped in branded tape, a person wearing a printed t-shirt. All photography is natural-light, unposed, slightly grainy, and full-bleed — the camera is in the studio, not in a lifestyle set. Product images (book covers, zines, textiles) are shot straight-on with 1px white borders against the cream canvas. No illustrations, no 3D renders, no abstract graphics — the only graphical mark is the solid blue asterisk. The asterisk itself functions as both logo and section divider, and is the only non-photographic visual element on the site.
Design notes
Agent Guide
## Quick Color Reference - text: #121212 - background: #f8f7ef - border: #1664eb - accent: #1664eb (Fidèle Blue — used for type, announcement bar, asterisk) - card surface: #e2e2df - primary action: #1664eb (outlined action border) ## 3-5 Example Component Prompts 1. **Announcement bar**: full-bleed solid #1664eb background, white text, 1px white internal border top and bottom. Single line, centered. BaselGrotesk Book 14px, line-height 1.5, letter-spacing +0.88px. Height ~40px. 2. **Product card**: square image with 1px #ffffff border, no rounding, #e2e2df letterbox behind. Below image, on #f8f7ef canvas: product title in #121212 BaselGrotesk Book 14px (tracking +0.6px), price right-aligned in same style. 16px column-gap in a 5-column grid. 3. **Section headline**: 'What's on: Latest' in #1664eb BaselGrotesk 37px, line-height 0.96, letter-spacing -0.74px, left-aligned with 24px left margin, sitting directly on #f8f7ef. 4. **Outlined action button**: 1px solid #1664eb border, #f8f7ef fill, #1664eb text in BaselGrotesk Book 14px (tracking +0.6px), padding 12px 24px, border-radius 4px. Hover state inverts to #1664eb fill with #ffffff text. 5. **Giant brand asterisk**: solid #1664eb 6-point asterisk SVG, ~250px, no stroke, no shadow, centered in a 50% column on the #f8f7ef canvas.
Similar brands
Apartamento Magazine
Same editorial-print DNA — warm off-white canvas, large display type in a single brand color, full-bleed documentary photography, zero shadows or rounded corners.
Casa Magazines
Independent publishing storefronts with a single bold accent color stamped across headlines and announcement bars, flat layout, and tight product grids.
The Newsprint (concept / newspaper-style Shopify themes)
Shares the risograph-meets-newspaper sensibility: cream paper stock, one chromatic ink, sharp 4px corners, and type that ranges from crushed display to wide-tracked labels.
MoMA Design Store editorial pages
Full-bleed photography bands, flat cream canvases, and a 5-column product grid with minimal card chrome — though Fidèle is more aggressive with its single blue.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
