SaaS · Light

Meadow

Real software dashboard that rises from behind green hills under a clear sky, large calm editorial serifs, and a descent through photographic landscapes to a glass footer with the giant name cropped.

Palette

--sky#C0DEF2
top of the hero (sky), band backgrounds
--bg#EDEDE6
neutral greenish background of the content sections
--surface#FFFFFF
product panel, interface cards
--ink#121311
titles, primary buttons
--text-2#5F625C
paragraphs, captions (5.3:1 on --bg)
--accent#3F8F3A
confirmation green, income bars, paid status
--accent-soft#93C47A
secondary chart bars, chips
--negative#E8A0A0
outgoing bars, amounts due
--line#E2E3DD
1px borders of the panel and dividers

Typography

Display: transitional editorial serif, weight 400, normal case, tracking -0.02em, line-height 1.0; hero clamp(44px, 5.4vw, 80px) in 2 short sentences; final word in green italic; giant name in the footer ~30vw — suggestions: Instrument Serif / Newsreader
Body: neutral grotesque 400, 13–15px, gray — suggestions: Inter / Geist
Support/labels: mono 10px in a pill for the "New" badge and feature tags — suggestions: JetBrains Mono / Geist Mono
Treatments: last word of titles in italic in the accent color; client logos as serif wordmarks over the landscape; tabular monetary numbers

Sections

Nav — minimalist checkmark brand on the left, 5 links, white button + black pill button with an arrow on the right.
Hero — photographic sky and mountains; pill badge with mono, centered 2-line serif title, subtitle, 2 buttons; product panel (sidebar + KPIs + chart) emerging from behind the hills; strip of client logos over the grass.
Full dashboard — the panel rises and reveals itself entirely (positive/negative bar chart, lists of upcoming due dates and received payments).
Manifesto — centered 2-line serif title with a green italic.
Features — 3 tall cards with nature photos (grass, linen with a leaf shadow, wheat) and an interface fragment floating on top; serif title at the bottom of each card.
Who it's for — serif title on the left, text on the right, collage of photos of small businesses at different heights.
Testimonial — row of photos with the business name in serif, large centered quote.
Automation — full-width card with an aerial photo of a field and river, white serif title, interface notifications appearing.
Security — neutral background with foliage shadow, centered title and paragraph.
CTA + footer — photo of hills at sunset, 2-line title, email field with a black button; frosted-glass footer over the photo with link columns and a giant serif name cropped at the bottom.

Motion and interaction

Panel behind the hills: scroll scrub → the panel rises (translateY 40% → 0) while the foreground grass layer descends, creating occlusion; CSS/JS parallax without GSAP (requestAnimationFrame + native smooth scrolling or Lenis).
Live data: load/interval → KPIs change by counting and a "received" notification slides into the corner of the panel every ~4s.
Landscape parallax: scroll → sky, mountains and hills in 3 layers with different speeds.
Title reveal: IntersectionObserver → fade + y 16px, 600ms.
Feature cards: hover → interface fragment rises 6px and the photo scales 1.03.
Leaf shadow: continuous → foliage shadow overlay slowly oscillating (CSS keyframes, 8s).
Glass footer: scroll → the footer with backdrop-blur appears over the photo; giant name rises 10%.

Components

Primary button: 36px black pill, 12px white text, arrow.
Secondary button: white pill, dark text, no border.
New badge: dark "New" pill + 10px mono text + chevron.
Panel: 14px radius, 1px --line border, 180px sidebar, KPIs in white cards with a tinted circular icon.
Bar chart: green positive and pink negative bars, 3px radius at the top.
Feature card: portrait with a nature photo, 16px radius, white UI fragment at the top, 22px serif title at the base.
Notification: 280px white card, 10px radius, icon + text + green value.
Email field: translucent white pill with an embedded black button.