# featurebase.app

Source: https://www.featurebase.app/
Captured: 2026-09-20
Tags: saas, landing, dark, both, dark-techno, corporate-clean, minimal, confident, technical, trustworthy, premium
Colors: #0f0f18, #2a2b39, #4d4f5a, #6e6e75, #8c8c91, #f6f6f6, #aaa9b9, #cecfd7
Type (h1): __Inter_f367f3 · 48px/66px · 500 · tracking -0.96px — "Modern customer support & feedback platform"
Type (h2): __Inter_f367f3 · 23px/34.5px · 400 — "Support your customers with AI, collect feedback, and announce product updates —"
Type (h3): __Inter_f367f3 · 14px/20px · 500 — "Discover all Support Platform features"
Type (body): __Inter_f367f3 · 18px/28px · 400 — "Powering the world's leading startups and enterprises"
Type (small): __Inter_f367f3 · 13px/19.5px · 500 — "Support"
Type (button): __Inter_f367f3 · 16px/24px · 400 — "Start for free"
Button: "Start for free" — fill #ffffff, text #101219, radius 12px, border 1px, padding 8px 16px, height 38px, type 14px/600
Radii: 12px (64), 16px (19), 9999px (4), 8px (3), 24px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/featurebase-app/hero.webp?v=af0d5fb9
- Page crop (mid-1): https://media.lvly.design/library/featurebase-app/mid-1.webp?v=96884731
- Page crop (mid-2): https://media.lvly.design/library/featurebase-app/mid-2.webp?v=5b396bdb
- Hero (mobile): https://media.lvly.design/library/featurebase-app/mobile-hero.webp?v=22114f5a
- Full page (desktop): https://media.lvly.design/library/featurebase-app/full.jpg?v=638162a2
- Full page (mobile): https://media.lvly.design/library/featurebase-app/mobile-full.jpg?v=e7e70ad9
- Clip preview (mp4): https://media.lvly.design/library/featurebase-app/video-s6a3aw.preview.mp4?v=05986450

A near-black product-marketing page that spends almost all of its surface on screenshots of the product itself, and keeps the marketing chrome so quiet that the screenshots look like the page. The ground is #050608 with a blue-violet cast, and the whole thing is built from three or four steps of that same hue — #0f0f18 across 84% of the pixels, panels at #2a2b39, hairlines and muted labels at #4d4f5a and #6e6e75 — so depth comes from tonal layering rather than from borders or shadows. Inter does everything: a 48px headline at weight 500 (not 700) with -0.96px tracking, a 23px regular subhead on a generous 34.5px leading, 18px body, 13px labels. The hero is centered, short, and hands the fold over at 70% height to a live-looking inbox mock that runs off the bottom edge; below that the page repeats one module — section title, one line of copy, a ghost button, then a full-width app mock inside a frame lit by a blurred violet rim, then a three-up row of feature notes on hairlines. Customer proof is folded in as single quote rows carrying the customer's real logotype instead of testimonial cards. It works because the restraint is total: one white button is the only saturated element in the marketing layer, so every eye-catching color on the page belongs to the product.

## Steal-worthy details

- Near-black, not black — the page is #050608 and the dominant surface #0f0f18, with panels at #2a2b39 and dividers at #4d4f5a; the 4–6% luminance steps are the only separation, so almost nothing needs a border
- Centered hero that gives the fold to the product — headline, one 23px subhead line, two buttons, then the app mock starts at ~70% of viewport height and is deliberately cropped by the bottom edge so the page reads as already in use
- Announcement pill above the headline — a fully rounded (9999px) hairline chip with 13px text and a chevron, used for recruiting rather than a launch, sitting in the space a kicker would take
- Inverted primary button — solid #ffffff with a #101219 label, 14px/600, 12px radius, 38px tall on 8px/16px padding; the secondary is the exact same shape in a lifted gray, so the pair differs only in value
- Tab bar as a section switcher over the mock — five icon+label tabs at 13px/500 spread edge to edge, the active one marked by a bright hairline along its top edge instead of a filled pill
- Violet rim-light around every product screenshot — the mock sits in a 16px-radius frame whose border is a blurred purple glow rather than a stroke, which makes a flat UI capture read as lit and embedded instead of pasted on
- Three-up feature row under each mock — a thin line icon, a 20px/600 title, 15px muted body, split by vertical hairlines with no card fill, so the notes annotate the screenshot above rather than compete with it
- Testimonials as hairline rows, not cards — the quote sits left at ~17px, the customer's own logotype right in its real brand form, with a small avatar and attribution beneath; no panel, no quote mark, no stars

## Style recipe

Build on a near-black blue-cast ground: page `#050608`, primary surface `#0f0f18`, raised panels `#2a2b39`, hairlines `rgba(255,255,255,.06)` reinforced by `#4d4f5a`, muted text `#8c8c91`, body text `#cecfd7`, headings `#f6f6f6`. Let value do the work — no borders where a 4–6% luminance step can separate two areas, and no drop shadows anywhere in the marketing layer.

Set everything in Inter. Scale: h1 48px/66px, weight 500, letter-spacing -0.96px (-0.02em); h2 (deck) 23px/34.5px regular in muted text; section titles 32–36px/500 at the same negative tracking; body 18px/28px regular; feature titles 20px/600; labels and tabs 13px/500; button text 14px/600. Never go above 600 — the largest type is the lightest-looking on the page.

Color roles: exactly one saturated element in the marketing layer, and it is a value contrast, not a hue. Primary button is solid `#ffffff` with `#101219` text, 12px radius, 38px tall, 8px/16px padding. Secondary is the same geometry filled `#2a2b39` with `#f6f6f6` text. Ghost section buttons are the white pill at 90% opacity. Save every chromatic color — violets, greens, oranges — for inside product screenshots and integration icons, so saturation always means "this is the product."

Radii: 12px is the default for buttons, inputs, chips and small panels; 16px for large frames and screenshot enclosures; 9999px only for announcement pills and avatars; 8px for tiny inline tags. Keep the scale to those four.

Rhythm: one repeating module, stacked 10–14 times. Left-aligned eyebrow label (13px, muted, with a small icon), section title, one or two lines of deck copy, one ghost button, then a full-bleed-within-container product mock, then a three-column row of feature notes split by vertical hairlines. Section padding 120–160px vertical, container ~1200px. Only the hero is centered; everything after it is left-aligned.

Screenshot treatment is the signature move: wrap every product capture in a 16px-radius frame whose border is a heavily blurred violet glow (`box-shadow: 0 0 0 1px rgba(139,110,255,.35), 0 0 60px rgba(120,80,255,.25)` with a matching blurred pseudo-element behind it), and let the first one be cropped by the viewport's bottom edge rather than fully contained. The second signature move: render social proof as hairline-separated rows where the customer's actual logotype sits opposite the quote, never as a card grid.

Motion stays under 200ms — opacity and 8px translate on scroll reveal, background-color and border-color transitions on hover, and a subtle scale on nothing. Logo walls and stat bands are grayscale figures on the base ground with 12px muted labels beneath 28–32px numerals.