Design system
Elements
A small collection of the building blocks found across a thoughtful website, from type and controls to feedback and content.
Type & content
Clear hierarchy, comfortable reading, and useful details.
Display
A clear page heading
A supporting section title
A smaller heading for details
Good content is easy to scan and pleasant to read. This paragraph shows body copy at a comfortable measure, with a text link for related information.
Strong text for emphasis and a quiet caption for context.
Use the answer highlight for the answer, and nowhere else.
“Good design is as little design as possible.” - Dieter Rams
Inline code: const momentous = true;
Space & rhythm
Every space is a multiple of one spacer.
Every space on the site is a multiple of --spacer, written
as calc(var(--spacer) * 2). Change that one value to make
the whole site tighter or roomier.
The parent sets the gap
Add .flow to a container to stack its children, and set
--flow to the number of spacers between them. A component
sets it in its CSS; a one-off group uses <Stack gap={2}>.
Proximity carries hierarchy
Group what belongs together with a small gap, and separate groups with a larger one. In prose, headings get more room above than below.
-
× 0.254px -
× 0.58px -
× 0.7512px -
× 116px -
× 1.524px -
× 232px -
× 348px -
× 464px -
× 696px
Links & buttons
Actions with clear priority and visible interaction states.
- Every button is a pill; an icon-only button is a circle.
- An icon that says what the button is goes on the left: a lock on Unlock, a link on Copy link.
- An icon that says where it goes goes on the right: an arrow on Go and Next.
- One icon at most, and one primary button per area.
- Gold (premium) is only for what’s for subscribers.
Text link: Read the guide
Subscriber features
What subscribers get, shown in gold where it belongs on the page.
Competitor analysis
The businesses AI names in your place, and why.
Results analysis
Without an action, it only shows what’s on offer.
Layout patterns
Reusable arrangements for introductions, answers, and cards.
A small introduction
Make room for what matters.
A short introduction gives a page a clear starting point and brings its main action into focus.
A short note can reinforce the main idea.
01
Reusable card
A flexible surface for a short message or useful detail.
02
Reusable card
Use a consistent card style wherever related content appears.
03
Reusable card
Simple patterns make pages easier to scan and maintain.
Question: A question someone asks
AI answer
An answer that names a few options:
- The highlighted answer - with its reason.
Full-width band
One bold moment per page, edge to edge.
- Sample stat
- 128
- Sample stat
- 98%
- Sample stat
- 4.9
Form elements
Native controls with labels, help text, and distinct states.
Website check
The site being checked, its scan and score, and the fields that shape it.
materialstudios.co
materialstudios.co
Status & content
Feedback, cards, and useful structured information.
Feedback
Chips name what they’re about when there’s no heading to do it. Dashed means locked, or not there yet.
You’re all set
Your changes have been saved successfully.
Something needs attention
Check the highlighted fields and try again.
Content patterns
Featured / 4 min read
Boxed content
A raised surface brings a related piece of information into focus.
- Account status Active
- Member since October 2026
- Plan Personal
| Activity | Date | Status |
|---|---|---|
| Profile updated | Today | Complete |
| Email verified | Yesterday | Complete |
What is this reference page?
A practical set of native web elements styled with the Momentous design tokens.
A question people often ask
A short, plain answer. Questions start closed.
Another common question
Each answer opens on its own, with no script.
Trust & proof
Testimonials, logos, and numbers that back up a claim.
I had no idea what ChatGPT said about us until Momentous showed me. The report made it obvious what to fix first.
Clear, practical, and quick to act on. We finally know where we stand with AI search.
Trusted by teams at
- Acme
- Globex
- Initech
- Umbrella
- Sample stat
- 128
- Sample stat
- 98%
- Sample stat
- 4.9