Langkau ke kandungan utama

Hero prompt

With a plan

Quiet Grain Hero

A calm, confident hero on a sheet of grainy paper: one huge tight-tracked headline with a hand-drawn accent loop, a topographic contour map of a mountain lake as the only graphic, one button and one quiet link. Warm off-white, near-black and one restrained accent.

  • Minimal
  • Cl
  • Cu
  • v0
  • Lo
  • Bo
  • GP
Quiet Grain Hero section, light theme

A picture of the design. The live, interactive preview, the full prompt and the code unlock with a Dapols plan. See the plans.

Want this on your own site? Pick it for your plan.

The prompt, code and settings

Everything on this page except these four tabs is free to read. The tabs unlock with a paid Dapols plan.

Quiet Grain Hero is included with every Dapols plan

Free visitors get the free prompts. Any Dapols plan, the one-time setup or the monthly subscription, unlocks every prompt.

Unlocking this prompt gives you:

  • The full prompt, ready to paste
  • Short notes for each AI tool it supports
  • The design as React with Tailwind, and as plain HTML and CSS
  • Every color, font and spacing value in a table
  • Step-by-step tips for using it in each tool

Already have a paid plan?

Not on a plan yet?

The preview, description and FAQ on this page are free. A plan unlocks this prompt and every other one in the library.

See the plans

Want to try one now? Browse the free prompts.

About this design

Quiet Grain is a hero for products that want to feel calm, considered and expensive without shouting. A sheet of warm paper rests on a slightly darker desk, lit by two faint accent glows and covered in a fine film grain made from an inline SVG filter, so there is no image to download. One enormous, tightly tracked headline owns the page, with a single hand-drawn loop around the key word. To the right, a topographic contour map, a small mountain lake drawn in sixteen hairline rings with a single accent dot at its center, breathes almost imperceptibly and fades out before it can disturb the type. Below sit one pill button, one underlined link and a row of dashed logo placeholders. The accent colour appears only in a handful of small places: the logo dot, the loop, the final full stop, the lake, the index contours and the hover state. The dark theme turns the sheet into warm charcoal and the accent into soft orange. It suits planners, writing tools, studios, consultancies and any product whose pitch is simplicity. No images, no libraries, no scripts.

Pairs well with the Meridian and Craft Looks in the Dapols website studio. See website examples.

Questions about this design

How is the film grain made without an image?

It is a tiny SVG that asks the browser to generate noise with feTurbulence, embedded as a data URI and laid over the paper at very low opacity. There is no file to download and no extra request.

How is the contour map drawn?

It is sixteen closed paths in one inline SVG, each a slightly irregular ring around the same center, with every fifth ring in the accent. Two mask gradients fade it toward the text and the bottom so it never competes with the headline.

Can I use a different accent color?

You can, as long as it stays a single accent and keeps at least 4.5:1 contrast against the paper for any text. Change the uses together: dot, loop, full stop, lake, index contours, hover fill and focus ring.

  • HeroFree

    Aurora Glass Hero

    A night-sky hero lit by real aurora curtains of mint, lime and cyan rays, with the headline held in a frosted-glass card with a specular rim, fine grain and floating glass tiles. Includes a pale-fog light theme with the same hues.

    • Dark
    • Glass
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View and copy
  • Editorial Serif Hero preview

    HeroWith a plan

    Editorial Serif Hero

    A magazine-style hero on grainy paper: an oversized serif headline with an italic spot-colour word, a flat-shadow button, a framed riso-print plate collage built only from CSS shapes, halftone dots and two tiny pictograms, and a numbered issue strip. Ink on paper with one spot colour.

    • Editorial
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View
  • Isoline Contour Hero preview

    HeroWith a plan

    Isoline Contour Hero

    A bold editorial hero built around a luminous self-drawing SVG contour map: dozens of flowing lines trace themselves in over a soft sun glow, glowing routes ignite, nodes pulse, and hovering lights the nearest line.

    • Bold
    • Editorial
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    View

Use this in your own site

Need a whole site, not one section? Pick the designs you like, choose your colors and fonts, and Dapols builds the website for you as part of your plan. Answer a few questions about your business to get started.