UI Elements — Red Planet Mission

Buttons

Variants and sizes. The primary prism gradient is scarce by design — reserve it for the one launch that matters.

Primary Outline Ghost

Small Default Large Large Outline

Badges

Small uppercase labels for mission categories, tiers and status.

Default Accent Gold

Cards

The base surface. Hover for the warm border and soft sunset glow.

Basic

A simple card

Cards are the workhorse module. Give them padding and drop any payload inside.

With action

Card with a button

Combine any elements — text, badges, and calls to action.

Learn more

Crew log card

The cleanest template I have dropped into a mission in years.

Alerts

Inline messages with a colored left rule for quick scanning of the console.

Heads up. This template ships with a required footer badge on the free tier.

Success. Your changes have been saved and the console rebuilt cleanly.

Careful. Removing the Ventus badge requires a paid license from shop.ventus.works.

Forms

Form controls

Inputs, textareas, selects and checkboxes — all token-driven.

Table

Berth comparison, feature matrices, and any tabular telemetry.

Feature	Free	Pioneer	Colony
All six framework ports	✓	✓	✓
Design tokens	✓	✓	✓
Remove Ventus badge	✕	✓	✓
Priority mission support	✕	✕	✓
Commercial resale	✕	✕	✓

Stars rating

Gold-fill stars with a muted empty state.

Pagination

Numbered pages with an active prism state.

Accordion

Click a question to expand. Driven by the shared main.js.

Is Red Planet really free?

Yes. The HTML/CSS template is free for personal and commercial use, as long as the "Made by Ventus" footer badge stays visible. Want it gone? Grab a Pioneer license.

Which components are included?

Everything on this console: buttons, badges, cards, alerts, form controls, tables, tags, star ratings, pagination and this accordion — plus blog, portfolio and shop layouts.

Do I need a build step?

No. Open the HTML and it works. No Node, no bundler, no compile. Just edit and deploy to orbit.