SaaS · Dark

Pointcloud

A portrait made of thousands of tiny cubes of light in absolute darkness: the bust turns toward the cursor, the points get combed by the mouse, the camera dives into the eye, and the brand speaks in a pixel font with a single warning orange.

Palette

--bg#080808
background of almost the entire page
--surface#141414
nav bar, interface panels
--paper#EBE7E2
light "stage" section and footer with wordmark
--accent#DA4D15
primary button, action buttons in the panels, orange glow under the bust
--points#B9C3D0
color of the bust's points (blue-gray)
--text#EDEDED
titles on dark
--text-2#858585
second line of titles, descriptions (5:1 on --surface)
--line#262626
borders of panels, toggles, chips

Typography

Display: monospaced bitmap/pixel face, 400, UPPERCASE, tracking 4%, enormous (clamp(96px, 14vw, 220px)), letters with pixel corners — suggestions: Silkscreen / Pixelify Sans (or "Departure Mono")
Body: neutral grotesque 400–500, 15–18px in feature titles (line 1 white, line 2 gray), 11–12px for body — suggestions: Inter / Geist
Support/labels: mono 9–10px for timecode, chips and status — suggestions: Geist Mono / JetBrains Mono
Treatments: pixel word split into two halves with the bust in the gap; 2-line titles with the second in gray; giant black pixel wordmark on paper at the end.

Sections

Nav — compact dark centered bar: icon, mono timecode, status dot with chip, links, "Sign in" and orange button.
Hero — giant pixel word at the top, cut in half by the centered point-cloud bust; orange glow at the base of the bust; at the bottom left a chip + 2-line title.
Stage — the entire scene shrinks into a dark rounded-corner card on light paper and grows back.
Dive — the camera approaches the face; the bust turns in profile, points disperse into a cloud; on the right a feature panel appears (2-line title, text, chips, settings panel with toggles).
Features — alternation: close-up face on one side, interface panel on the other (to-do list with orange buttons; bar chart with the last bar orange).
CTA — two pixel words with the bust between them; the points get "messed up" on hover.
Footer — paper strip with a giant black pixel wordmark and small links.

Motion and interaction

Bust that looks: cursor → bust Y/X rotation follows the pointer (±25°/±10°) with damping.
Combing with the mouse: cursor over the bust → nearby points are pushed in the direction of movement and spring back (radius ~0.25 of the head), forming "strands".
Stage: scroll scrub → canvas shrinks to a 60% card with 16px radius on paper, then returns.
Camera to the eye: scroll scrub with pin → camera dolly z 4→0.6 and target on the eye; points scatter with noise at the edges.
Panels: enter with fade+blur; toggles switch on in sequence; bars grow.
Timecode: the nav's mono counter runs continuously (session clock).

Components

Nav bar: #141414 background, 6px radius, 26px height, 10px items, 22px orange button.
Chip: #1E1E1E background, 1px --line border, 9px mono text, colored dot.
Feature title: 2 lines 18px, line 2 in --text-2.
Settings panel: --surface card, 10px radius, rows with a pill toggle.
To-do row: 11px title + gray subtitle + small orange button on the right.
Bar chart: gray #2C2C2C bars, highlight in the accent color.
Primary button: orange rectangle 4px radius, white 11px text.