# Storytelling-Driven > A landing page read like a short book: an opening line, numbered chapters, a founder’s or customer’s story, a journey timeline and a quiet ending with one ask. - Nickname: Brand story in chapters - Also called: Narrative landing, Story-first landing, Founder story page - Category: Landing Page Patterns - Moods: Natural, Friendly, Nostalgic, Calm - Industries: Food & Restaurant, Fitness & Wellness, Creative & Portfolio, Travel & Hospitality, Startup & Tech - Style page: https://uilingo.dev/styles/storytelling-driven/ Storytelling-Driven pages trade the feature grid for a narrative arc. The hero is a single centred opening line on warm paper; each section after it is a chapter marked by a large serif roman numeral between hairlines. A customer or founder quote is set huge in italic serif, steps become a vertical journey with a connecting line, features turn into alternating photo-print scenes, and the numbers arrive at the end as the payoff. The pacing is slow and airy, the palette warm (paper, terracotta, basil, saffron) and the type literary. ## Best for - Family restaurants, food and craft brands with a real origin story - Social enterprises and mission-led startups - Crowdfunding and launch pages that need emotion - Annual impact reports ## Avoid for - Comparison-shopping buyers who want specs and prices fast - Developer tools and B2B software with technical buyers - Products with no genuine story to tell ## Do - Give every section one job in the story and number it (I, II, III…) - Open with one sentence and a lot of space — no product shot - Use real people and places: names, towns, years - One ask: the hero button, the nav button and the last-page CTA all say the same thing ## Don't - Don’t start with a feature grid or pricing table - Don’t use parallax gimmicks for drama — pacing comes from space and type - Don’t set Thai text in faux italics; switch to the upright serif ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Storytelling-Driven" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line A landing page read like a short book: an opening line, numbered chapters, a founder’s or customer’s story, a journey timeline and a quiet ending with one ask. Design keywords: chapter numerals, opening line hero, founder story quote, vertical journey timeline, warm paper texture, literary serif, photo-print scenes, slow emotional pacing. ## Visual language A landing page that reads like a short illustrated book. Warm paper (#F6EFE3) with a faint grain, ink-brown text, a terracotta (#A63D23) voice colour, basil green and saffron as supporting notes. Type is literary — a soft old-style serif for headlines and an equally warm serif for body — and the layout is a single centred column with generous air. The page opens on one sentence, then moves through numbered chapters (I–V) to a quiet, unnumbered last page that repeats the single ask. ## Signature details (must be visible) - Immersive opening-line hero: min-height min(100svh, 760px), centred copy over the page-wide grain plus saffron glow and no other background effect; headline at the display token clamp(2.75rem, 6vw, 5rem), italic eyebrow flanked by 28px hairlines, lead, one terracotta button plus one underlined text link — no product shot — and a 64px terracotta-to-transparent vertical line as a scroll cue at the bottom - The hero and the last-page CTA are unnumbered. Every other section opens with a large italic roman numeral (2.6rem, terracotta) centred between two 1px #DCCBB2 hairlines (CSS counter, upper-roman). Map the generated section names in story order: testimonials = Chapter I (the story), steps = II (the journey), features = III (photo prints), stats = IV (the numbers), showcase = V (the product tour) - Chapter I (the story): the first quote set huge (clamp 1.8–2.8rem, italic serif, max 24ch) with a saffron quote mark, followed by two smaller paper quote cards - Steps become a vertical journey (max-width 640px): 60px paper circles with a 1px terracotta border and arabic numerals 1, 2, 3… in italic Fraunces (never roman — roman belongs to chapters), connected by a 2px dotted terracotta line. Optional year labels use CE in English and Buddhist Era (BE) years in Thai - Chapter III scenes are photo prints in 960px-wide rows, print 44% / copy 56%, alternating sides: 12px #FFFBF4 border with a 52px bottom border, rotated ±1.5deg. The bottom border may hold a 0.85rem italic caption (place · year), upright in Thai; leave it blank rather than invent one. In CSS-only builds fill each print with layered radial-gradients in terracotta, basil and saffron plus a centred 64px #FFFBF4 line icon (bowl, hands, shopfront) so it reads as a scene - Numbers arrive late as the payoff: italic 400-weight serif numerals in terracotta, separated by hairlines - Final CTA is the last page: ink-brown #2B1D14 panel with a soft saffron glow, a 56×39px saffron fleuron (hedera leaf) above the headline drawn as an inline SVG used as a CSS mask on a saffron block — not the ❦ character, which Fraunces lacks — then the headline, one lead line and one row: a paper email field + a saffron #D9902F button with #2B1D14 text repeating the ask - Paper grain: an inline SVG feTurbulence type=fractalNoise baseFrequency=0.8 numOctaves=2 in a 180px tile, tinted ink-brown at opacity 0.10 over the bg, plus a soft saffron glow (rgba(217,144,47,.14)) at the top of the page ## Design tokens — use these exact values Colours (light mode): - background #F6EFE3 - surface #FFFBF4 - surface-2 #EFE4D2 - text #2B1D14 - text-muted #6A5444 - primary #A63D23 (text on it #FFF8EF) - secondary #3F5A2E (text on it #FFF8EF) - accent #D9902F - border #DCCBB2 - success #3F7A3A · warning #9A5B00 · danger #B3261E - chart series #A63D23, #D9902F, #3F5A2E, #7A5C45, #C9A88A Radius: sm 4px, md 8px, lg 12px, xl 18px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(60,35,15,0.07)`, md `0 10px 26px rgba(60,35,15,0.10)`, lg `0 24px 50px rgba(60,35,15,0.16)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.15 density Motion: 400ms cubic-bezier(.25,.1,.25,1) ## Typography (Latin + Thai) - Headings: Fraunces 400/600 with Thai fallback Trirong 400/600 - Body: Lora 400/500/600 with Thai fallback Maitree 400/500/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;1,400;1,600&family=Lora:wght@400;500;600&family=Trirong:wght@400;600&family=Maitree:wght@400;500;600&display=swap - CSS stacks: heading `"Fraunces", "Trirong", system-ui, sans-serif`; body `"Lora", "Maitree", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 6vw, 5rem), heading weight 600, heading tracking -0.015em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Trirong is a classic, slightly calligraphic Thai text serif that matches Fraunces’ soft, old-style warmth; Maitree is a sturdy book serif that reads like Lora in long paragraphs. ## Components - Primary button: terracotta #A63D23, 4px radius, 2px solid #7A2A16 bottom shadow like a pressed stamp; hover deepens to #8F331C. Saffron button (last page): hover #C47F22, text #2B1D14. One ask: the hero button, the nav button and the last-page CTA all say the same thing; the hero's only other action is the underlined text link - Secondary action: no box — text with a 2px saffron underline offset 6px; turns terracotta on hover - Cards: #FFFBF4 paper, 1px #DCCBB2 border, warm soft shadow, 12px radius; icons in round #F4DCCB tiles - Badges and chips: pill shape, italic body type (upright in Thai); solid badge in basil green - Inputs: paper fill, #CDB89B border, focus terracotta border + 3px 15% ring; form fieldset legends numbered I., II. in italic terracotta - Article: italic roman numerals above each h2, a 4.4em terracotta drop cap on the first paragraph (Latin only), centred italic pull quotes (upright in Thai) under the same SVG fleuron - Dashboard: ink-brown icon rail with a round terracotta active item; every card title prefixed with I., II., III. - Tab bar: paper bar, active item terracotta with a 5px dot below the label - Chapter V 'showcase' is a quiet product tour in two columns: copy + 3 ticked bullets on the left, a paper-framed product preview on the right (#FFFBF4, 1px #DCCBB2, 12px radius, soft shadow) with italic text tabs (upright in Thai) over a light chart + KPI mock — no dark browser chrome, no device frame - Mixed-script italic: set italic only on elements whose text is Latin or digits. Any label containing Thai is upright Trirong/Maitree (terracotta #A63D23 or muted #6A5444), and Latin words or years inside a Thai label stay upright too — no per-word italic switching. Roman numerals and pure-digit figures stay italic Fraunces; in Thai a stat with a unit shows the italic number and puts the Thai unit in the upright label - Allowed off-token extras: stamp edge #7A2A16, primary hover #8F331C, icon tile #F4DCCB, input border #CDB89B, saffron hover #C47F22, print paper #FFFBF4 - Fonts: override the generated stacks with heading "Fraunces", "Trirong", Georgia, serif and body "Lora", "Maitree", Georgia, serif — no sans-serif fallback anywhere ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: full-viewport immersive hero with centred copy over the background effect. Navigation: minimal style. Sections in order: hero → testimonials → steps → features → stats → showcase → cta. Feature section as alternating. Minimal nav whose one button repeats the hero ask, then the immersive opening-line hero (unnumbered). Chapters follow in story order: I the customer's story (big quote), II the journey (vertical timeline), III what changed (three alternating photo-print scenes), IV the numbers (payoff), V a quieter product tour (copy + paper-framed preview with italic tabs), then the unnumbered last-page CTA (email field + saffron button) with the same ask. Column widths: text column (section heads, lead, the big Chapter I quote) max 720px; the pair of quote cards 960px; the journey 640px; photo-print rows 960px. No logo wall, no pricing grid in the main flow; keep sections centred and narrow so the page is read top to bottom like prose. Use local names and Thai units in the Thai version. ## Content Use realistic product copy (fictional brand) suited to: Family restaurants, food and craft brands with a real origin story. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Give every section one job in the story and number it (I, II, III…) - Open with one sentence and a lot of space — no product shot - Use real people and places: names, towns, years - One ask: the hero button, the nav button and the last-page CTA all say the same thing ## Don't - Don’t start with a feature grid or pricing table - Don’t use parallax gimmicks for drama — pacing comes from space and type - Don’t set Thai text in faux italics; switch to the upright serif - Opening with a product screenshot, feature grid or pricing table - Parallax layers or scroll-jacking for drama (that is Parallax Storytelling) - Multi-column magazine grids and captions everywhere (that is Editorial/Magazine) - Cold greys, neon or pure white backgrounds - Italic or tracked Thai text ## Stack notes One self-contained HTML file with a