Amber Curtain
#ec580aHero and statistics block backgrounds, brand atmospheric layer — the entire warm light system of the page, applied as full-bleed gradient with vertical streak texture. Never used for buttons, links, or inline accents
V7labs
v7labs.com
Website preview
The design language
V7 stages its interface like a film studio: a single warm amber hero floods the first screen with vertical curtain-like light streaks, then gives way to a high-contrast editorial system of cream-white canvases and near-black panels. The voice is serious and archival — Martina Plantijn serif at whisper-light weight for headlines carries a printed-publication authority, while the dense sans-serif body text in STK Bureau keeps the data-heavy product feel quiet and clinical. Color discipline is absolute in the interface: every interactive surface is either pure white, pure black, or the deep warm neutral, with the amber orange reserved almost exclusively for atmospheric hero and statistic blocks — never for buttons, never for links, never for accents. Components are pill-shaped and minimal, sitting flush on the page with hairline borders and almost no shadow, reinforcing the impression of a system designed for decisions rather than decoration.
Color palette
brand
Ember Wash
#ff683dLighter highlight within the amber gradient — the illuminated folds of the curtain texture, appearing in hero highlights and statistic card upper regions
Midnight Ink
#00104eDeep navy used sparingly for outlined link borders and select link text — the only chromatic accent in the otherwise achromatic interface, and only where link affordance must be unmistakable
neutral
Canvas Cream
#f7f6f5Page background, the warm off-white that gives the whole system its paper-like editorial base — sits behind cards, inputs, and quiet content areas
Paper White
#ffffffCard surfaces, elevated panels, button fills for ghost and light action variants — the bright top layer of the surface stack
Charcoal Depth
#1c1c1cDark section backgrounds, footer, inverse card surfaces — the counterweight to the amber hero, used when content must read against a near-black ground
Graphite
#292929Filled button backgrounds, input fields, dense neutral surfaces — the primary action surface when a button must be heavy and deliberate rather than ghost
Stone
#484848Secondary card backgrounds and darker card variants on light sections
Mist
#989897Muted helper text, secondary metadata, and low-emphasis borders on light backgrounds
Foil
#6a6a6aQuiet border strokes and disabled text — present but unobtrusive
Onyx
#000000Primary text, hairline borders, icon strokes, the dominant border color across the entire interface
Typography
Type scale
Minor Third (1.2) · 12px basedisplay
60px · 300 · 1 · -0.02px trackingThe quick brown fox jumps
heading
40px · 300 · 1.07 · -0.02px trackingThe quick brown fox jumps
heading-sm
30px · 400 · 1.33 · -0.01px trackingThe quick brown fox jumps
subheading-lg
24px · 300 · 1.4 · -0.02px trackingThe quick brown fox jumps
text-21
21px · 400 · 1.14The quick brown fox jumps
subheading
18px · 430 · 1.43 · -0.02px trackingThe quick brown fox jumps
body
16px · 400 · 1.4 · -0.01px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.25 · -0.01px trackingThe 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
Martina Plantijn
- Weights
- 300, 400
- Sizes
- 24px, 30px, 40px, 60px
- Line height
- 1.00, 1.07, 1.33, 1.40
- Letter spacing
- -0.02em, -0.01em
- Fallback
- GT Sectra, Tiempos Headline, or Playfair Display at weight 300
Display and editorial headlines — the only serif in the system, used at whisper-light weight 300 for hero statements and section titles. The choice of a 300-weight serif is anti-convention: most enterprise tools shout in 600–700 sans-serif; V7 lets the serif breathe and creates authority through typographic restraint. Letterspacing tightens as size grows (-0.02em at 40px, -0.01em at 30px) so large displays optically close into a single word-mass.
Additional typeface
STK Bureau
- Weights
- 400, 430
- Sizes
- 9px, 10px, 12px, 14px, 16px, 18px, 21px, 24px
- Line height
- 1.00, 1.08, 1.11, 1.14, 1.17, 1.25, 1.40, 1.43, 1.56
- Letter spacing
- -0.027em, -0.025em, -0.02em, -0.01em
- Fallback
- Inter, Söhne, or Untitled Sans at 400 and 500
Body, navigation, UI controls, and subheadings — the workhorse face. The 430 weight is unusual (a micro-step between regular and medium) and gives buttons and labels a slightly denser feel than standard 400. Letterspacing follows a consistent contraction pattern, tighter at larger sizes and approaching zero at 12px and below. Acts as the 'ink' of the system while Martina Plantijn acts as the 'voice'.
Additional typeface
Inter
- Weights
- 400, 500
- Sizes
- 12px, 16px
- Line height
- 1.33
- Fallback
- System UI, SF Pro Text, or IBM Plex Sans at 400
Small inline metadata and tertiary body text — appears in badge-like annotations and compact helper labels where STK Bureau's tighter tracking would feel too dense at minimum sizes.
Additional typeface
Inter Variable
- Weights
- 400, 500
- Sizes
- 12px
- Line height
- 1.33
Inter Variable — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 8px
Border radius
cards
12pxicons
99pxpills
99pxinputs
160pxbuttons
160pxSpacing scale
2px3px4px5px6px7px8px9px10px11px12px13px14px15px16px17px18px19px20px22px24px25px26px29px30px32px36px38px39px40px41px47px48px49px55px60px61px66px80px100px120pxGuidelines
Do
- Use 160px border-radius for all interactive buttons and form inputs — the fully pill shape is non-negotiable across every control
- Set headlines in Martina Plantijn weight 300 at 40px or 60px; never go bolder than 400 in the serif
- Apply the amber gradient only to full-bleed hero and statistics sections; never use it as a button fill, badge background, or inline accent
- Pair every white pill button with a 1px #000000 border — the hairline edge gives the pill weight without committing it to a color
- Alternate sections strictly between #f7f6f5 cream and #1c1c1c near-black; light content goes on cream, dark content (product screenshots, workflow demos) goes on near-black
- Use 1px solid #000000 as the default border color on light surfaces and 1px solid #292929 on dark surfaces
- Set body copy in STK Bureau 16px with -0.01em tracking; tighten to -0.02em only at 24px and above
Don’t
- Never apply the amber/orange palette to buttons, links, icons, or form controls — it belongs only to atmospheric full-bleed sections
- Never use shadows on cards, panels, or content surfaces — the only shadows permitted are on viewport-anchored overlays
- Never set a headline in STK Bureau or a body paragraph in Martina Plantijn — the serif/sans division between voice and ink is structural
- Never use radius values other than 99px, 12px, and 160px; the 8px mid-tier is reserved for small overlay cards only
- Never break the section alternation by placing light-mode product cards directly under the dark inverse sections without a clear boundary
- Never set body text below 14px in the editorial context; 12px is the absolute floor and belongs only in tags and metadata
- Never use chromatic color for status indicators, success states, or error states — stay achromatic and use weight, position, and the navy #00104 for emphasis only
Components
Hero Amber Banner
First-screen atmospheric statementFull-bleed amber gradient (Amber Curtain #ec580a deepening into deeper ember, overlaid with vertical lighter streaks creating a curtain-of-light texture). Centered stack: Martina Plantijn 60px weight 300 display headline in white, followed by a subheading line in STK Bureau 18px, then a white pill button. Occupies the full viewport height. The streak texture is the signature — it makes the orange read as light through fabric, not as a flat fill.
White Pill Button (Primary)
Main call-to-action on amber and light sectionsSTK Bureau 14px weight 430, white fill (#ffffff), black text (#000000), 160px border-radius (fully pill), 12px 20px padding, 1px solid #000000 border. Appears on amber hero and dark sections. The black hairline border on a white pill is deliberate — it gives the button weight without filling it with color.
Graphite Pill Button (Secondary)
Heavier action on light and cream sectionsSTK Bureau 14px weight 430, #292929 fill, white text, 160px radius, 12px 20px padding. Used when a button must dominate the visual hierarchy on a light cream canvas. Reads as a near-black capsule.
Ghost Pill Button
Secondary or tertiary actionTransparent fill, 1px solid #000000 border, black text, 160px radius, 12px 20px padding. Used for 'Log in' and lower-priority actions where the button should be present but not assertive.
Dark Feature Card
Product workflow showcase on inverse sections#1c1c1c background, 12px border-radius, 24px internal padding, minimal 1px subtle border. Contains a product-screenshot preview (blurred/darkened), a small label tag, a heading, and body text. The card sits on a #1c1c1c section background with no shadow — the boundary is created by the screenshot content, not by elevation.
Statistic Card
Large-number proof points on amber sectionAmber gradient fill (Amber Curtain to Ember Wash), 12px radius, 24px padding, 8px inner gap. Houses a Martina Plantijn 60px weight 300 number in white, followed by a STK Bureau 16px descriptor. The card-on-amber effect: when cards are placed on the amber section, they become indistinguishable from the ground, making the number appear to float.
Before/After Comparison Block
Impact statement under statisticsInline composition: STK Bureau 12px 'Before' label in #989897 muted text, then a slash, then a Martina Plantijn 24px weight 300 result figure. Sits directly under a statistic card with no container — the typographic contrast does the work.
Logo Bar
Social proof below heroHorizontal row of partner/client wordmarks, STK Bureau 12px grayscale (#989897 or white on amber), 80px row gap, centered. Logos are rendered in white on the amber hero and in black or #989897 on light sections.
Announcement Bar
Slim top-of-page noticeFull-width, #1c1c1c background, STK Bureau 12px white text centered, with a small inline arrow glyph. 8px vertical padding, 4px element gap. The only dark element above the hero.
Top Navigation
Primary site navigationTransparent background over hero (white text) on amber, then switches to white background with black text on cream sections. STK Bureau 14px weight 430. Logo on far left, nav links centered, 'Log in' ghost button + white pill 'Request a demo' on far right. Hairline 1px #000000 bottom border on light sections, none on amber.
Cookie Consent Pill
Persistent consent noticeWhite background, 8px radius, 16px padding, 1px #000000 border. STK Bureau 12px body text with a 'Privacy Policy' inline link. 'Okay' button is a 40px-radius pill with #000000 fill, white text. Positioned bottom-right with a soft drop shadow.
Testimonial Quote Block
Customer voice on amber sectionFull-bleed continuation of the amber gradient, centered text stack: STK Bureau 24px weight 400 quote in white, followed by 12px attribution in lighter weight. Large internal padding (64px top/bottom), max-width 600px for the text column.
Cookie Banner Override
Persistent micro-CTASmall 8px-radius card pinned bottom-right, white fill, 1px hairline border, 12px STK Bureau text. The 'Okay' action is a compact 40px-radius pill. This component is the only place a compact shadow appears.
Surfaces & elevation
Level 1
Canvas
#f7f6f5The page ground — warm cream that reads like uncoated paper
Level 2
Card
#ffffffLifted content surfaces — product cards, testimonial blocks, and white pill buttons sit here
Level 3
Dark Panel
#1c1c1cInverse sections — workflow showcases and feature grids on near-black
Level 4
Graphite Field
#292929Dense surface for inputs, filled buttons, and the darker card tier
Level 5
Amber Stage
#ec580aHero atmospheric layer and statistics blocks — the only chromatic surface tier
The interface is intentionally flat. Shadows appear in exactly two narrow contexts: the cookie consent card pinned to the viewport, and small floating status badges. Every other surface relies on background-color contrast, hairline borders, and the section-by-section alternation between cream and near-black to create separation. Elevation is treated as a viewport-anchored tool, not a structural one.
Cookie consent card
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
Floating notification badges
rgba(0, 0, 0, 0.25) 0px 1px 2px 0px
Layout & imagery
Layout
The page model is a vertical stack of full-bleed sections, each section filling the full viewport width with no max-width constraint at the section level. Content inside sections is centered within a 1200px max-width column. The first section is a full-viewport amber hero with centered text stack. Below it, a logo bar sits centered within the amber field. The page then alternates: dark (#1c1c1c) product-workflow section with a 3-column card grid, then a full-bleed amber statistics block with a 3-column card grid of large numbers, then back to cream. The navigation is a single transparent bar over the hero that transitions to a white bar with hairline border as the user scrolls into cream sections. The overall rhythm is: warm → dark → warm → light → dark, with the amber sections acting as exclamation points and the cream/dark sections doing the quiet explanatory work.
Imagery
No photography, no lifestyle imagery, no stock visuals. The only imagery is product-screenshot artwork embedded inside dark feature cards — previews of the V7 workspace, data tables, and document-processing UI, all rendered as realistic app captures with native OS chrome. The hero relies on a procedural gradient with vertical streak texture rather than a photograph. Iconography is absent or used at micro scale; the system reads as text-and-product-screenshot driven, not icon-driven. The visual language is editorial-archive: warm light + paper + darkroom, where the product screenshots ARE the imagery.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #f7f6f5 (cream) / #1c1c1c (dark) - border: #000000 hairline - accent: #ec580a (amber, atmospheric only) - primary action: #292929 (filled action) **Example Component Prompts** 1. *White pill action button*: STK Bureau 14px weight 430, white #ffffff fill, black #000000 text, 1px solid #000000 border, 160px border-radius, 12px vertical × 20px horizontal padding. Pair with a Graphite Pill Button variant using #292929 fill and white text for heavier emphasis. 2. *Hero amber banner*: Full-bleed amber gradient (linear from #ec580a deepening to #c44708, with lighter #ff683d vertical streaks at 20% opacity). Centered stack inside 1200px max-width: Martina Plantijn 60px weight 300 white headline with -0.02em tracking and 1.0 line-height, STK Bureau 18px weight 400 white subheading at 1.43 line-height, then a White Pill Button. Full viewport height. 3. *Dark product feature card*: #1c1c1c fill, 12px border-radius, 24px padding, 1px solid #292929 border. Contains a product-screenshot image block (blurred edges, aspect-ratio 16:10), a small STK Bureau 12px uppercase tag, a Martina Plantijn 30px weight 300 white heading, and a STK Bureau 14px #989897 body line. No shadow. 4. *Stat block on amber*: Amber gradient fill, 12px radius, 24px padding, 8px inner gap. Martina Plantijn 60px weight 300 white number at 1.0 line-height, STK Bureau 16px weight 400 white descriptor below at 1.25 line-height. Sits on the full-bleed amber section background — the card visually merges with the ground so only the number reads. 5. *Top navigation over hero*: Transparent background, no border, STK Bureau 14px weight 430 white text for nav items. Logo white on left, nav links centered, ghost 'Log in' link and white-pill 'Request a demo' button on right. When the user scrolls past the hero, the nav switches to white #ffffff background with a 1px solid #000000 bottom border and black text.
Section Rhythm Rules
Sections alternate strictly between two states: AMBER (full-bleed gradient, white text, display serif, 80px vertical padding) and QUIET (cream #f7f6f5 background or dark #1c1c1c background, 80px vertical padding, STK Bureau body). No section may bridge between amber and quiet within a single block. The amber sections serve exactly three purposes: hero, statistics, and testimonials — they are exclamation points in an otherwise archival composition. Dark sections are reserved for product-workflow demonstrations; cream sections are reserved for explanations, feature grids, and supporting content. A dark section may never follow another dark section, and a cream section may never follow another cream section without an amber separator or a hairline divider.
Similar brands
Linear
Same restrained achromatic UI with a single dramatic full-bleed color moment — Linear uses purple gradients, V7 uses amber, but the structural pattern of a vivid hero followed by a near-monochrome product surface is identical
Pinecone
Similar editorial-archive feel with a serif display face carrying headline weight and a dense sans-serif body — and the same discipline of reserving one atmospheric color for hero blocks only
Harvey (legal AI)
Same enterprise-AI pattern of warm, light-infused hero, cream/dark alternating sections, and pill-shaped minimal controls — the warm-light-intelligence visual vocabulary is shared
Anthropic
Same whisper-light serif headlines (Anthropic uses a custom serif at weight 300–400) over full-bleed atmospheric color, then strict monochrome product surfaces below — both brands choose typographic restraint over display weight for authority
Hebbia
Same enterprise-AI with a single warm atmospheric hero color and a near-black product showcase section below — the vertical-streak amber gradient treatment is distinctive to this corner of the market
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
