Interface Lab

NeuroSync Cognitive Herov1.0 Published

7.4K

NeuroSync Cognitive Hero Design SystemNeuroSync Cognitive Hero establishes a gradient shell 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 systemInter / 42px / 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#07080A

25% usage signal

Secondary#F3F4F2

13% usage signal

Tertiary#FFFFFF

50% usage signal

Neutral#090A0D

13% usage signal

radial-gradient(circle at 54% 70%,#ffffff1a,transparent 24%)linear-gradient(180deg,#090a0d,#0a0b0e)linear-gradient(180deg,transparent,#f8fbff,#f3b57b,transparent)

Layout

LayoutLayeredWidthFull BleedGridMinimalFramingGradient shell

Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path

Spacing

10px9pxTitle block

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

9px10px13px15px16px34px46px56px

Buttons

Product

Elevation & Depth

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

Blur / backdrop filterBlur / backdrop filter / Gradient surfaces

Surface sampleGradient shell

SurfaceGradient shellBorder1px solid currentColor / low opacityShadow0 25px 50px rgba(0,0,0,.35)Blur12px

Shapes

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

2pxradius-1

Card surfaceInput fieldStatus pill

Interface Lab Skills

Border GradientssupportColors / ElevationMasked RevealsupportLayout / Components / ElevationWebGL LasercoreLayout / Components / Elevation