During my time at EPAM NEORIS, I created and maintained a Figma design system for Cencosud. I organized components into six Atomic Design families and defined variables for color, spacing, radius, and typography across desktop and mobile interfaces.
These assets were exported from the Figma file and retain the sample copy used in its documentation.
Color
Organizecolorbyfunction.
I separated variables into Theme for branding, Feedback for states, and Neutral for surfaces and text, with Softest and Stronger pairs.
Theme
PrimaryTheme/Primary#2563EB
HoverTheme/Hover#1D4ED8
TonalTonal/Default#F1F5F9
Feedback · Softest / Stronger
Success#DCFCE7#16803C
Warning#FEF3C7#B45309
Error#FEE2E2#B91C1C
Info#DBEAFE#1D4ED8
Neutral
StrongestNeutral/Strongest#0F172A
WhiteNeutral/White#FFFFFF
BlackMonochrome/Black#000000
Typography
Definecleartyperoles.
I organized DM Sans into Headline, Title, Text, and Caption, with three weights and up to four sizes. All components use the same Text building block.
Headline
Cencosud
Headline XL96 px · 700 · 500 · 400
Cencosud
Headline L72 px · 700 · 500 · 400
Cencosud
Headline M60 px · 700 · 500 · 400
Cencosud
Headline S48 px · 700 · 500 · 400
Title
Body text
Title XL36 px · 700 · 500 · 400
Body text
Title L30 px · 700 · 500 · 400
Body text
Title M24 px · 700 · 500 · 400
Body text
Title S20 px · 700 · 500 · 400
Text
Body text
Text XL18 px · 700 · 500 · 400
Body text
Text L16 px · 700 · 500 · 400
Body text
Text M14 px · 700 · 500 · 400
Body text
Text S12 px · 700 · 500 · 400
Caption
Body text
Caption10 px · 700 · 500 · 400
Spacing
Sharespacingscales.
I defined spacing, radius, and elevation variables. Spacing/2, /4, and /8 map to 8, 16, and 32 px; buttons and cards share an 8 px radius.
Spacing
Spacing/28 px
Spacing/416 px
Spacing/832 px
4 px increments
Radius
Rounded/ButtonRounded/Box8 px
Elevation
Shadow Down/M0 · 1 · 8 · −1 · 20 %
Variants
Documentbuttonstates.
I created seven styles from Primary to Overlay, with hover, pressed, disabled, and loading states across three sizes.
Forms
Accountforeveryinputstate.
I included labels, help, and validation, with empty and filled variants in two sizes and states up to read-only.
Controls
Keepcontrolsconsistent.
I designed Checkbox, Radio Button, and Switch as standalone controls and within fields, including active and disabled states.
Feedback
Structureinterfacemessages.
I defined a shared icon, title, and message structure for alerts and tooltips, with actions where appropriate.
Appearance
Preparelightanddarkmodes.
I designed light and dark notification variants while keeping each state's content and actions consistent.
Content
Showpricinganddataclearly.
I built product cards with pricing and offers, and bar charts with legends and tooltips.
In context
Putthelibrarytoworkintemplates.
I built desktop templates from existing components to assess their use in dashboards and sign-up forms.
Sidebar
Expandnavigationwithoutshiftingcontent.
I designed a hover-expanding icon rail that overlays content while keeping navigation in place.
Implementation
HowIbuiltit.
Named variables
I defined the Figma variables used by components: Theme/Primary for branding, Spacing/2, /4, and /8 for a 4 px-based spacing scale, and DM Sans for Headline, Title, Text, and Caption roles.
Documented in Figma
I documented each component on its own page, including a variant matrix and usage guidance. I also built desktop templates from the same library.
Design System for Cencosud
The design system I worked on for Cencosud.
Figma Variables
Color, spacing, radius, and typography.
Component Sets
Variants by type, size, and state.
Atomic Design
Six families, from actions to navigation.
DM Sans
Headline, Title, Text, and Caption.
Templates
Desktop screens built from the shared library.
EPAM NEORIS for Cencosud · 2023–2025
Corporate work: I share only the essentials, retaining the sample content from the original Figma file.
