PresetHaus
← All presets

SaaS · Dark

Sunset

B2B SaaS treated as a landscape: the real product dashboard, built in HTML, is born from behind a copper-toned forest at sunset and rises between the trees on scroll, with titles in a light serif and everything else in near-black graphite.

Palette

  • --bg#070707

    main graphite-black background

  • --ceu-topo#121721

    top of the hero sky

  • --ceu-horizonte#3A2E36

    twilight band near the trees

  • --cobre#B86B4F

    tree canopies, warm glints

  • --acento#F07A2A

    orange of the flow nodes, connection lines, "most popular" badge

  • --superficie#141414

    cards and blocks over the black

  • --branco#FAFAF8

    light buttons, product panel, titles

  • --texto-2#8B8A88

    paragraphs and captions (≥ 4.9:1 on the dark backgrounds)

  • --texto-claro-2#5F5E5B

    secondary text on the light plane (5.8:1)

  • --acento-texto#B24E12

    orange for text on a light background (4.7:1)

Typography

  • Display: light transitional/didone serif (light 300), mixed case, tracking -0.02em, titles on 2 centered lines — clamp(2.2rem, 4vw, 3.6rem) — suggestions: Instrument Serif / Newsreader 300
  • Body: neo grotesque 400, 13–15px, line-height 1.5 — suggestions: Inter / Geist
  • Support/labels: pill chip with the logo icon + section label at 10px; price/statistic numbers in large serif
  • Treatments: second title line in gray; numbers with a small suffix (%, min); giant footer wordmark in white black-weight grotesque emerging from behind the trees.

Sections

  1. Nav — logo + name on the left, 5 central links at 10px, white "sign in" button + dark "start free" button on the right; gets a blurred background after the hero.
  2. Hero — announcement chip, 2-line centered serif title, 2-line paragraph, white button + rating note with a star; product window (dark sidebar + light flow canvas) partially hidden behind the canopy line, with a twilight sky behind.
  3. Panel rises — with the scroll the window rises between the trees until it is fully visible; flow animates (nodes connect, properties side panel); strip of client logos in gray.
  4. Why — chip, 2-line title, large card with a collaborative mini-flow (avatars, comment bubble) on the left and text + button on the right.
  5. Use cases — block with previews and a collaborative cursor.
  6. How it works — 3 cards in steps (different heights) with a light UI illustration at the top, number, title and text.
  7. Integrations — chip, title, subtitle; card with a central hub (logo) and app icons linked by thin lines, with copper trees in the bottom corner.
  8. Pricing — chip, 2-line title (2nd in gray), monthly/annual toggle with a discount; 3 cards (the central one light and elevated with an orange badge).
  9. Testimonial — card with a forest photo in the background: large serif quote on the left, author, 3 large statistics on the right.
  10. Final CTA — row of avatars, 2-line title, text, 2 buttons; trees at the top.
  11. Footer — logo + phrase, 3 columns of links, legal line, giant white wordmark with trees covering the base and a white circle (moon/sun).

Motion and interaction

  • Panel born from the forest: scroll scrub → product window rises (y 45%→0) passing behind the layer of trees in the foreground; sky and trees in parallax of 3–4 photo layers (background, mountains, distant canopies, near canopies).
  • Running flow: on enter/loop → flow nodes light up in sequence, orange lines "pulse" (stroke-dashoffset), side panel fills in fields, a fake cursor clicks "publish".
  • Logos: slow marquee or fade with stagger.
  • Stepped cards: on enter → rise with stagger.
  • Integrations hub: lines draw from the center outward, icons float slightly.
  • Price toggle: value swaps with a count and vertical slide.
  • Footer: wordmark rises from behind the trees.
  • Lenis across the whole page.

Components

  • Section chip: 20px pill, #1C1C1C background, 1px line border, 12px icon + 10px text.
  • Primary button: 32px pill, white background, 11px black text (+ optional "→"); secondary dark pill with a border.
  • Product window: 10px radius, 1px rgba(255,255,255,.12) border, #0E0E0E 160px sidebar, light #F7F7F5 area with a dot grid, white nodes with a colored icon and border; selected node with an orange border.
  • Step card: 14px radius, --superficie background, light UI illustration in the top 50%, 9px number, 15px title, 11px text.
  • Plan card: 14px radius; dark by default; light highlight (#F2F2F0) with dark text and an orange badge; 40px serif price; list with checks.
  • Statistic: 32px serif + 10px gray caption.
  • Testimonial card: 16px radius, forest photo darkened 60%, 24px serif quote.