JL Kruger
5422131782
Homepage (site/index.html): integration-v14 promoted, Writings section integrated with 33 pieces clustered by type (stories/essays/miscellany), Writings welcome lightbox, content frame at 98% opacity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
836 lines
34 KiB
HTML
836 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Prismatic Storm Dragon | Design System Documentation</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* ============================================
|
|
PRISMATIC STORM DRAGON DESIGN SYSTEM
|
|
|
|
BOLD DISTINCTIVE CHOICE: Multi-Layer Chromatic Depth
|
|
Cards use stacked translucent borders in complementary colors
|
|
creating a chromatic aberration effect that simulates depth and power.
|
|
|
|
This technique layers multiple box-shadows in split-complementary
|
|
colors (violet-red-cyan-gold), creating visual weight and drama
|
|
without traditional drop shadows. It evokes the prismatic refraction
|
|
of light through storm clouds and the iridescent scales of mythical
|
|
dragons—powerful, layered, elemental.
|
|
============================================ */
|
|
|
|
/* ===== CSS RESET ===== */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ===== DESIGN TOKENS ===== */
|
|
:root {
|
|
/* --- CHROMATIC PALETTE ---
|
|
Split-complementary scheme: Violet (primary), Red-Orange & Cyan (complements)
|
|
Gold as accent. Each color exists in multiple tonal steps for layering. */
|
|
|
|
/* Violet family - primary power */
|
|
--violet-100: #e9d5ff;
|
|
--violet-300: #c084fc;
|
|
--violet-500: #a855f7;
|
|
--violet-700: #7e22ce;
|
|
--violet-900: #4a1772;
|
|
|
|
/* Red-Orange family - heat, intensity */
|
|
--red-100: #ffe4e6;
|
|
--red-300: #fda4af;
|
|
--red-500: #f43f5e;
|
|
--red-700: #be123c;
|
|
--red-900: #881337;
|
|
|
|
/* Cyan family - cool energy */
|
|
--cyan-100: #cffafe;
|
|
--cyan-300: #67e8f9;
|
|
--cyan-500: #06b6d4;
|
|
--cyan-700: #0e7490;
|
|
--cyan-900: #164e63;
|
|
|
|
/* Gold family - prismatic accent */
|
|
--gold-100: #fef3c7;
|
|
--gold-300: #fcd34d;
|
|
--gold-500: #eab308;
|
|
--gold-700: #a16207;
|
|
--gold-900: #713f12;
|
|
|
|
/* Neutral palette */
|
|
--gray-50: #fafafa;
|
|
--gray-100: #f4f4f5;
|
|
--gray-200: #e4e4e7;
|
|
--gray-300: #d4d4d8;
|
|
--gray-700: #3f3f46;
|
|
--gray-800: #27272a;
|
|
--gray-900: #18181b;
|
|
|
|
/* --- BACKGROUND SYSTEM ---
|
|
Dark, stormy, atmospheric */
|
|
--bg-gradient-1: #18181b; /* Deep storm */
|
|
--bg-gradient-2: #27272a; /* Storm cloud */
|
|
--bg-gradient-3: #2d2438; /* Purple storm */
|
|
--bg-gradient-4: #382f44; /* Lightning horizon */
|
|
|
|
/* Surface colors */
|
|
--bg-surface: rgba(250, 250, 250, 0.03);
|
|
--bg-elevated: rgba(250, 250, 250, 0.06);
|
|
--bg-high: rgba(250, 250, 250, 0.10);
|
|
--bg-solid-light: #fafafa;
|
|
|
|
/* --- BORDER & RADIUS ---
|
|
Slightly rounded for organic, dragon-scale feel */
|
|
--border-width: 1px;
|
|
--border-width-emphasis: 2px;
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
|
|
/* --- SPACING SYSTEM ---
|
|
T-shirt sizes for intuitive spacing */
|
|
--space-xs: 0.5rem; /* 8px */
|
|
--space-sm: 0.75rem; /* 12px */
|
|
--space-md: 1rem; /* 16px */
|
|
--space-lg: 1.5rem; /* 24px */
|
|
--space-xl: 2rem; /* 32px */
|
|
--space-2xl: 3rem; /* 48px */
|
|
--space-3xl: 4rem; /* 64px */
|
|
|
|
/* --- TYPOGRAPHY ---
|
|
Crimson Pro: Elegant, powerful serifs for display
|
|
Work Sans: Clean geometric sans for body */
|
|
--font-display: 'Crimson Pro', Georgia, serif;
|
|
--font-body: 'Work Sans', system-ui, sans-serif;
|
|
|
|
/* Type scale */
|
|
--text-xs: 0.75rem; /* 12px */
|
|
--text-sm: 0.875rem; /* 14px */
|
|
--text-base: 1rem; /* 16px */
|
|
--text-lg: 1.125rem; /* 18px */
|
|
--text-xl: 1.25rem; /* 20px */
|
|
--text-2xl: 1.5rem; /* 24px */
|
|
--text-3xl: 1.875rem; /* 30px */
|
|
--text-4xl: 2.25rem; /* 36px */
|
|
--text-5xl: 3rem; /* 48px */
|
|
|
|
/* --- TEXT COLORS --- */
|
|
--text-primary: #fafafa;
|
|
--text-secondary: #d4d4d8;
|
|
--text-tertiary: #a1a1aa;
|
|
--text-inverse: #18181b;
|
|
}
|
|
|
|
/* ===== BASE STYLES ===== */
|
|
body {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
line-height: 1.6;
|
|
color: var(--text-primary);
|
|
background: linear-gradient(180deg,
|
|
var(--bg-gradient-1) 0%,
|
|
var(--bg-gradient-2) 33%,
|
|
var(--bg-gradient-3) 66%,
|
|
var(--bg-gradient-4) 100%);
|
|
background-attachment: fixed;
|
|
min-height: 100vh;
|
|
padding: var(--space-lg);
|
|
}
|
|
|
|
/* ===== LAYOUT ===== */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: var(--space-lg);
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
|
|
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
|
|
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
|
|
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
|
|
|
|
/* ===== TYPOGRAPHY SYSTEM ===== */
|
|
h1 {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-5xl);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
margin-bottom: var(--space-lg);
|
|
color: var(--violet-300);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
h2 {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-4xl);
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: var(--space-md);
|
|
color: var(--violet-300);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
h3 {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-3xl);
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
margin-bottom: var(--space-md);
|
|
color: var(--cyan-300);
|
|
}
|
|
|
|
h4 {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-2xl);
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
margin-bottom: var(--space-sm);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
h5 {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-xl);
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
margin-bottom: var(--space-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
h6 {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-lg);
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
margin-bottom: var(--space-sm);
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: var(--space-md);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
strong {
|
|
font-weight: 600;
|
|
color: var(--gold-300);
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
color: var(--cyan-300);
|
|
}
|
|
|
|
code {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: var(--text-sm);
|
|
background: var(--bg-elevated);
|
|
color: var(--cyan-300);
|
|
padding: var(--space-xs) var(--space-sm);
|
|
border: var(--border-width) solid var(--cyan-700);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
pre {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: var(--text-sm);
|
|
line-height: 1.6;
|
|
background: var(--bg-surface);
|
|
color: var(--text-primary);
|
|
padding: var(--space-md);
|
|
border-left: var(--border-width-emphasis) solid var(--violet-500);
|
|
border-radius: var(--radius-md);
|
|
overflow-x: auto;
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
pre code {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ===== DISTINCTIVE CHOICE: CHROMATIC DEPTH SYSTEM =====
|
|
|
|
This is the defining feature of the design system. Rather than using
|
|
traditional drop shadows, we create depth through layered box-shadows
|
|
in complementary colors. This achieves two goals:
|
|
|
|
1. Visual depth and elevation without the flatness of standard shadows
|
|
2. A chromatic aberration effect that suggests power, energy, and movement
|
|
|
|
The technique works by stacking multiple colored shadows with slight
|
|
offsets. The colors come from our split-complementary palette, creating
|
|
a prismatic halo that feels both technical (like RGB pixel shifting)
|
|
and organic (like iridescent dragon scales).
|
|
|
|
The effect is subtle but powerful. It catches the eye without being
|
|
distracting, and creates visual interest that pure gray shadows cannot. */
|
|
|
|
.card {
|
|
background: var(--bg-elevated);
|
|
backdrop-filter: blur(8px);
|
|
border: var(--border-width) solid rgba(192, 132, 252, 0.2);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-lg);
|
|
margin-bottom: var(--space-lg);
|
|
|
|
/* The chromatic depth effect: layered colored shadows */
|
|
box-shadow:
|
|
0 0 0 1px var(--violet-900), /* Inner glow */
|
|
1px 1px 0 var(--red-900), /* Red shift */
|
|
-1px -1px 0 var(--cyan-900), /* Cyan shift */
|
|
2px 4px 8px rgba(168, 85, 247, 0.15), /* Violet depth */
|
|
-2px -2px 6px rgba(6, 182, 212, 0.1); /* Cyan ambient */
|
|
}
|
|
|
|
/* Elevated cards have stronger chromatic effect */
|
|
.card-elevated {
|
|
background: var(--bg-high);
|
|
box-shadow:
|
|
0 0 0 1px var(--violet-700),
|
|
2px 2px 0 var(--red-700),
|
|
-2px -2px 0 var(--cyan-700),
|
|
4px 8px 16px rgba(168, 85, 247, 0.25),
|
|
-4px -4px 12px rgba(6, 182, 212, 0.15),
|
|
0 12px 24px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Powerful cards emphasize the effect */
|
|
.card-powerful {
|
|
background: var(--bg-high);
|
|
border: var(--border-width-emphasis) solid rgba(192, 132, 252, 0.4);
|
|
box-shadow:
|
|
0 0 0 2px var(--violet-500),
|
|
3px 3px 0 var(--red-500),
|
|
-3px -3px 0 var(--cyan-500),
|
|
6px 12px 24px rgba(168, 85, 247, 0.4),
|
|
-6px -6px 18px rgba(6, 182, 212, 0.25),
|
|
0 16px 32px rgba(0, 0, 0, 0.5);
|
|
|
|
/* Subtle pulse animation - simple but effective */
|
|
animation: power-pulse 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes power-pulse {
|
|
0%, 100% {
|
|
box-shadow:
|
|
0 0 0 2px var(--violet-500),
|
|
3px 3px 0 var(--red-500),
|
|
-3px -3px 0 var(--cyan-500),
|
|
6px 12px 24px rgba(168, 85, 247, 0.4),
|
|
-6px -6px 18px rgba(6, 182, 212, 0.25),
|
|
0 16px 32px rgba(0, 0, 0, 0.5);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 0 0 2px var(--violet-500),
|
|
4px 4px 0 var(--red-500),
|
|
-4px -4px 0 var(--cyan-500),
|
|
8px 16px 28px rgba(168, 85, 247, 0.5),
|
|
-8px -8px 22px rgba(6, 182, 212, 0.3),
|
|
0 20px 40px rgba(0, 0, 0, 0.6);
|
|
}
|
|
}
|
|
|
|
.card-light {
|
|
background: var(--bg-solid-light);
|
|
color: var(--text-inverse);
|
|
border: var(--border-width) solid var(--gray-200);
|
|
box-shadow:
|
|
0 0 0 1px var(--gray-200),
|
|
2px 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.card-light h2,
|
|
.card-light h3,
|
|
.card-light h4,
|
|
.card-light h5,
|
|
.card-light h6 {
|
|
color: var(--violet-700);
|
|
}
|
|
|
|
.card-light p,
|
|
.card-light li {
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
/* ===== BUTTON SYSTEM ===== */
|
|
.btn {
|
|
display: inline-block;
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
font-weight: 500;
|
|
padding: var(--space-sm) var(--space-lg);
|
|
border: var(--border-width-emphasis) solid;
|
|
border-radius: var(--radius-md);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-violet {
|
|
background: var(--violet-500);
|
|
border-color: var(--violet-700);
|
|
color: white;
|
|
box-shadow:
|
|
1px 1px 0 var(--red-700),
|
|
-1px -1px 0 var(--cyan-700),
|
|
2px 4px 8px rgba(168, 85, 247, 0.4);
|
|
}
|
|
|
|
.btn-violet:hover {
|
|
box-shadow:
|
|
2px 2px 0 var(--red-600),
|
|
-2px -2px 0 var(--cyan-600),
|
|
4px 8px 16px rgba(168, 85, 247, 0.5);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
border-color: var(--cyan-500);
|
|
color: var(--cyan-300);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: rgba(6, 182, 212, 0.1);
|
|
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
|
|
}
|
|
|
|
/* ===== BADGE SYSTEM ===== */
|
|
.badge {
|
|
display: inline-block;
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
padding: var(--space-xs) var(--space-sm);
|
|
border: var(--border-width) solid;
|
|
border-radius: var(--radius-sm);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.badge-violet {
|
|
background: rgba(168, 85, 247, 0.15);
|
|
border-color: var(--violet-500);
|
|
color: var(--violet-300);
|
|
}
|
|
|
|
.badge-cyan {
|
|
background: rgba(6, 182, 212, 0.15);
|
|
border-color: var(--cyan-500);
|
|
color: var(--cyan-300);
|
|
}
|
|
|
|
.badge-gold {
|
|
background: rgba(234, 179, 8, 0.15);
|
|
border-color: var(--gold-500);
|
|
color: var(--gold-300);
|
|
}
|
|
|
|
/* ===== TABLE SYSTEM ===== */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--text-sm);
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
th {
|
|
text-align: left;
|
|
font-weight: 600;
|
|
padding: var(--space-sm) var(--space-md);
|
|
border-bottom: var(--border-width-emphasis) solid var(--violet-500);
|
|
color: var(--violet-300);
|
|
}
|
|
|
|
td {
|
|
padding: var(--space-sm) var(--space-md);
|
|
border-bottom: var(--border-width) solid rgba(192, 132, 252, 0.2);
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* ===== ALERT SYSTEM ===== */
|
|
.alert {
|
|
padding: var(--space-md) var(--space-lg);
|
|
border-left: var(--border-width-emphasis) solid;
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
.alert-info {
|
|
background: rgba(6, 182, 212, 0.1);
|
|
border-color: var(--cyan-500);
|
|
box-shadow:
|
|
1px 1px 0 var(--cyan-700),
|
|
2px 4px 8px rgba(6, 182, 212, 0.2);
|
|
}
|
|
|
|
.alert-power {
|
|
background: rgba(168, 85, 247, 0.1);
|
|
border-color: var(--violet-500);
|
|
box-shadow:
|
|
1px 1px 0 var(--red-700),
|
|
-1px -1px 0 var(--cyan-700),
|
|
2px 4px 8px rgba(168, 85, 247, 0.3);
|
|
}
|
|
|
|
/* ===== UTILITY CLASSES ===== */
|
|
.text-center { text-align: center; }
|
|
.mt-md { margin-top: var(--space-md); }
|
|
.mt-lg { margin-top: var(--space-lg); }
|
|
.mb-md { margin-bottom: var(--space-md); }
|
|
.mb-lg { margin-bottom: var(--space-lg); }
|
|
|
|
/* ===== HORIZONTAL DIVIDER ===== */
|
|
hr {
|
|
border: none;
|
|
height: 1px;
|
|
background: linear-gradient(to right,
|
|
transparent,
|
|
var(--violet-500),
|
|
var(--cyan-500),
|
|
transparent);
|
|
margin: var(--space-2xl) 0;
|
|
}
|
|
|
|
/* ===== DOCUMENTATION STYLES ===== */
|
|
.color-demo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.color-swatch {
|
|
width: 80px;
|
|
height: 80px;
|
|
border: var(--border-width) solid rgba(192, 132, 252, 0.3);
|
|
border-radius: var(--radius-md);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.depth-demo {
|
|
height: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-2xl);
|
|
font-weight: 700;
|
|
border-radius: var(--radius-lg);
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
|
|
<!-- HEADER -->
|
|
<header class="text-center mb-lg">
|
|
<h1>Prismatic Storm Dragon</h1>
|
|
<p style="font-size: var(--text-xl); color: var(--text-secondary);">
|
|
A design system where depth emerges from chromatic light
|
|
</p>
|
|
</header>
|
|
|
|
<hr>
|
|
|
|
<!-- DISTINCTIVE CHOICE EXPLANATION -->
|
|
<section class="mb-lg">
|
|
<div class="card-powerful">
|
|
<h2>Distinctive Choice: Multi-Layer Chromatic Depth</h2>
|
|
|
|
<p>This design system makes one bold distinctive choice that defines its visual character. Rather than creating depth through traditional gray drop shadows, we use <strong>multi-layer chromatic depth</strong>. This technique stacks multiple colored box-shadows in complementary hues, creating a prismatic effect that suggests both technical precision and elemental power.</p>
|
|
|
|
<p>The approach draws from split-complementary color theory. Our primary color is violet, positioned at approximately 270 degrees on the color wheel. The split complements are red-orange (at approximately 30 degrees) and cyan (at approximately 180 degrees). When these colors layer with slight offsets, they create a chromatic aberration effect similar to what you might see in optical phenomena like light refracting through storm clouds or shimmering across dragon scales.</p>
|
|
|
|
<h3 class="mt-lg">The Psychology of Layered Color</h3>
|
|
|
|
<p>Traditional drop shadows use neutral gray or black with transparency, creating depth through luminosity alone. This works effectively but feels flat and utilitarian. Chromatic depth adds another dimension by introducing color relationships. The violet-red-cyan trinity creates visual tension and harmony simultaneously. Violet and cyan are cool colors that recede visually, while red-orange advances, creating a push-pull effect that makes surfaces feel more dimensional.</p>
|
|
|
|
<p>The effect also carries symbolic weight. Prismatic light has been associated with power and magic across cultures, from rainbow serpents in indigenous Australian mythology to the aurora borealis in northern European folklore. Dragons, traditionally depicted with iridescent scales that shift in color, embody this prismatic quality. By building this chromatic layering into the core design system, we create an aesthetic that feels both modern and mythologically resonant.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CHROMATIC DEPTH DEMONSTRATION -->
|
|
<section class="mb-lg">
|
|
<h2>The Chromatic System in Action</h2>
|
|
|
|
<div class="grid grid-3">
|
|
<div class="card">
|
|
<div class="depth-demo" style="
|
|
background: var(--bg-elevated);
|
|
border: var(--border-width) solid rgba(192, 132, 252, 0.2);
|
|
box-shadow:
|
|
0 0 0 1px var(--violet-900),
|
|
1px 1px 0 var(--red-900),
|
|
-1px -1px 0 var(--cyan-900),
|
|
2px 4px 8px rgba(168, 85, 247, 0.15),
|
|
-2px -2px 6px rgba(6, 182, 212, 0.1);
|
|
">Standard</div>
|
|
<p style="font-size: var(--text-sm); color: var(--text-secondary);">
|
|
Basic cards use subtle chromatic layers. Notice the slight red shift to the bottom-right and cyan shift to the top-left, creating gentle dimensionality.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="depth-demo" style="
|
|
background: var(--bg-high);
|
|
border: var(--border-width) solid rgba(192, 132, 252, 0.3);
|
|
box-shadow:
|
|
0 0 0 1px var(--violet-700),
|
|
2px 2px 0 var(--red-700),
|
|
-2px -2px 0 var(--cyan-700),
|
|
4px 8px 16px rgba(168, 85, 247, 0.25),
|
|
-4px -4px 12px rgba(6, 182, 212, 0.15),
|
|
0 12px 24px rgba(0, 0, 0, 0.4);
|
|
">Elevated</div>
|
|
<p style="font-size: var(--text-sm); color: var(--text-secondary);">
|
|
Elevated cards intensify the effect with larger offsets and more saturated colors, creating stronger separation from the background.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="depth-demo card-powerful" style="
|
|
background: var(--bg-high);
|
|
margin-bottom: 0;
|
|
">Powerful</div>
|
|
<p style="font-size: var(--text-sm); color: var(--text-secondary);">
|
|
Powerful cards maximize the chromatic effect and add a subtle breathing animation, suggesting contained energy. Watch it pulse.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-lg">
|
|
<h3>Technical Implementation</h3>
|
|
<p class="mb-md">The chromatic depth effect is achieved through carefully ordered box-shadows. Each shadow serves a specific purpose in building the overall effect. Understanding the layering helps you implement and customize the technique.</p>
|
|
|
|
<pre><code>/* Chromatic depth anatomy */
|
|
box-shadow:
|
|
/* Inner glow: defines the object's edge */
|
|
0 0 0 1px var(--violet-900),
|
|
|
|
/* Color shifts: create the prismatic effect */
|
|
1px 1px 0 var(--red-900), /* Red shifts down-right */
|
|
-1px -1px 0 var(--cyan-900), /* Cyan shifts up-left */
|
|
|
|
/* Colored diffusion: depth and atmosphere */
|
|
2px 4px 8px rgba(168, 85, 247, 0.15), /* Violet depth */
|
|
-2px -2px 6px rgba(6, 182, 212, 0.1); /* Cyan ambient light */</code></pre>
|
|
|
|
<p class="mt-md">The order matters significantly. Shadows are rendered from last to first in the list, meaning the bottom shadow appears on top. We start with the inner glow to define edges, then add the chromatic shifts, and finally layer the diffused colored shadows that create ambient atmosphere.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<hr>
|
|
|
|
<!-- COLOR SYSTEM -->
|
|
<section class="mb-lg">
|
|
<h2>Color Palette</h2>
|
|
|
|
<div class="card">
|
|
<p class="mb-md">The color system is built on split-complementary harmony. Violet serves as the primary power color, anchoring the palette. Red-orange and cyan split the complement, creating dynamic tension. Gold adds warmth and emphasizes important elements without fighting for attention.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-2 mt-lg">
|
|
<div class="card">
|
|
<h4>Violet Family</h4>
|
|
<div class="color-demo">
|
|
<div class="color-swatch" style="background: #c084fc;"></div>
|
|
<div>
|
|
<h5>Violet 300</h5>
|
|
<code>#c084fc</code>
|
|
<p style="font-size: var(--text-sm); margin-top: var(--space-xs);">Primary headings, key interactions</p>
|
|
</div>
|
|
</div>
|
|
<div class="color-demo">
|
|
<div class="color-swatch" style="background: #a855f7;"></div>
|
|
<div>
|
|
<h5>Violet 500</h5>
|
|
<code>#a855f7</code>
|
|
<p style="font-size: var(--text-sm); margin-top: var(--space-xs);">Interactive elements, borders</p>
|
|
</div>
|
|
</div>
|
|
<div class="color-demo">
|
|
<div class="color-swatch" style="background: #7e22ce;"></div>
|
|
<div>
|
|
<h5>Violet 700</h5>
|
|
<code>#7e22ce</code>
|
|
<p style="font-size: var(--text-sm); margin-top: var(--space-xs);">Strong accents, depth layers</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h4>Complementary Colors</h4>
|
|
<div class="color-demo">
|
|
<div class="color-swatch" style="background: #f43f5e;"></div>
|
|
<div>
|
|
<h5>Red 500</h5>
|
|
<code>#f43f5e</code>
|
|
<p style="font-size: var(--text-sm); margin-top: var(--space-xs);">Heat, intensity, chromatic shift</p>
|
|
</div>
|
|
</div>
|
|
<div class="color-demo">
|
|
<div class="color-swatch" style="background: #06b6d4;"></div>
|
|
<div>
|
|
<h5>Cyan 500</h5>
|
|
<code>#06b6d4</code>
|
|
<p style="font-size: var(--text-sm); margin-top: var(--space-xs);">Cool energy, secondary interactions</p>
|
|
</div>
|
|
</div>
|
|
<div class="color-demo">
|
|
<div class="color-swatch" style="background: #eab308;"></div>
|
|
<div>
|
|
<h5>Gold 500</h5>
|
|
<code>#eab308</code>
|
|
<p style="font-size: var(--text-sm); margin-top: var(--space-xs);">Emphasis, prismatic accent</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr>
|
|
|
|
<!-- COMPONENT EXAMPLES -->
|
|
<section class="mb-lg">
|
|
<h2>Component Library</h2>
|
|
|
|
<div class="grid grid-2">
|
|
<div class="card-elevated">
|
|
<h3>Interactive Elements</h3>
|
|
<button class="btn btn-violet">Primary Action</button>
|
|
<button class="btn btn-outline mt-md">Secondary Action</button>
|
|
<p class="mt-lg" style="font-size: var(--text-sm); color: var(--text-secondary);">
|
|
Buttons inherit the chromatic depth effect, with enhanced layers appearing on hover. The interaction is subtle but satisfying, providing tactile feedback through visual shifts.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-elevated">
|
|
<h3>Status Indicators</h3>
|
|
<span class="badge badge-violet">Power</span>
|
|
<span class="badge badge-cyan">Energy</span>
|
|
<span class="badge badge-gold">Prismatic</span>
|
|
<p class="mt-lg" style="font-size: var(--text-sm); color: var(--text-secondary);">
|
|
Badges use minimal chromatic effects to avoid visual clutter, focusing on clear categorical communication through color and typography.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-lg">
|
|
<h3>Data Presentation</h3>
|
|
<p class="mb-md">Tables maintain the chromatic vocabulary through colored borders and subtle background treatments.</p>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Color</th>
|
|
<th>Function</th>
|
|
<th>Chromatic Role</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Violet</td>
|
|
<td>Primary power</td>
|
|
<td>Anchors the palette, creates foundation</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Red-Orange</td>
|
|
<td>Heat & intensity</td>
|
|
<td>Warm shift, creates forward motion</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cyan</td>
|
|
<td>Cool energy</td>
|
|
<td>Cold shift, creates receding depth</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Gold</td>
|
|
<td>Accent</td>
|
|
<td>Prismatic highlight, draws focus</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<hr>
|
|
|
|
<!-- IMPLEMENTATION GUIDE -->
|
|
<section class="mb-lg">
|
|
<h2>Implementation Guide</h2>
|
|
|
|
<div class="card-light">
|
|
<h3>Creating Chromatic Depth</h3>
|
|
|
|
<p>The chromatic depth effect requires understanding color relationships and shadow layering. While it may seem complex at first, the pattern becomes intuitive once you grasp the underlying principles.</p>
|
|
|
|
<h4 class="mt-lg">Step One: Choose Your Colors</h4>
|
|
<p>Select a primary color and identify its split complements. This creates a triad with built-in tension and harmony. For this system, violet (270°) pairs with red-orange (30°) and cyan (180°). These colors are far enough apart to create contrast but close enough to feel cohesive.</p>
|
|
|
|
<h4 class="mt-lg">Step Two: Layer Your Shadows</h4>
|
|
<p>Build the effect in layers, starting with edge definition and ending with atmospheric glow. Each layer serves a specific purpose. The inner glow provides crisp edges. The chromatic shifts create the prismatic aberration. The colored diffusion adds depth and atmosphere.</p>
|
|
|
|
<h4 class="mt-lg">Step Three: Balance the Intensity</h4>
|
|
<p>Not every element needs maximum chromatic depth. Use the effect strategically to create hierarchy. Standard cards use subtle shifts. Elevated cards intensify the effect. Powerful elements maximize it and may add animation.</p>
|
|
|
|
<div class="alert-power mt-lg">
|
|
<strong>Design Principle:</strong> The chromatic depth effect works best when it feels inherent to the design rather than applied as decoration. Build it into your core card and surface components, then vary the intensity based on hierarchy and importance.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-lg">
|
|
<h3>Animation Philosophy</h3>
|
|
|
|
<p>This system embraces restraint in animation. Movement exists to communicate state changes or draw attention to important interactions, not to create spectacle. The powerful card pulse animation demonstrates this principle. It breathes slowly, taking four seconds for a complete cycle. The effect is almost subliminal—you might not consciously notice it, but it registers as aliveness and contained power.</p>
|
|
|
|
<p>When implementing animations, favor subtle changes in shadow depth, small translations, or gentle opacity shifts over dramatic transformations. The goal is to enhance the chromatic depth system, not compete with it. Let the layered colors do the heavy visual lifting while animations provide gentle accents.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ALERTS DEMONSTRATION -->
|
|
<section class="mb-lg">
|
|
<h2>Alert Components</h2>
|
|
|
|
<div class="alert-info">
|
|
<strong>Information:</strong> Informational alerts use cyan as their primary color, creating calm, approachable messaging with subtle chromatic reinforcement along the border.
|
|
</div>
|
|
|
|
<div class="alert-power mt-md">
|
|
<strong>Power Notice:</strong> Important alerts emphasize the full chromatic depth effect, using violet as the primary color with red and cyan shifts creating urgency through visual weight rather than alarming color choices.
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="card-powerful text-center" style="padding: var(--space-2xl);">
|
|
<h2>Prismatic Storm Dragon</h2>
|
|
<p class="mt-md" style="color: var(--text-secondary);">
|
|
Where complementary colors layer into elemental depth
|
|
</p>
|
|
</footer>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|