ModerneDesign System7.6.0ThemeFeedback

Brand · Websitemoderne.io conventions

How the public site is composed. It runs on the same spine as the rest of the system — Geist, Ink #232342 headlines, Deep Green #1D5937 for action — and shares the marketing palette and voice, not the app's status colors and data grid. The anatomy of a marketing asset lives on Marketing.

Buttons — one primary, one secondary

Real calls to action are a solid Deep Green button; everything else is the outline secondary. One primary per view.

Buy now

.btn-primary · solid #1D5937 on white text · 8px

How to configure

.get · outline · secondary + utility

Hero pattern

An Ink headline with a Deep Green accent phrase, a short lede, and one primary CTA. Headlines set in Geist, ~72px / 600; the accent phrase is the only colored run.

Backpatch Alliance is the fellowship of the fix.

AI-accelerated vulnerability discovery drives the need for backpatches to close security gaps fast. Join the community to fight back.

Buy now

Section bands

Pages alternate warm neutral grounds — Stone, cream, and white — to separate sections without rules. All map to existing surface tokens.

Stone #F2F0EA--mod-cream-200Hero and feature bands
Cream #EDEBE2--mod-color-surface-sunkenAlternating bands (site uses ~#EFEDE5)
White #FFFFFF--mod-color-surface-pageContent / diagram bands

Nav & announcement bar

A thin announcement strip over the main nav: wordmark left, sections and a green primary CTA right.

AI Software Factory Summit · Feb 22–24, 2027 · Early bird pricing →
SolutionsProductResourcesPartnersPricing

Metrics

Outcomes lead with a big Deep Green number and a muted caption. Two to four per row.

500+Services moved from Java 8 to Java 25
80%Of the migration automated
200Remediation PRs produced in an hour
7,000+Properties run on the estate

Pull quote

A short Deep Green rule, the quote in display size, then attribution.

"Moderne helps keep our codebases cleaner, safer, and easier to evolve. It is a major unlock for teams that want to spend more time shipping and less time maintaining."
Jason Simpson, VP of Engineering, Choice Hotels

Arrow findings

Supporting points as a →-led list with hairline rows, not bullets.

  • Teams that paired Moderne with coding agents finished the migration fastest.
  • Roughly 80 percent of the migration was automated.
  • Recipe changes match each team's formatting, so developers merge with confidence.

Case-study cards

Case studies index as a mixed grid: full gradient-field cards for featured stories, and white chromatic-frame cards (gradient border) leading with a metric. Both close with a green Read the story → link.

Technology520DevelopersRead the story →A leading global bank50,000ReposGlobal bank saved 30 developer-years of Java upgrade workRead the story →

Page templates

The section stacks the site reuses. Build from these rather than arranging a page from scratch.

Campaign / product page

e.g. Backpatch Alliance

  1. Announcement bar + nav
  2. Hero — accent-phrase headline, lede, primary CTA, mark
  3. "How it's different" — headline + body on a cream band
  4. Comparison diagrams — without / with
  5. Proof CTA band — primary + secondary buttons
  6. Footer

Case study

e.g. Choice Hotels

  1. Breadcrumb — Case studies / Name
  2. Result headline (Ink, no accent) + summary
  3. Industry · primary-stack meta row
  4. Metric grid — big Deep Green numbers
  5. Featured gradient media card
  6. Narrative + arrow findings
  7. Pull quote + glossary side-note
  8. Closing quote + CTA

Case study index

e.g. /case-study

  1. Hero — headline + lede
  2. Mixed card grid (masonry)
  3. Featured: gradient-field cards, reversed logo
  4. Standard: chromatic-frame metric cards
  5. Each: industry · metric · Read the story →

These values come from the live site; two round to the nearest token — the cream band (#EFEDE5 → surface-sunken) and on-green text (#FBFAF6 → action-on-accent #fff). Flagged rather than re-tokenized.