EnergeticaMente · Design System
A living reference for the colors, type, spacing, components, layouts, and patterns that make EnergeticaMente feel like one coherent experience.
01 · Tokens
Tokens give every page the same recognizable energy while leaving room for each story to have its own rhythm.
Use semantic names in CSS and components. Avoid one-off hex values or arbitrary spacing in page layouts.
03 · Typography
FT Base is the intended source family. Mulish is the current implementation fallback until the font files are available.
Hero headlines and high-impact campaign moments.
Main section titles and narrative anchors.
Card titles, subsections, and modules.
Small steps become meaningful change when people can see themselves in the journey.
Introductory copy and supporting statements.
04 · Layout model
Use the widest canvas for visual storytelling, the standard container for most page sections, and a narrow measure when reading or completing a task needs focus.
05 · Actions
Every action should answer: what happens next, and why should I want to do it?
Use on dark surfaces when the action needs high contrast.
06 · Cards and media
Use photography to add warmth, evidence, and a sense of place.
Read the story →Keep card copy short and let the action explain the next step.
Explore the program →Green, cyan, violet, and blue can distinguish journeys without fragmenting the system.
See the pathway →07 · Banners
08 · Content patterns
Form pattern
Use one clear question per field and make the next step explicit.
09 · Implementation notes
When creating the remaining pages, use these patterns as the starting point. Add a new pattern only when the content genuinely requires a different interaction or reading mode.