daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Wireframe palette + font foundation: navy/green/off-white PaletteLight, Cormorant Garamond + Geist Mono + DM Sans, retire Bodoni Moda

Browse Source
This commit is contained in:
Daniel Harvey
2026-05-17 21:20:06 -04:00
parent 7d059da9ca
commit 144f7c7527
3 changed files with 98 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftWeb/Components/App.razor
+1 -3
View File
@@ -8,9 +8,7 @@
<base href="/" />
<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=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600;6..96,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Geist+Mono:wght@300;400;500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;1,9..40,300&display=swap" rel="stylesheet">
<link href="_@Assets["content/MudBlazor.ThemeManager/MudBlazorThemeManager.css"]" rel="stylesheet" />
<link href=@Assets["_content/MudBlazor/MudBlazor.min.css"] rel="stylesheet" />
<link rel="stylesheet" href="@Assets["DeepDrftWeb.styles.css"]"/>
DeepDrftWeb/wwwroot/styles/deepdrft-styles.css
+49 -28
View File
@@ -4,20 +4,39 @@
1. CSS VARIABLES - Theme System
============================================================================= */
/* Light Theme (Charleston in the Day) */
/* Light theme - wireframe palette (navy / green / warm off-white) */
:root {
/* Core Palette */
--deepdrft-primary: #1A1A1A;
--deepdrft-secondary: #B8623D;
--deepdrft-tertiary: #2A7B8C;
--deepdrft-quaternary: #D4A556;
--deepdrft-quinary: #3D5A47;
--deepdrft-senary: #6B4C6A;
/* Wireframe tokens - source of truth */
--deepdrft-navy: #0D1B2A;
--deepdrft-navy-mid: #162437;
--deepdrft-green: #1A3C34;
--deepdrft-green-light: #2A5C4F;
--deepdrft-green-accent: #3D7A68;
--deepdrft-muted: #8A9BB0;
--deepdrft-white: #FAFAF8;
--deepdrft-border: rgba(13, 27, 42, 0.10);
--deepdrft-border-green: rgba(26, 60, 52, 0.20);
/* Wireframe font stack */
--deepdrft-font-display: "Cormorant Garamond", Georgia, serif;
--deepdrft-font-mono: "Geist Mono", monospace;
--deepdrft-font-body: "DM Sans", sans-serif;
/* Legacy palette aliases - mapped onto wireframe tokens.
Existing utility classes (.deepdrft-card-*, .deepdrft-chip-*, .deepdrft-text-*)
still reference these names; they will be retired in Phase 0.3/0.4 when
Home.razor is rewritten. Until then, alias to the closest wireframe colour. */
--deepdrft-primary: var(--deepdrft-navy);
--deepdrft-secondary: var(--deepdrft-green);
--deepdrft-tertiary: var(--deepdrft-green-accent);
--deepdrft-quaternary: var(--deepdrft-muted);
--deepdrft-quinary: var(--deepdrft-green-light);
--deepdrft-senary: var(--deepdrft-navy-mid);
/* Surfaces */
--deepdrft-surface: #FDFBF7;
--deepdrft-background: #F5F2EC;
--deepdrft-surface-alpha: rgba(253, 251, 247, 0.9);
--deepdrft-surface: var(--deepdrft-white);
--deepdrft-background: var(--deepdrft-white);
--deepdrft-surface-alpha: rgba(250, 250, 248, 0.88);
/* Theme-aware aliases */
--theme-primary: var(--deepdrft-primary);
@@ -27,18 +46,17 @@
--theme-quinary: var(--deepdrft-quinary);
--theme-senary: var(--deepdrft-senary);
--theme-surface: var(--deepdrft-surface);
--theme-surface-soft: #4A4A4A;
--theme-surface-soft: var(--deepdrft-muted);
/* Gradient colors */
--gradient-base: #FDFBF7;
--gradient-accent: #1A1A1A;
--gradient-warm: #B8623D;
--gradient-light: #D4A556;
--gradient-base: var(--deepdrft-white);
--gradient-accent: var(--deepdrft-navy);
--gradient-warm: var(--deepdrft-green);
--gradient-light: var(--deepdrft-green-accent);
/* Fonts */
--font-hero: "Bodoni Moda", serif;
--font-headers: "Cormorant", serif;
--font-body: "DM Sans", sans-serif;
/* Legacy font aliases retired in Phase 0.1 — all consumers now use --deepdrft-font-*.
Palette aliases (--deepdrft-primary, --theme-*, etc.) remain; they still have
consumers and are scheduled for retirement in Phase 0.3/0.4. */
}
/* Dark Theme (Lowcountry Summer Nights) */
@@ -121,7 +139,7 @@
/* Hero text */
h1, .deepdrft-text-hero {
font-family: var(--font-hero);
font-family: var(--deepdrft-font-display);
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
@@ -129,7 +147,7 @@ h1, .deepdrft-text-hero {
/* Headers */
h2, h3, h4, h5, h6,
.deepdrft-text-subtitle {
font-family: var(--font-headers);
font-family: var(--deepdrft-font-display);
}
.deepdrft-text-subtitle {
@@ -141,7 +159,7 @@ h2, h3, h4, h5, h6,
body, p, span, div,
.deepdrft-text-description,
.deepdrft-text-readable {
font-family: var(--font-body);
font-family: var(--deepdrft-font-body);
}
.deepdrft-text-description {
@@ -153,16 +171,19 @@ body, p, span, div,
.deepdrft-text-readable { line-height: 1.6; }
/* MudBlazor font overrides */
.mud-typography-h1 { font-family: var(--font-hero) !important; }
.mud-typography-h1,
.mud-typography-h2, .mud-typography-h3, .mud-typography-h4,
.mud-typography-h5, .mud-typography-h6,
.mud-button-text, .mud-navlink-text, .mud-appbar-content {
font-family: var(--font-headers) !important;
.mud-navlink-text, .mud-appbar-content {
font-family: var(--deepdrft-font-display) !important;
}
.mud-button-text,
.mud-typography-caption, .mud-typography-overline {
font-family: var(--deepdrft-font-mono) !important;
}
.mud-typography-body1, .mud-typography-body2,
.mud-typography-caption, .mud-typography-overline,
.mud-input-text, .mud-select-text, .mud-form-label {
font-family: var(--font-body) !important;
font-family: var(--deepdrft-font-body) !important;
}
/* =============================================================================