---
id: "aw-el-3c963bf6-740d-4f12-b5a4-67ab9fb0dc5d"
source: https://www.awwwards.com/inspiration/faq-son-daven
author: "The First The Last (thefirstthelast)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Spaced Serif FAQ Header with Birds

## Summary
A section opener for an FAQ page: three large gold serif letters, F, A and Q, are spaced across the full width of a dark umber screen, with tiny extended-sans captions tucked between them. Flocks of bird silhouettes rendered through a vertical scanline texture fly across the corners, and a field of fine vertical stripes fades in and out behind everything. A moody, luxurious way to turn a utilitarian section into a moment.

## Style
- Theme: dark (warm umber with antique gold)
- Mood: moody, luxurious, cinematic, quiet, mysterious
- Tags: faq, spaced-letters, serif-display, scanline-texture, birds, extended-sans, dark-luxury, section-intro
- Category: FAQ, Typography

## Palette
| Role | Hex |
|---|---|
| Umber background | #2A2622 |
| Deep shadow | #292520 |
| Panel umber | #2F2B26 |
| Stripe dark | #39352E |
| Stripe light | #4A4438 |
| Muted gold | #887961 |
| Antique gold type | #B49D79 |

## Typography
- Display letters (F, A, Q): classic old-style serif, regular weight, uppercase, antique gold, about 10% of frame height, placed at roughly 18%, 49% and 78% of the width. Cormorant Garamond Medium or EB Garamond.
- Captions ("Answers to key questions", "Everything you need to know"): extended geometric sans, uppercase, 10px, letter-spacing 0.15em, gold, set in two short lines, with a few word gaps widened for rhythm. Michroma or Unica One for the extended feel.
- Header wordmark: heavy extended sans caps in gold with a scanline texture, centred (placeholder wordmark). Michroma or Syncopate Bold.
- Nav labels ("Menu", "Air tour", language code): 10px extended sans caps, gold.

## Layout
- 4:3 frame (1600x1200), full-bleed dark section.
- Top bar 72px tall: hamburger (two thin lines, 28px wide) plus "Menu" and a second link on the left, centred wordmark, language code and an outlined-filled gold pill button ("Consultation", about 140x28px, 14px radius, dark text) on the right; 24px side padding.
- Main row vertically centred: letters and captions on one baseline, captions sitting between letters and slightly lower or higher to create a zigzag.
- Generous empty space above and below (about 40% of the height each).
- No borders or shadows; texture provides depth.

## Elements
- Vertical stripe field: 1px gold lines every 6 to 8px at 10 to 30% opacity, masked into soft irregular bands that cover the right and bottom areas.
- Bird flock top-right: four small birds (20 to 40px) in flight, gold, drawn through horizontal scanline slices so they look glitchy.
- Bird flock bottom-left: about eight birds, some blurred into vertical ticks, partially fading.
- Gold pill CTA in the header.
- Hamburger icon made of two 1px lines.

## Motion
Static image. A subtle idea: let the birds glide diagonally across the screen over 12 to 18s with a soft flap loop, and have the stripe bands drift horizontally at 10px per second so the texture breathes.

## Rebuild it
1. React section `relative h-screen bg-[#2A2622] text-[#B49D79] overflow-hidden` with a fixed header `h-[72px] px-6 flex items-center justify-between`.
2. Fonts: Cormorant Garamond for the letters (`text-[10vw] leading-none`), Michroma for captions (`text-[10px] uppercase tracking-[0.15em]`).
3. Main row: `absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-between px-[16vw] items-end`, with captions as small blocks between letters using `self-center` or `translate-y` offsets.
4. Stripe texture: a full-size div with `background: repeating-linear-gradient(90deg, rgba(180,157,121,0.18) 0 1px, transparent 1px 7px)` and a `mask-image` built from a few blurred radial gradients.
5. Birds: SVG silhouettes with an SVG `pattern` of horizontal 1px gaps as a mask for the scanline look; animate with Motion along a path (`offsetDistance` 0% to 100%, 15s linear, repeat).
6. Header pill: `rounded-full bg-[#B49D79] text-[#2A2622] h-7 px-4 text-[10px] uppercase tracking-[0.15em]`.

## Generation prompt
A dark warm-umber luxury website section introducing an FAQ: three large antique-gold serif capitals F, A and Q spread far apart across the screen with tiny extended uppercase captions between them, flocks of small gold bird silhouettes rendered with glitchy horizontal scanlines in the corners, a subtle field of fine vertical gold stripes fading in soft bands, minimal header with a centred wordmark and a gold pill button; moody and cinematic.