Interface Lab

Matrix Framework Interfacev1.0 Published

4.9K

Matrix Framework Interface Design SystemMatrix Framework Interface establishes a open grid system for web interface. The reusable layer is the typography, palette, spacing, radius, surface, component, and motion baseline; special Skills are mapped separately.

Typography

Heading systemInter / 60px / 600 / - / -Body systemInter / 13px / 400 / - / -Inter

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

Colors

Primary#F7F3EB

29% usage signal

Secondary#20201E

14% usage signal

Tertiary#FFFFFF

29% usage signal

Neutral#D7D0C3

29% usage signal

radial-gradient(circle at 50% 44%,#ffffff 0 24%,transparent 25%)linear-gradient(#d7d0c333 1px,transparent 1px)linear-gradient(90deg,#d7d0c333 1px,transparent 1px)

Layout

LayoutGridWidthFull BleedGridStrongFramingOpen

Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path

Spacing

9px4pxTitle block

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

4px9px10px13px14px18px54px64px

Buttons

Product

Elevation & Depth

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

Reusable shadowsReusable shadows / Gradient 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.

10pxradius-1999pxradius-2

Card surfaceInput fieldStatus pill

Interface Lab Skills

Framed Grid LayoutsupportLayout / SpacingContainer LinessupportLayout / Spacing