Style Guide v2

Layered & Dimensional

Dynamic, overlapping cards that create depth and spatial hierarchy. Utilizes distinct z-indices, soft drop shadows, and subtle gradient shifts to organize content dimensionally.
01

Typography

Text layers maintain strong contrast against both white cards and gray backgrounds.
Display (H1)

Brown fox jumps.

Heading 2 (H2)

Brown fox jumps.

Heading 3 (H3)

Brown fox jumps.

Heading 4 (H4)

Brown fox jumps.

Body Text
The layered style uses borders to anchor text blocks within its floating containers, grounding the eye as it scans down the page.
Small / Caption
Used for labels, captions, metadata, and secondary information.
02

Dimensional Colors

Colors presented with depth, utilizing drop shadows to lift them off the canvas.
Brand Primary
Brand Green
#76B82A
Dark Depth
#111827
Soft Surface
Ultra Light
Extended Palette
Ultra Light
Light
Primary
Dark
Ultra Dark
Supporting Colors
Secondary
Accent
Base
Neutral
03

Spacing Scale

Consistent spatial rhythm through ACSS spacing tokens.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl
04

Buttons

Interactive elements with layered hover states and dimensional feedback.
Primary Variants
Primary ActionPrimary LightPrimary DarkOutline
Secondary & Accent
SecondarySecondary LightAccentAccent Light
Utility & Neutral
BaseNeutralBlackClear
On Dark Surface
Primary on DarkAccent DarkNeutral Dark
05

Shadow & Depth Scale

Progressive elevation levels using ACSS box-shadow utility classes.
01
Flat
Border only
02
Ambient
box-shadow--m
03
Elevated
box-shadow--l
04
Floating
box-shadow--xl
06

Card Patterns

Overlapping cards with varying depths to establish content hierarchy.
01

Sacred Knowledge

Traditional Islamic sciences taught through an immersive, full-time curriculum spanning the classical disciplines.
02

Spiritual Growth

Mentorship-driven spiritual development rooted in the prophetic tradition, nurturing both intellect and character.
03

Community

A supportive ecosystem of scholars, students, and alumni committed to preserving and transmitting sacred knowledge.
07

Complex Layering

Combining imagery, floating text boxes, and offset elements to create rich, dynamic layouts.
Dark Card

Inverted Layering

Dark surfaces create dramatic contrast when layered against the light canvas.
Bordered Card

Accent Border

Subtle brand-colored borders add definition without competing with shadow-based depth cues.
08

Radius & Borders

Rounded corners and border treatments that define the soft, approachable feel.
radius--xs
radius--s
radius--m
radius--l
radius--xl
radius--circle
09

Design Principles

Depth Through Shadow

Progressive shadow levels (flat, ambient, elevated, floating) establish clear visual hierarchy without relying on color alone.

Spatial Offsets

Negative margins, staggered positioning, and z-index layering create dynamic tension between elements.

Decorative Geometry

Rounded shapes, circles, and rotated rectangles break out of containers, adding playfulness and organic movement.

Soft Canvas

The subtle off-white background provides just enough contrast for white cards to appear elevated.