Interface Lab

Lithos Cursor-Reveal Geology Herov1.0 Published

98.0K

Lithos Geology HeroLithos Cursor-Reveal Geology Hero establishes a glass 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 / - / - / -Body systemPlayfair Display / - / - / -Inter

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

Colors

primary#E8702A

50% usage signal

secondary#D2611F

25% usage signal

background#000000

18% usage signal

text-primary#FFFFFF

25% usage signal

text-secondaryrgba(255,255,255,0.8)

6% usage signal

surfacergba(255,255,255,0.2)

6% usage signal

borderrgba(255,255,255,0.3)

6% usage signal

Neutral#090A0D

6% usage signal

Layout

LayoutLayeredWidthBoundedGridMinimalFramingGlass

Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path

Spacing

16px8pxTitle block

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

8px16px24px32px48px64px

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.

Blur / backdrop filterBlur / backdrop filter

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.

6pxradius-19999pxradius-2

Card surfaceInput fieldStatus pill

Interface Lab Skills

Cursor Spotlight RevealdetailButtons / ComponentsFull-screen Dark HerosupportLayout / Spacing