Interface Lab

Smart Prosthetics Video Herov1.0 Published

8.1K

Smart Prosthetics Video Hero Design SystemSmart Prosthetics Video Hero establishes a open layered system for marketing landing page. The reusable layer is the typography, palette, spacing, radius, surface, component, and motion baseline; special Skills are mapped separately.

Typography

Heading systemui-sans-serif / 14px / 600 / - / -Body systemui-sans-serif / 14px / 400 / - / -ui-sans-serif

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

Colors

Primary#F0F0EE

29% usage signal

Secondary#111827

43% usage signal

Tertiary#EDEDED

14% usage signal

Neutral#374151

14% usage signal

Layout

LayoutLayeredWidthFull BleedGridMinimalFramingOpen

Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path

Spacing

8px6pxTitle block

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

6px8px10px12px16px20px24px32px40px80px

Buttons

Product

Icons

LinearKeep one stroke/fill rule and align icons to the spacing scale.

Elevation & Depth

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

OpenSurface, border, shadow, and blur remain reusable recipes.

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.

12pxradius-1999pxradius-2

Card surfaceInput fieldStatus pill

Interface Lab Skills

Aura Asset ImagesdetailButtons / ComponentsBeautiful ShadowsdetailColors / Elevation