Matrix Framework Interfacev1.0 Published
4.9K
Matrix Framework Interface Design SystemMatrix Framework Interface establishes a gradient shell 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 / 1.05Body systemInter / 13px / 400 / 1.55Inter
LettersAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk LlNumbers01 02 03 04 05 06 07 08 09
Colors
primary#F7F3EB

11% usage signal

secondary#20201E

6% usage signal

tertiary#FFFFFF

11% usage signal

neutral#D7D0C3

11% 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 BleedGridStrongFramingGradient shell
Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path
Spacing
9px4pxTitle block

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

4px9px10px13px14px18px54px64px
Buttons
Product
Icons
Linear- Radius family: 10px, 999px - Icon style: Linear
Elevation & Depth

- Surface: Gradient shell - Border: 1px solid currentColor / low opacity - Shadow: 0 18px 50px rgba(15,23,42,.14) - Blur: 0px

Reusable shadowsReusable shadows / Gradient surfaces
Surface sampleGradient shell
SurfaceGradient shellBorder1px solid currentColor / low opacityShadow0 18px 50px rgba(15,23,42,.14)Blur0px
Shapes

- Radius family: 10px, 999px - Icon style: Linear

10pxsurface999pxpill
Card surfaceInput fieldStatus pill
Do's and Don'ts

Use these constraints as design lint rules for future generations.

DoMaintain the Design System as the first Skill layer for every work.Reuse type, color, spacing, radius, surfaces, and component rules before adding special Skills.Bind every special Skill to concrete regions to avoid global style drift.Generate DESIGN.md first for new works, then decide which local effects should become Skills.
Don'tDo not let WebGL, Three.js, or motion redefine the global type and component system.Do not describe a work only with visual adjectives; map it to tokens, regions, and Skills.Do not save one-off page details as base Design System rules.
UI Design Lab Skills
Border GradientssupportColors / ElevationFramed Grid LayoutsupportLayout / Spacing