Vermillion
#dd3508Orange accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color
Backlight
backlight.co
Website preview
The design language
Backlight uses a warm editorial language built on cream vellum and one vermillion accent. The full-bleed orange-red hero acts as the cover page of a printed catalog, with white type and a single white pill button as the only allowed elements. Below the hero, the canvas shifts to warm cream (#e4ddd5) carrying white cards, dark text, and a thin peach hairline (#f3b8a9) that traces the grid like a printer's rule. Chat-bubble cards are used as a signature device to dramatize team conversations and pain points. The type system is confident but quiet — Instrument Sans with consistent negative tracking creates density without weight, and Fragment Mono punctuates timestamps and metadata. The palette never escalates: no shadows, no gradients, no secondary accents — just warm neutrals, one bold red, and a single full-bleed black band for tonal contrast.
Color palette
brand
Peach Hairline
#f3b8a9Orange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color
neutral
Cream Vellum
#e4ddd5Page canvas below the hero, input borders, soft surface washes — the warm paper stock everything else sits on
Bone White
#ffffffCard surfaces, button fills on the orange hero, nav text on dark/orange, inverted typography — the bright surface layer
Midnight Ink
#151515Primary headings, body text, dark section backgrounds, chat bubble fills, button borders on light — the heavy type and the rare full-bleed dark band
Graphite
#4f4f4fCard borders, secondary text, muted UI rules — the mid-neutral that softens edges between Bone White and Midnight Ink
Charcoal
#333333Link text on light surfaces, image strokes, secondary borders
Ochre Tan
#d7cabbBadge backgrounds and borders, secondary surface tint — a warm neutral tag fill that sits between cream and peach
Press Black
#000000Icon fills, tight border accents, true-black for print-style contrast moments
Typography
Type scale
Major Second (1.125) · 16px basedisplay-lg
48px · 500 · 48 · -0.96px trackingThe quick brown fox jumps
display
39px · 500 · 45 · -0.78px trackingThe quick brown fox jumps
heading-lg
32px · 500 · 37 · -0.64px trackingThe quick brown fox jumps
text-28
28px · 400 · 1.3The quick brown fox jumps
heading
24px · 500 · 29 · -0.48px trackingThe quick brown fox jumps
heading-sm
20px · 500 · 24 · -0.4px trackingThe quick brown fox jumps
subheading
18px · 400 · 23 · -0.36px trackingThe quick brown fox jumps
body
16px · 400 · 21 · -0.32px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Instrument Sans
- Weights
- 400, 500, 600
- Sizes
- 12, 14, 16, 18, 20, 24, 28, 32, 39, 48
- Line height
- 1.00, 1.15, 1.20, 1.25, 1.30, 1.43
- Letter spacing
- -0.020em at 14px and up; +0.020em at 12px caption
- Fallback
- Inter, DM Sans, or system-ui sans-serif
Primary interface and editorial typeface. Weight 500 for nav and buttons, weight 600 for headings, weight 400 for body. Consistent -0.02em tracking across all sizes tightens the geometric forms and gives the warm palette a modern editorial voice. The slight positive tracking at caption (12px) opens up small labels so they don't feel crushed.
Additional typeface
Fragment Mono
- Weights
- 400, 700
- Sizes
- 14, 16
- Line height
- 1.00, 1.15, 1.30
- Letter spacing
- -0.08em at 14px, -0.02em at 16px
- Fallback
- JetBrains Mono, IBM Plex Mono, or Space Mono
Accent monospace for timestamps in chat bubbles, metadata labels, and small data tags. The extreme -0.08em tracking at 14px collapses letterforms into a dense printed-stamp feel that contrasts the airy sans-serif body.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64-96px
- Card padding
- 16-24px
- Element gap
- 16px
Border radius
cards
8pxbadges
60pxinputs
4pxbuttons
80pxchat-bubbles
20pxSpacing scale
4px8px10px12px15px16px20px24px30px32px48px64px80px120px136px170pxGuidelines
Do
- Use Vermillion (#dd3508) as a full-bleed hero background — it is the only place this color appears as a surface
- Set border-radius to 80px (full pill) for all primary buttons and to 8px for all cards and rectangular elements
- Apply -0.02em letter-spacing to all Instrument Sans text at 14px and above; use +0.02em at 12px caption
- Use Cream Vellum (#e4ddd5) as the page canvas and Bone White (#ffffff) for all cards and surfaces that sit on it
- Use Fragment Mono at 14px with -0.08em tracking for timestamps, metadata, and small data labels in chat bubbles
- Use chat-bubble cards (dark or light, 20px radius) to dramatize team conversations and social proof moments
- Limit Vermillion accents on light backgrounds to thin 1px borders and small icons (FAQ plus, carousel arrows)
Don’t
- Do not add drop shadows, glow effects, or any box-shadow to cards, buttons, or modals — the system is intentionally flat
- Do not use Vermillion as a filled button background — it is only an outlined-action border and a hero surface
- Do not use Peach Hairline (#f3b8a9) as a text color or interactive fill — it is decorative border only
- Do not introduce a second chromatic accent color — the system is monochromatic warm with one red
- Do not use gradients anywhere in the interface — surfaces are solid colors only
- Do not use Midnight Ink (#151515) as body text on the Vermillion hero — all hero text must be Bone White
- Do not center-align headlines — Backlight's editorial voice is left-aligned with generous left padding
Components
Primary Pill Button
Hero CTA and form submitBone White (#ffffff) fill, Midnight Ink (#151515) text, 1px Midnight Ink border, 80px border-radius (full pill), 12px 24px padding, Instrument Sans 14px weight 500. Sits on the Vermillion hero as the only permitted action element.
Outlined Action Button
Secondary call-to-action on light backgroundsTransparent fill, 1px Vermillion (#dd3508) border, Midnight Ink text, 80px border-radius, 12px 24px padding, Instrument Sans 14px weight 500. The chromatic border is the only color this button carries.
Email Input
Hero capture formTransparent background, 1px Bone White border, Bone White placeholder text, 4px border-radius, Instrument Sans 14px, 12px 16px padding. No focus ring color change — the border remains the same weight.
Transparent Nav Bar
Top navigation over the Vermillion heroSits directly on the Vermillion hero with no background fill. Logo 'BACKLIGHT' left in Bone White, Instrument Sans 12px weight 600, letter-spacing wide (uppercase tracking). Nav items in Bone White, 14px weight 500, with Peach Hairline (#f3b8a9) underline indicating active state. Primary CTA is a Bone White pill button flush right.
Hero Band
Full-bleed opening sectionVermillion (#dd3508) background spanning full viewport width, 64-96px vertical padding, left-aligned content with 1200px max-width. Display headline in Bone White at 48px, body at 18px in Bone White. The hero is the only place Vermillion appears as a surface.
Dark Contrast Band
Full-bleed section for tonal breakMidnight Ink (#151515) background, Bone White text, 64-96px vertical padding. Used sparingly — once per page — to create a printed-poster moment of inversion between the warm cream sections.
Chat Bubble Card (Dark)
Team pain-point messaging on light backgroundMidnight Ink (#151515) fill, Bone White text, 20px border-radius, 16px padding, small avatar circle on the left. Name + Fragment Mono 14px timestamp above message, message in Instrument Sans 16px weight 400. Functions as a social-proof dramatization device.
Chat Bubble Card (Light)
Team pain-point messaging on light background (alternate)Bone White fill, Graphite (#4f4f4f) 1px border, Midnight Ink text, 20px border-radius, 16px padding. Same internal structure as the dark variant but inverts the relationship — sits on Cream Vellum canvas.
FAQ Accordion Row
Expandable question listFull-width row, Graphite (#4f4f4f) 1px hairline divider, 24px vertical padding, Instrument Sans 18px weight 500 question text in Midnight Ink. Plus icon right-aligned in Vermillion (#dd3508), 20px. No background fill, no card chrome — the divider does the visual work.
Carousel Arrow Button
Horizontal content navigationCircular button, 40px diameter, Bone White fill, Midnight Ink (#151515) 1px border, Midnight Ink chevron icon centered. Left/right pair sits above content blocks.
Product Card
Feature or product listingBone White fill, Graphite (#4f4f4f) 1px border, 8px border-radius, 16-24px padding, Instrument Sans 18px weight 500 title in Midnight Ink, body at 14px in Graphite. No shadow, no hover elevation — the border carries the definition.
Pill Badge
Status, category, or NEW tagOchre Tan (#d7cabb) background, Graphite (#4f4f4f) 1px border, 60px border-radius (pill), 4px 12px padding, Instrument Sans 12px weight 500 in Midnight Ink. Used for 'NEW' labels and category tags.
Sticky Promo Banner
Bottom-right persistent announcementMidnight Ink (#151515) fill, 8px border-radius, Bone White text, Fragment Mono 12px weight 700 for the 'NEW' label in Vermillion, headline at 16px Instrument Sans weight 500, inline thumbnail image on the right with Peach Hairline border.
Footer
Site footer with link columnsSits on the Vermillion hero continuation or transitions to Midnight Ink. Bone White text, Instrument Sans 14px, link columns separated by Peach Hairline (#f3b8a9) vertical rules. Logo bottom-left in Bone White uppercase.
Surfaces & elevation
Level 0
Cream Vellum
#e4ddd5Page canvas — the warm paper background that carries the majority of content
Level 1
Bone White
#ffffffCards, chat bubbles, button fills — the bright surface layer above the canvas
Level 2
Midnight Ink
#151515Dark chat bubbles, full-bleed contrast bands, footer — tonal inversion surfaces
Level 3
Vermillion
#dd3508Hero band — the single chromatic surface, used once per page for maximum impact
Flat by design. No drop shadows, no elevation effects. Surface separation is achieved entirely through color contrast between the warm cream canvas and Bone White cards, and through thin 1px borders in Graphite. This reinforces the printed/editorial feel — the design reads as ink on paper, not as digital elevation.
Layout & imagery
Layout
Backlight is a left-aligned, max-width 1200px layout with full-bleed section bands. The hero is a full-viewport-width Vermillion band with left-aligned headline and email capture. Below the hero, the layout alternates between Cream Vellum canvas and occasional Midnight Ink full-bleed bands. Content blocks use generous 64-96px vertical section gaps. The FAQ section is a single-column list of left-aligned questions with right-aligned Vermillion plus icons. Carousel sections use left/right circular arrow buttons above horizontally-scrolling content. Navigation is a transparent top bar flush with the hero — no sticky behavior, no background fill until the hero ends. The page reads top-to-bottom as a sequence of editorial spreads: orange cover, cream pages with card grids and chat dramatizations, one black inversion page, then a warm footer.
Imagery
Backlight uses three image modes: (1) small circular avatar portraits inside chat bubble cards, shown at ~32px with a subtle Peach Hairline border, (2) inline product/media thumbnails in the sticky promo banner with a 1px Peach Hairline stroke, and (3) full-bleed media crops on the right edge of content sections, treated with sharp rectangular edges (no rounding) so they read as printed halftones. Photography is warm-toned and editorial — never stock-lifestyle. No illustrations, no 3D renders, no abstract graphics. The visual language is print-catalog: portraits, media stills, and chat artifacts arranged in a grid of cards and bubbles.
Design notes
Agent Guide
**Quick Color Reference** - text (primary): #151515 - text (muted/border): #4f4f4f - background (canvas): #e4ddd5 - surface (cards/buttons): #ffffff - accent border (outlined action, hero surface): #dd3508 - decorative border (printed rules): #f3b8a9 - primary action: #dd3508 (outlined action border) **Example Component Prompts** 1. **Vermillion Hero Band**: Full-width #dd3508 background, 96px vertical padding. Headline at 48px Instrument Sans weight 500, #ffffff, letter-spacing -0.96px, left-aligned with 1200px max-width container. Body text at 18px weight 400, #ffffff. Top nav: 'BACKLIGHT' logo in 12px Instrument Sans weight 600 uppercase, #ffffff, with 0.24px letter-spacing. Nav links in #ffffff 14px weight 500. Right-aligned white pill button: #ffffff fill, #151515 text, 1px #151515 border, 80px radius, 12px 24px padding. 2. **Cream Canvas Section with Chat Cards**: #e4ddd5 background. Section heading at 32px Instrument Sans weight 500, #151515, letter-spacing -0.64px, left-aligned. Below: a staggered layout of chat bubble cards — alternating between #151515 dark bubbles (20px radius, 16px padding, #ffffff text, Fragment Mono 14px weight 400 at -1.12px letter-spacing for timestamps) and #ffffff light bubbles with 1px #4f4f4f border (same 20px radius and internal structure). 3. **FAQ Accordion List**: #e4ddd5 background. List of questions at 18px Instrument Sans weight 500, #151515, 24px vertical padding, separated by 1px #4f4f4f hairline dividers. Each row has a Vermillion (#dd3508) plus icon right-aligned, 20px size. No background fill on rows — dividers do the work. 4. **Dark Contrast Band**: Full-width #151515 background, 80px vertical padding. Headline at 32px Instrument Sans weight 500, #ffffff. 1200px max-width content container, left-aligned. 5. **Outlined Action Button on Cream Canvas**: Transparent fill, 1px #dd3508 border, 80px border-radius, #151515 text at 14px Instrument Sans weight 500, 12px 24px padding. The chromatic border is the only color the button carries.
Similar brands
Frame.io
Same warm editorial palette with cream/beige surfaces and a single bold accent — both are media-workflow tools that favor a printed-catalog feel over a typical SaaS dashboard
Pitch
Same warm cream canvas with one strong accent color and left-aligned editorial headlines — both use generous spacing and chat/bubble cards as signature visual devices
Ceros
Same warm-toned, editorial-brand aesthetic with flat surfaces, no shadows, and a single chromatic voice — both treat the page as a printed publication
Stripe
Same tight tracking on display headlines, generous section spacing, and confident use of a warm-leaning palette with one strong accent
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
