skincare

Brand System Showcase — The approved identity extracted from the Sumay Brand Book 2024, expanded into a complete design system. Every value is implementation-ready.

COLOR SYSTEM
Paleta de colores
Click any swatch to copy the hex code. Primary palette from the Brand Book (p.20), with secondary opacity variants derived from the primaries.
PRIMARY
Azul Cosmos
#041E42
Copied
SECONDARY
Aqua
#339CB0
Copied
TERTIARY
Celeste
#8EC4CC
Copied
ACCENT
Dorado
#DAAA00
Copied
AYLLU ONLY
Frutos Rojos
#AA0061
Copied
BASE
Blanco
#FFFFFF
Copied
BG
Gray 50
#FAFBFC
Copied
BG ALT
Gray 100
#F4F5F7
Copied

Color Ratio: 60% White/Neutrals · 25% Azul Cosmos · 10% Aqua + Celeste · 5% Dorado (details only) + Frutos Rojos (Ayllu only)

TYPOGRAPHY
Tipografías
Three-font system: display serif for headlines (Cormorant Garamond as web fallback for Harlow Duo Serif), script for accents (Dancing Script as web fallback for Harlow Duo Script), and Montserrat for body text.
H1 — DISPLAY SERIF (Headlines)
regeneration begins within
Cormorant Garamond 300 · 48px · 1.1 lh · -0.02em · Lowercase only
H2 — DISPLAY SERIF
your skin is a system
Cormorant Garamond 400 · 36px · 1.15 lh · Lowercase only
H3 — DISPLAY SERIF
inside + outside care
Cormorant Garamond 400 · 28px · 1.2 lh · Lowercase only
SCRIPT ACCENT (CTAs, accent words)
skincare
by Carolina Gómez
Dancing Script 400 · Short words/phrases only · Lowercase only
BODY — MONTSERRAT
Sumay combines a precision serum with bioavailable collagen peptides — a coherent inside + outside protocol designed for visible regeneration over time. Not overnight promises, but a practice you can trust.
Montserrat 400 · 16px · 1.6 lh
OVERLINE
THE REGENERATION SYSTEM
Montserrat 500 · 11px · 2px tracking · UPPERCASE
BUTTON TEXT
Descubre el sistema
Montserrat 500 · 14px · 0.5px tracking
COMPONENTS
Component gallery
All interactive elements styled with the approved brand identity. Every variant and state shown.

Buttons

Cards

Product Image
FUERA — TOPICAL

S Next Generation Serum

12 precision actives for texture, firmness, and luminosity. Applied nightly.

Ingredient Visual
DENTRO — NUTRITION

Ayllu Collagen Peptides

Hydrolyzed collagen + Moringa, Granada, and Cacay. Taken each morning.

Bundle Photo
RITUAL COMPLETO

Pack Sistema

The complete inside + outside system in one bundle. Save 15%.

Form Inputs

SPACING SCALE
4px base unit
All spacing derives from a 4px base. These values map directly to CSS custom properties.
4px
8px
12px
16px
24px
32px
48px
64px
80px
96px

SHADOW / ELEVATION

sm
md
lg
xl
BRAND VOICE
How Sumay speaks
The voice is consistent across all channels. The tone adjusts by context. These are the four voice attributes from the Brand Book.
Amigable y Cercana
Sounds like: "Tu piel ya tiene todo lo que necesita. Nosotros le damos las herramientas correctas."
Doesn't sound like: "Hey babe! Ready to glow up?"
Experta y Confiable
Sounds like: "Matrixyl 3000 stimulates collagen synthesis. That's why firmer texture appears within 60–90 days."
Doesn't sound like: "As industry experts with decades of experience, we believe..."
Inspiradora y Motivadora
Sounds like: "Consistent care compounds. In 90 days, you'll see what patience and the right system can build."
Doesn't sound like: "You DESERVE to be your best self!"
Clara y Concisa
Sounds like: "Two products. One system. 90 days."
Doesn't sound like: "Our comprehensive holistic approach encompasses a multi-dimensional framework..."
USAGE RULES
Do's and don'ts
Hard rules that are never broken. These apply across website, ads, email, social, and all brand touchpoints.

Do

  • Use the logo in approved colors only (Cosmos, Aqua, White, Black)
  • Maintain clear space around the logo (half Y-height)
  • Use Harlow Duo Serif in lowercase only for headlines
  • Use Montserrat for all body text
  • Follow the 60-25-10-5 color ratio
  • Show real, natural skin texture in photography
  • Lead with education before selling
  • Use "regeneration" and "longevity" language
  • Feature Carolina Gómez as a trust lever
  • Meet WCAG AA contrast minimums (4.5:1)

Don't

  • Stretch, rotate, or add effects to the logo
  • Use Aqua (#339CB0) for body text on white (fails WCAG)
  • Use Harlow Duo Serif in UPPERCASE
  • Use Frutos Rojos outside Ayllu berry context
  • Airbrush or heavily retouch skin in photos
  • Use "miracle," "instant transformation," or "anti-aging"
  • Use more than one exclamation mark per piece of content
  • Use ALL CAPS for emphasis (use bold instead)
  • Use discount-first language in brand communications
  • Use generic stock photos with fake smiles
HERO DEMO
The brand in action
A mock homepage hero section using the approved brand identity — colors, typography, and component styling applied together.
THE REGENERATION SYSTEM

your skin is a system. treat it like one.

Sumay combines a precision serum with bioavailable collagen peptides — a coherent inside + outside protocol designed for visible regeneration over time.

Product photography: S Serum + Ayllu side-by-side, studio lighting on warm surface