Slon Design System Reference

Foundation

Color Tokens

The full color palette extracted from the Slon memorial design system, including golden accents, deep neutrals, and bronze tones that create a solemn, dignified atmosphere.

Golden Highlight

#F2D5A4

Primary accent · Focus states · Emphasis

Golden Accent

#F4C66B

Secondary golden · Interactive states

Bronze Secondary

#D6A85F

Secondary accents · Borders · Warmth

Bronze Tertiary

#C8A45A

Tertiary layering · Subtle variation

Light Cream Background

#F6EFE4

Primary surface · Main background

Deep Black Primary

#050608

Primary text · Dark foreground

Deep Black Minimal

#0A0A0A

Dark text · Pure black contrast

Gray Neutral

#888780

Supporting neutral · Muted text

Light Gray Secondary

#B3B3B3

Secondary text · Mid-tone neutral

Tan Warm

#A8A59A

Warm neutral bridge · Texture

White Pure

#FFFFFF

Maximum contrast · Critical text

Typography

Type Scale

Cormorant Garamond for classical serif hierarchy and Inter for clean, modern body and interactive text. Substantial line heights create elegant vertical rhythm honoring the memorial's contemplative atmosphere.

Primary Cormorant Garamond Display · Headings · Classical hierarchy

Secondary Inter Body · Navigation · UI · Clean clarity

Display In Memoriam 86.4px · 500 · 88.128px

H1 Memorial Title 57.6px · 700 · 57.6px

H2 Large Featured Section Link 22px · 600 · 36.3px

Body Lg The narrative of remembrance flows through this space 17px · 400 · 28.05px

Body Supporting content with clarity and respect maintained throughout 16px · 400 · 26.4px

Navigation Menu item · Secondary navigation link 14px · 400 · 23.1px

Button Primary Action Button 15px · 600 · 24.75px

Label Small supporting label 13px · 400 · 21.45px

Layout

Spacing & Shapes

4px base grid with generous whitespace philosophy. Border radii range from sharp (0px) to fully rounded (999px), creating distinction between structural and interactive elements.

Spacing Scale

4px micro

8px xs

12px sm

16px md

20px lg

24px xl

28px 2xl

32px 3xl

36px 4xl

40px 5xl

48px 6xl

56px 7xl

Border Radius

None 0px

Input 12px

Container 28px

Card 30px

Card Alt 34px

Full 999px

Shadows

Flat No elevation

L1 Subtle Standard card elevation

L2 Standard Medium emphasis containers

L3 Strong High emphasis · modals

L4 Luminous Primary buttons · focus

Elevation

Depth & Surfaces

Three-tier depth system creating atmospheric hierarchy. Frosted glass surfaces with subtle transparency elevate content respectfully while maintaining visual clarity and dignified spacing.

Base Surface

Primary background layer — the foundation of all content

L0 · #F6EFE4

Frosted Glass — Small

Secondary elevated surface with frosted effect and subtle shadow

L1 · rgba(255,255,255,0.02)

Frosted Glass — Medium

Tertiary elevated surface with enhanced shadow depth

L2 · Enhanced Shadow

Light Cream #F6EFE4

Frosted Glass rgba(255,255,255,0.02)

Input Surface rgba(255,255,255,0.04)

Subtle Border rgba(246,239,228,0.08)

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — golden accents, frosted glass, generous spacing, and warm elevations creating dignified interactivity.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: transparent bg · #0A0A0A text · 999px radius · 18px padding · 62.75px height · golden border rgba(242,213,164,0.6) · warm shadow. Secondary: transparent bg · rgba(246,239,228,0.78) text · subtle cream border. Ghost: link-style navigation. All states use golden highlights on hover.

Text Input

Form control — Default and Focused states

.input

Default: rgba(255,255,255,0.04) bg · #E6E6E6 text · 12px radius · 32px height · subtle border. Focus: rgba(255,255,255,0.06) bg · #F6EFE4 text · golden border rgba(242,213,164,0.6) · enhanced visibility.

Frosted Glass Card

Content container — elevated surface with atmospheric shadow

.card

Legacy Title

A respectful description of remembrance and heritage. This container uses frosted glass effect with subtle transparency and warm shadows.

rgba(255,255,255,0.02) bg · rgba(246,239,228,0.08) border · 30px radius · L1 shadow. Title: 16px/600/#F6EFE4. Body: 14px/#888780. CTA: primary button with golden border and luminous shadow.

Badges

Status indicators — Success, Error, Info

.badge

Featured Archived Commemorated

12px/600 · 4/8px padding · 12px radius. Success: #1F883D. Error: #CF222E. Info: #1F6FEB. All badge styles maintain solid backgrounds for clarity and distinction.

Guidelines

Do's & Don'ts

Principles for consistent application of the Slon design language across surfaces, honoring the memorial's contemplative and dignified atmosphere through every interaction.

Do — Embrace

Use warm golden accents (#F2D5A4, #F4C66B) strategically to draw attention and create emotional resonance
Apply generous whitespace (36–56px margins) around major content for dignified, contemplative separation
Layer transparency deliberately using rgba() for frosted glass effects and subtle depth
Use Cormorant Garamond serif exclusively for primary headings and classical hierarchy
Apply 999px border radius to all button styles for cohesive, pill-shaped interaction patterns
Provide minimum 44px height for all touch-interactive elements for accessibility
Use 24px gaps between items in lists and grids for consistent rhythm
Add golden border accents to primary buttons for visual lift and interactive affordance

Don't — Avoid

Don't mix serif and sans-serif at the same hierarchy level; respect the classical distinction
Don't use pure white (#FFFFFF) for body text; prefer #F6EFE4 or #E6E6E6 to maintain warm tone
Don't create buttons with sharp corners (0px); all interactive buttons must use 999px radius
Don't neglect golden accents in interactive states; hover and focus must incorporate golden highlights
Don't compress padding below 12px on contained elements; respect the breathing room philosophy
Don't apply opacity below 0.6 to interactive borders; insufficient contrast reduces affordance
Don't use pure black (#000000) anywhere; use deep blacks (#050608, #0A0A0A) instead
Don't override border radius on cards below 28px; maintain the 28–30px visual signature