SaaS · Dark

Brushed

A monochrome graphite SaaS where the brand itself is a 3D block of brushed metal that rotates with the scroll and crosses the boundary between sections.

Palette

--bg#1a191c
main background
--bg-2#222124
cards, UI panels
--bg-3#2c2b2f
card hover, input fields
--claro#e9e9eb
final CTA panel, solid buttons
--texto#f2f2f3
headlines, second half of headlines
--texto-2#8d8c92
first half of headlines, paragraphs
--texto-3#55545a
metadata, ghost text
--acento#ffffff
solid pill button and highlights (accent = pure white)

Typography

Display: geometric grotesque, weight 600, mixed case, tracking -0.035em, line-height 1.0; two-tone headlines (one part in --texto-2 + one part in --texto); hero clamp(2.4rem,5vw,4.4rem) — suggestions: General Sans (Fontshare) / Manrope.
Body: same family at 400, 12–14px, --texto-2; keywords underlined or in --texto.
Support/labels: mono 9–10px uppercase for card categories and code snippets — suggestions: Geist Mono / JetBrains Mono.
Treatments: large metric numbers with a small superscript unit (%, ×); blurred ghost text that comes into focus; mirrored reflection of the hero headline at the end.

Sections

Nav — logo on the left; centered glass pill with 3 links; white pill button with a circular icon on the right.
Hero — centered two-line, two-tone headline; 2 pills (solid + glass); 3D brushed-metal object (tile grid forming an "M") cropped by the bottom edge; "scroll" cue with a vertical line on the left; short paragraph on the right.
Prompt wall — the object rotates and passes over it; grid/marquee of mixed cards: prompts with a mono snippet, user posts, mini-UI (price toggle, kanban), "copy" button.
Product — title on the left; darkened UI crop (folder sidebar, list, version history).
Metrics — long two-tone headline; 2×2 grid of glass cards with icon, large number and caption.
Process — 4 steps as interlocking arrow (chevron) cards; title.
Manifesto — headline that goes from blurred to sharp over a tile mosaic background.
Final CTA — light panel with a gray gradient, dark title, 2 buttons; reflection of the hero headline.
Footer — brand + 4 link columns + square social icons.

Motion and interaction

Rotating metal: scroll scrub → object rotates rotY 0→1.4 rad, rotX 0.5→-0.3, scales and drops down, overlapping the next section (fixed canvas, z above the DOM in that range); R3F + HDR environment.
Wall: scroll → rows of cards moving in opposite directions (scroll-linked marquee).
Blur-in: entrance → headlines go from blur 12px/opacity .2 to sharp.
Count-up: entrance → metrics count up from 0.
Cursor: object tilts ±0.15 rad with damping; cards have a radial glow following the mouse.
Tech: React Three Fiber + drei, Lenis, framer-motion or GSAP.

Components

Solid white pill: 11px dark text + 18px black circle with an arrow.
Glass pill: background rgba(255,255,255,.06), backdrop-blur 12px, --linha border.
Prompt card: --bg-2, 14px radius, --linha border, mono category, 14px title, 9px mono snippet, tags and copy button.
Post card: 18px avatar, @username, 11px text.
Metric card: glass, icon in a 28px square, 40px number + 14px unit, caption.
Chevron step: card with an arrow-shaped clip-path, icon, title, text.
Light CTA panel: gradient #f0f0f2 → #bdbdc2, 16px radius.