Melo V2 · draft documentation

All components

A measured component library for the Melo V2 rebuild. Wonderful supplies the geometry; Melo supplies Mulish, coral and gold, and the content.

##INLINE15##

Foundations

Colors

Photography carries most page color. Coral is reserved for primary actions; gold remains a secondary accent.

Ink primary

#171719

Canvas

#FAFAFA

Coral

#F8713D

Gold

#FFB706

Foundations

Typography

Measured Wonderful size, line height, weight and tracking are reproduced with Mulish.

Display / editorialThe new generation.62 / 71 · 300 · -0.05em
Section displaySolving problems that move us.48 / 50 · 300 · -0.04em
BodyClear copy with a comfortable reading measure.17 / 24 · 400

Foundations

Spacing & radius

Measured component values remain exact instead of rounding into a generic scale.

4818243660120
4px related
8px media
10px story
Pill controls

Actions

Button

One anatomy with purposeful variants. Buttons perform actions; links navigate.

Continue

Primary

Coral surface, ink label, pill radius.

Base class
v2-button
Height
36px compact · 44–50px standard
Motion
180ms ease-out

Forms

Login & form field

The written login specification is authoritative: 420px card, Continue action, and errors below the relevant field.

Enter a valid email address.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form field · invalid

The error is immediately after its control.

Card width
420px exact
Mobile
350px at 390 viewport
Error
Below its control

Content

Story, feature & CTA

Live examples use Melo-owned content and imagery while preserving measured Wonderful geometry.

Melo Summit stage

Melo story

Young people and CEOs co-create meaningful impact.

01

Spread broader social impact

Connect leaders, young people and communities around action.

02

Inspire corporate changes

Turn honest exchange into practical organizational progress.

03

Foster youth mindset changes

Build adaptive, resilient, creative and humble leaders.

Interested in Melo?Start a conversation

Inventory

Specified patterns

These patterns stay visible as specifications until real content and behavior are ready.

Editorial & people

Editorial hero, media split, mission, people grid, person card, logo band, related stories.

Specified

Blog & article

Blog feature, filters, article cards, metadata, hero media, rich text, results and related posts.

Specified

Programs

Product hero, feature group, dual path, alternating feature, interface media and capability grid.

Specified