Dark Glowing Feature Cardsv1.0 Published
8.1K
Dark Glowing Feature Cards Design SystemDark Glowing Feature Cards establishes a glass 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 / 20px / 600 / - / -Body systemInter / 20px / 400 / - / -Inter
LettersAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk LlNumbers01 02 03 04 05 06 07 08 09
Colors
Primary#0A0A0B

33% usage signal

Secondary#FFFFFF

33% usage signal

Tertiary#9CA3AF

11% usage signal

Neutral#FF3D77

22% usage signal

linear-gradient(137deg, #FF3D77 0%, #FFB1CE 45%, #FF9D3C 100%)linear-gradient(#1A1A1C, #1A1A1C) padding-boxlinear-gradient(137deg, #FF3D77 0%, #FFB1CE 45%, #FF9D3C 100%) border-box"> <div class="w-full h-full p-7 flex flex-col justify-between c3-inner"> <div class="text-white/90 c3-icon"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="4" width="18" height="12" rx="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 20h8M12 16v4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg></div> <div class="c3-copy"><h3 class="text-white font-medium text-xl mb-3 tracking-tight">Hardware</h3><p class="text-gray-400 text-[14px] leading-[1.6] font-normal selection:bg-white/20">My entire desktop setup is built for power. It is silentlinear-gradient(137deg, #FFFFFF 0%, #7DD3FC 45%, #06B6D4 100%)
Layout
LayoutGridWidthFull BleedGridStrongFramingGlass
Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path
Spacing
24px12pxTitle block

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

12px24px28px40px48px
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.

Blur / backdrop filterBlur / backdrop filter / Gradient surfaces
Surface sampleGlass
SurfaceGlassBorder1px 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.

40pxradius-1
Card surfaceInput fieldStatus pill