WorldMore / Design System

WorldMore design sheet.

A working reference page for the Home 5 visual system: brand colours, typography, spacing, reusable patterns, and the design rules that keep the site feeling consistent.

Source documents

This page is distilled from the memory bank rather than invented from scratch.

memory-bank/design-system/foundations.md
memory-bank/design-system/patterns.md
memory-bank/productContext.md
memory-bank/front-end.md

Colour foundations

The system is intentionally narrow: Forest carries trust and authority; Lime carries action and energy. Most screens should be built from these plus white and gray neutrals.

Forest
#21370b

Primary brand colour for dark sections, strong text, icon containers, and trust-led surfaces.

Lime
#11c52f

Primary accent for calls to action, active states, highlights, and success/check details.

Lime Hover
#8CD65E

Pressed or hover state for primary lime buttons.

Gray 50
#f9fafb

Light page bands, soft form backgrounds, and quiet surfaces.

Typography

Plus Jakarta Sans is the global voice. The main rhythm is heavy headings, calm body text, and short supporting copy.

Hero H1
text-5xl md:text-7xl font-black leading-[0.95] tracking-tight
Insurance for the bold.

Use once per page, only for the main page proposition.

Section H2
text-4xl md:text-5xl font-black tracking-tight
Cover made simple.

Use to open major page sections.

Card H3
text-xl font-bold
Activity cover

Use inside cards, feature lists, and compact panels.

Body
text-base md:text-lg leading-relaxed
Clear, direct text that explains what the customer needs to know without making the interface feel heavy.

Use for explanatory copy, descriptions, and page support text.

Spacing and layout

Use consistent containers and section rhythm before changing visual treatment. Most inconsistency comes from spacing drift, not colour.

Pattern Class Use
Container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 Default page width and horizontal padding.
Section padding py-24 Standard vertical rhythm for main marketing sections.
Feature grid grid md:grid-cols-2 lg:grid-cols-3 gap-8 Default repeated-card layout.
Card padding p-8 Default internal room for feature cards.
Quote/card padding p-8 md:p-10 Larger interactive surfaces and quote-form containers.

Buttons

Buttons are pill-shaped in the marketing site. Lime is the primary action colour; forest is the inverted or serious action colour.

Light surface

Primary CTA Inverted CTA

Use lime for the next best conversion action; use forest when the surrounding surface is light and a stronger contrast is needed.

Dark surface

Primary CTA Secondary

On dark sections, secondary actions should stay outlined or transparent so the primary path remains obvious.

Card examples

Cards should frame real repeated content or tool surfaces. Large feature cards use softer radius and enough internal spacing for scanning.

Feature card

Icon, title, and one useful explanation. Best for benefits and services.

90+

Stat card

Use strong numerical cards only when the number helps a customer decide.

Accent card

Use lime blocks sparingly. They are powerful because they are not everywhere.

Quote path

Core patterns

These are layout blueprints from the memory bank. They describe rhythm and intent, not a fixed set of components.

Navigation

Sticky, white, slightly translucent, with a clear logo group and one primary action.

  • sticky top-0 z-50
  • h-20
  • bg-white/90 backdrop-blur-md
  • border-b border-gray-100

Hero

Strong opening proposition, dark forest surface, lime highlight, and a direct quote path.

  • pt-20 pb-32
  • text-6xl md:text-8xl
  • supporting copy in white/gray
  • primary and secondary CTA pair

Feature Grid

Three-column benefit cards with icon, title, and short explanatory copy.

  • rounded-[2rem]
  • border-gray-100
  • bg-gray-50 hover:bg-white
  • icon container in forest/lime

Comparison Table

Used when a direct decision or feature comparison is more useful than cards.

  • overflow-x-auto wrapper
  • WorldMore column highlighted
  • clean dividers
  • plain yes/no indicators

Working rules

The useful guardrails are simple: stay close to Home 5, make the quote path obvious, and let each component earn its space.

Do Avoid
Use Forest and Lime as the recognisable brand pair. Introduce new dominant palettes unless there is a clear signed-off reason.
Use one strong H1 and clear section headings. Use heading-sized text inside small cards or compact tool panels.
Keep cards purposeful: features, repeated items, modals, tools. Wrap whole page sections in card shells just to make them look designed.
Make tables readable when comparison is the real task. Turn every structured decision into decorative cards.