fancy.design

A near-black page (#000000) that spends its whole budget on rendered 3D objects — a glass cube on a lilac-to-cyan gradient in the hero, a chrome rocket, a foil packet, a wall of glossy magenta and violet blobs in the footer — and then sets plain white Sherika on top of it with almost no chrome in between. The hero is the thesis: a full-bleed iridescent render with a hard-edged solid black card dropped over its right half, 90px/81px headline inside, and a white award strip welded to the card's bottom edge so the trust logos read as part of the same object. Everything below is black canvas with one bright thing on it at a time — a rotated fan of saturated purple, pink and blue benefit cards, a glow-lit priorities section where the right column cycles words while the left title holds, a quadrant of thumbnail nav cards. Radii are pills and circles (100px, 50%) with 30px/20px on the cards, buttons are 68px tall solid white with black labels, and a hot pink pill floats fixed above the fold line the entire way down. It works because the contrast is structural rather than tonal: every piece of type sits on either pure black or pure white, so the renders can be as loud as they like without ever fighting a word.

Build on pure black #000000 and let rendered 3D objects, not surfaces, supply every color. Type: one geometric sans (Sherika, or Poppins/Outfit as a substitute) for everything. Display 88–92px, weight 500, line-height 0.9, normal tracking, pure #ffffff; secondary display 64–68px at 1.0; body 16px/400 at normal leading in white or white at 60%. Never letterspace, never go above 500 weight — the size does the shouting.

Color roles: ground #000000; ink #ffffff; one violet-to-magenta brand family (#7f39b2 deep, #b399d7 light, plus a hot magenta for the persistent CTA) and one cyan (#17bef2) used only inside imagery, glows and card fills, never on text; a pale lilac #ddc4dd reserved for full-bleed gradient backgrounds behind hero-scale renders. Type is only ever pure white on black or pure black on white — if a color would end up behind words, put the words on a solid panel instead.

Panels over scrims: to place a headline on an image, drop an opaque #000 rectangle with square corners on top of it and set the type inside at 48–64px of padding, then weld a white sub-panel (badges, logos, proof) to its bottom edge sharing the same left and right. Never dim, blur or backdrop-filter the image.

Radii and controls: 100px on every button, 50% on chips and icon buttons, 30px on large cards, 20px on small ones — no square corners anywhere. Primary button = solid #ffffff, black label, 18px/500, 68px tall, 28–32px of horizontal padding. Secondary = identical geometry, ground-black fill, 1px white-at-15% border. A tertiary accent pill in the brand magenta with one word of the label in yellow can float fixed near the bottom center for the whole scroll; it is the only persistent chrome.

Rhythm: one idea per viewport, sections 700–900px tall, generous vertical air, content on a 1440 frame with ~40px gutters. Cards may run past both edges. Deal repeating cards as a rotated fan — 2–6 degrees of alternating tilt, 60–80% overlap, each a different flat saturated fill — rather than an even grid. Borders are rare; separation comes from fill and from black space. Shadows are effectively invisible on black, so use a radial color glow (a blurred 600–900px ellipse of brand violet or red at 20–35% opacity) behind a section instead.

Motion: pin a section title and cycle the value beside it, cross-fading the outgoing word at low opacity so both are briefly readable; fade and rise elements 16–24px on entry; keep a fixed award/badge ribbon on one screen edge. The two moves that make it recognizable are the opaque black panel laid over an untouched render, and the all-pill radius system carrying loud, glossy 3D imagery.