Interface Lab

NEXA Fashion E-commercev1.0 Published

3.2K

NEXA Fashion E-commerce Design SystemNEXA Fashion E-commerce establishes a open grid system for commerce first screen. The reusable layer is the typography, palette, spacing, radius, surface, component, and motion baseline; special Skills are mapped separately.

Typography

Heading systemInter / 48px / 600 / - / -Body systemInter / 12px / 400 / - / -Inter

LettersAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk LlNumbers01 02 03 04 05 06 07 08 09

Colors

Primary#FFFFFF

33% usage signal

Secondary#101216

33% usage signal

Tertiary#DFE5E8

17% usage signal

Neutral#566068

17% usage signal

linear-gradient(135deg,#e6e9e8,#c9d5d0 45%,#7d8790)linear-gradient(180deg,#c5a58e,#5b6570)

Layout

LayoutGridWidthFull BleedGridStrongFramingOpen

Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path

Spacing

8px7pxTitle block

Description copy reflects measured rhythm, icon offset, and CTA spacing.

7px8px10px12px18px20px28px30px

Buttons

Product

Elevation & Depth

Depth is communicated through surfaces, borders, shadows, and blur treatments.

Gradient surfacesGradient surfaces

Surface sampleOpen

SurfaceOpenBorder1px solid currentColor / low opacityShadow0 18px 50px rgba(15,23,42,.14)Blur0px

Shapes

Shapes define the radius family for cards, inputs, tags, and supporting surfaces.

24pxradius-1180pxradius-2999pxradius-3

Card surfaceInput fieldStatus pill

Interface Lab Skills

Aura Asset ImagesdetailButtons / ComponentsBeautiful ShadowsdetailColors / Elevation