Storytelling-Driven

Also called: Narrative landing, Story-first landing, Founder story page

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.

“Brand story in chapters”Landing Page PatternsEra: 2010s → todayNaturalFriendlyNostalgicCalm

Open full screen ↗

storytelling-driven / landingEN

storytelling-driven / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm4pxRadius md8pxRadius lg12pxRadius xl18pxDensity×1.15Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

This recipe redefines surface-2, text, text-muted in its own rules, so edits to those colours may show only in part.

Design keywords

Say these words to ask for this style.

chapter numeralsopening line herofounder story quotevertical journey timelinewarm paper textureliterary serifphoto-print scenesslow emotional pacing

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

Not to be confused with

Parallax Storytelling →Parallax Storytelling tells the story with layered scenes moving at different scroll speeds; Storytelling-Driven is static and paced by chapters, space and type.Editorial Grid / Magazine →Editorial/Magazine uses multi-column grids, captions and many stories at once; Storytelling-Driven is one linear narrative in a single centred column.Hero-Centric Design →Hero-Centric puts everything into one giant visual hero; here the hero is a quiet opening line and the weight is spread across chapters.

On mobile

One chapter per screen: a small roman numeral, a serif headline and a single image or quote. Onboarding reads like the first page of a book. Keep the paper texture only on the background, and use the upright Thai serif with 1.8+ line-height.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinFraunces · 400/600

The quick brown fox

Heading · ThaiTrirong · 400/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinLora · 400/500/600

Clear words make shared decisions.

Body · ThaiMaitree · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Design tokens

Radius	`sm 4px · md 8px · lg 12px · xl 18px · pill 999px`
Border	`1px`
Shadow	`0 10px 26px rgba(60,35,15,0.10)`
Display	`clamp(2.75rem, 6vw, 5rem)`
Motion	`400ms cubic-bezier(.25,.1,.25,1)`
Density	`×1.15`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Storytelling-Driven (storytelling-driven) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a light mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 12px;
  --background: #F6EFE3;
  --foreground: #2B1D14;
  --card: #FFFBF4;
  --card-foreground: #2B1D14;
  --popover: #FFFBF4;
  --popover-foreground: #2B1D14;
  --primary: #A63D23;
  --primary-foreground: #FFF8EF;
  --secondary: #3F5A2E;
  --secondary-foreground: #FFF8EF;
  --muted: #EFE4D2;
  --muted-foreground: #6A5444;
  --accent: #EFE4D2;
  --accent-foreground: #2B1D14;
  --destructive: #B3261E;
  --border: #DCCBB2;
  --input: #DCCBB2;
  --ring: #A63D23;
  --chart-1: #A63D23;
  --chart-2: #D9902F;
  --chart-3: #3F5A2E;
  --chart-4: #7A5C45;
  --chart-5: #C9A88A;
  --sidebar: #FFFBF4;
  --sidebar-foreground: #2B1D14;
  --sidebar-primary: #A63D23;
  --sidebar-primary-foreground: #FFF8EF;
  --sidebar-accent: #EFE4D2;
  --sidebar-accent-foreground: #2B1D14;
  --sidebar-border: #DCCBB2;
  --sidebar-ring: #A63D23;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Storytelling-Driven (storytelling-driven) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a light mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #F6EFE3;
  --color-surface: #FFFBF4;
  --color-surface-2: #EFE4D2;
  --color-text: #2B1D14;
  --color-text-muted: #6A5444;
  --color-primary: #A63D23;
  --color-on-primary: #FFF8EF;
  --color-secondary: #3F5A2E;
  --color-on-secondary: #FFF8EF;
  --color-accent: #D9902F;
  --color-border: #DCCBB2;
  --color-success: #3F7A3A;
  --color-warning: #9A5B00;
  --color-danger: #B3261E;
  --color-chart-1: #A63D23;
  --color-chart-2: #D9902F;
  --color-chart-3: #3F5A2E;
  --color-chart-4: #7A5C45;
  --color-chart-5: #C9A88A;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(60,35,15,0.07);
  --shadow-md: 0 10px 26px rgba(60,35,15,0.10);
  --shadow-lg: 0 24px 50px rgba(60,35,15,0.16);
  --font-heading: "Fraunces", "Trirong", system-ui, sans-serif;
  --font-body: "Lora", "Maitree", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Maitree", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Storytelling-Driven (storytelling-driven). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9373,
            0.8902
          ],
          "hex": "#f6efe3"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9843,
            0.9569
          ],
          "hex": "#fffbf4"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.8941,
            0.8235
          ],
          "hex": "#efe4d2"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1137,
            0.0784
          ],
          "hex": "#2b1d14"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4157,
            0.3294,
            0.2667
          ],
          "hex": "#6a5444"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.651,
            0.2392,
            0.1373
          ],
          "hex": "#a63d23"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9725,
            0.9373
          ],
          "hex": "#fff8ef"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.3529,
            0.1804
          ],
          "hex": "#3f5a2e"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9725,
            0.9373
          ],
          "hex": "#fff8ef"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.5647,
            0.1843
          ],
          "hex": "#d9902f"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8627,
            0.7961,
            0.698
          ],
          "hex": "#dccbb2"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.4784,
            0.2275
          ],
          "hex": "#3f7a3a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3569,
            0
          ],
          "hex": "#9a5b00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.702,
            0.149,
            0.1176
          ],
          "hex": "#b3261e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.651,
            0.2392,
            0.1373
          ],
          "hex": "#a63d23"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.5647,
            0.1843
          ],
          "hex": "#d9902f"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.3529,
            0.1804
          ],
          "hex": "#3f5a2e"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.3608,
            0.2706
          ],
          "hex": "#7a5c45"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.6588,
            0.5412
          ],
          "hex": "#c9a88a"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              0.1373,
              0.0588
            ],
            "hex": "#3c230f",
            "alpha": 0.07
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              0.1373,
              0.0588
            ],
            "hex": "#3c230f",
            "alpha": 0.1
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 26,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              0.1373,
              0.0588
            ],
            "hex": "#3c230f",
            "alpha": 0.16
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 24,
            "unit": "px"
          },
          "blur": {
            "value": 50,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Fraunces",
        "Trirong",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Lora",
        "Maitree",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Maitree",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 400,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.25,
      0.1,
      0.25,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.15
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!