05. Components.

Chapter 05·Working parts
Buttons, fields, badges, alerts, cards, nav, modals, toasts. Each exists to do one job. No icon-packed dashboards, no overwrought states. If you need a variant that isn't here, ask whether the system is asking for it — or you are.

Buttons.

Primary carries the single action that matters. Secondary is for escape routes. Ghost is for "also available." Danger is never red-filled — we don't punish the click, we warn on it.

Variants

.lm-btn · sizes sm/md/lg

Sizes

sm · 32 · md · 44 · lg · 52

Form fields.

All fields sit on the sunken surface and rise to focus with a gold ring. Labels are always present — no placeholder-as-label patterns. Validation states are color + hint, never icon-only.

States

text · textarea · select
Your full name.
Email looks incomplete.
Looks good.

Badges & pills.

Status pills are always Mono-uppercase-tiny. Never more than one per product card. The live pulse is reserved for genuinely live things — don't decorate with it.

Status pills

.lm-badge
Live Beta New Limited Coming 2026

Alerts.

Four tones, flat backgrounds, hairline borders. Text leads; no illustrated icons. Match the voice rules — say what happened, then what to do about it.

Tones

.lm-alert
Thanks, Richard. We got your message and will reply to richard@luminocity.ai soon.
!
We could not deliver your message. Please try again, or email support@luminocity.ai directly.
Heads up. This feature is in beta and subject to change without notice.
·
New chapter added. Foundations, Type, and Logo are now complete.

Section labels.

The smallest typographic object in the system. Always Mono, always uppercase, always preceded by a 24px gold hairline. They orient — they don't decorate.

Our thesis Products Chapter 04 · Motion

Navigation.

Always left-mark, right-links, sticky, backdrop-blurred, hairline bottom. Active link is gold or text-primary on raised surface. Dropdowns appear on hover — no click-to-open except on touch.

Top nav

guide-nav pattern

Cards.

A card is a container for one clear thing. It earns its border by containing something with a status, a name, a description, and an action. Otherwise it's just a panel.

Product card

.lm-card + badge + action
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.

Coming 2026

Product Two

In the lab.

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

Testimonial

"It felt like the tool was listening to how I was failing — and adjusting."

RM
Dr. R. Martinez
GCP GenAI Leader, cert'd in 6 days

Modals.

Reserved for decisions, never for information. Background goes dark with a faint gold atmosphere. One primary action, one escape. Close is always top-right, 44×44 hit target.

Toasts.

A toast is a receipt — it confirms, then leaves. Never for errors that require action; use an inline alert for those. Left border carries the tone.

Settings saved
Your preferences will apply on next reload.
Study streak: 6 days
One more day to match your personal best.
!
Couldn't sync
We'll try again automatically.

Footer.

Quiet, functional, lightly typed. A thin line at the top, copyright on the left, links in the middle, signature on the right. Built with conviction, not consensus — verbatim.

© 2026 Luminocity AI Built with conviction, not consensus.