06. Patterns.

Chapter 06·Proven compositions
Six compositions we reach for again and again. Hero, thesis, section opener, product list, contact form, empty state. If a page needs one of these, use the exact recipe — don't reinvent.

Hero opener

Home · landing

The mark sits centered above an italic-sans-italic sandwich. One shimmering verb. Two CTAs — primary on the left. The atmosphere gradient is radial, centered slightly above the type. Never add a screenshot, illustration, or product shot to this pattern; the mark is the image.

luminocity.ai

We are creating a future where
AI makes people genuinely better
at all things.

Sharp AI tools built to make people measurably better at what they do — not by taking their place, but by taking a place by their side.

Thesis / manifesto

Home · about

One sentence. Three lines. Mixed faces — italic Fraunces above a bold Inter anchor, gold on the verb that carries the point. Never more than 14 words. If you can't fit it in 14, it isn't a thesis yet.

Our thesis

Sharp tools,
not platforms.
Density beats breadth.

Every Luminocity product exists to solve one problem exceptionally well. We don't chase surface area.

Section header + product list

Products

Mono kicker, then an italic/sans compound headline. Product cards beneath on an auto-fit grid — live, beta, and coming-soon states all share the same card shell, distinguished only by the pill. The first card always has a live product.

Products · in the wild

Sharp tools, one at a time.

Live · Free Beta

Certification Studio

Pass your cert in 7 days.

Adaptive exam prep that figures out what you don't know and drills it until you do.

Try it free →
Coming 2026

Product Two

In the lab.

We're working on the next tool. Same thesis: one sharp problem, one sharp answer.

Notify me →
Coming 2026

Product Three

In the lab.

Another sharp tool. Built for a specific pain, not for a category.

Notify me →

Contact / capture form

Contact · waitlist

Two columns. Pitch on the left — italic headline, short paragraph, tiny hint under the form. Form on the right, always on the surface card, always with a single gold primary. Never ask for more than four fields. The system form field styles from Components are the only fields you should use.

Contact

Got a problem
AI might solve?

Tell us what's frustrating you. If it's a shape we know, we'll say so. If it's new, we might build it.

We reply to every message, usually within 48 hours.

Empty state

Product shells

A faded mark. An italic headline framed as a question. A one-line answer in body. A single primary CTA. Empty states are an opportunity to set voice — this is where the brand is most alone with the user. Don't waste it on "No results found."

Nothing here yet.

You haven't started a study session. Pick a certification and we'll figure out what you already know.

Start first session →