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.Client/Layout/MainLayout.razor
+48 -31
View File
@@ -71,31 +71,48 @@
},
H1 = new H1Typography()
{
FontFamily = new[] {"Bodoni Moda", "serif"}
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
},
H2 = new H2Typography()
{
FontFamily = new[] {"Cormorant", "serif"}
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
},
H3 = new H3Typography()
{
FontFamily = new[] {"Cormorant", "serif"}
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
},
H4 = new H4Typography()
{
FontFamily = new[] {"Cormorant", "serif"}
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
},
// Extended to H5/H6 beyond spec — keeps heading hierarchy consistent in Cormorant Garamond
H5 = new H5Typography()
{
FontFamily = new[] {"Cormorant", "serif"}
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
},
H6 = new H6Typography()
{
FontFamily = new[] {"Cormorant", "serif"}
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
},
Subtitle1 = new Subtitle1Typography()
{
FontFamily = new[] {"Geist Mono", "monospace"}
},
Body1 = new Body1Typography()
{
FontFamily = new[] {"DM Sans", "sans-serif"}
},
Body2 = new Body2Typography()
{
FontFamily = new[] {"DM Sans", "sans-serif"}
},
Caption = new CaptionTypography()
{
FontFamily = new[] {"Geist Mono", "monospace"}
},
Button = new ButtonTypography()
{
FontFamily = new[] {"DM Sans", "sans-serif"}
FontFamily = new[] {"Geist Mono", "monospace"}
}
}
}
@@ -118,32 +135,32 @@
StateHasChanged();
}
// Charleston in the Day - Light Theme
// Inspired by Charleston's historic architecture: wrought iron, bronze, Atlantic coast
// Wireframe light palette - navy / green / warm off-white
private readonly PaletteLight _lightPalette = new()
{
Primary = "#1A1A1A", // Wrought iron black
Secondary = "#B8623D", // Burnished copper - warm orange bronze
Tertiary = "#2A7B8C", // Atlantic turquoise
Info = "#2196F3", // MudBlazor default blue (semantic)
Success = "#4CAF50", // MudBlazor default green (semantic)
Warning = "#FF9800", // MudBlazor default amber (semantic)
Error = "#F44336", // MudBlazor default red (semantic)
Black = "#1A1A1A", // Wrought iron black
White = "#FDFBF7", // Cream white (stucco)
Surface = "#FDFBF7", // Cream stucco surface
Background = "#F5F2EC", // Warm linen background
AppbarText = "#FDFBF7", // Cream text on dark appbar
AppbarBackground = "#1A1A1A", // Solid wrought iron appbar
DrawerBackground = "#F5F2EC", // Linen drawer
TextPrimary = "#1A1A1A", // Wrought iron text
TextSecondary = "#4A4A4A", // Softer iron text
GrayLight = "rgba(26,26,26,0.08)", // Light iron tint
GrayLighter = "rgba(26,26,26,0.04)", // Very light iron tint
GrayDefault = "rgba(26,26,26,0.15)", // Medium iron tint
GrayDark = "rgba(26,26,26,0.25)", // Darker iron tint
Divider = "rgba(26,26,26,0.12)", // Subtle divider lines
TableLines = "rgba(26,26,26,0.12)", // Table borders
Primary = "#0D1B2A", // Navy - text, buttons
PrimaryDarken = "#162437", // Navy-mid - hover, elevated surfaces
Secondary = "#1A3C34", // Deep green - italic emphasis
Tertiary = "#3D7A68", // Green-accent - interactive hovers/active/icons
Background = "#FAFAF8", // Warm off-white
BackgroundGray = "#F0F2F0", // Slight warm gray for contrast
Surface = "#FAFAF8",
AppbarBackground = "rgba(250,250,248,0.88)",
AppbarText = "#0D1B2A",
TextPrimary = "#0D1B2A",
TextSecondary = "#8A9BB0", // Muted - secondary text, nav at rest
TextDisabled = "rgba(13,27,42,0.38)",
ActionDefault = "#8A9BB0",
ActionDisabled = "rgba(13,27,42,0.26)",
ActionDisabledBackground = "rgba(13,27,42,0.12)",
Divider = "rgba(13,27,42,0.10)",
DividerLight = "rgba(13,27,42,0.06)",
TableLines = "rgba(13,27,42,0.10)",
LinesDefault = "rgba(13,27,42,0.10)",
LinesInputs = "rgba(13,27,42,0.30)",
OverlayLight = "rgba(250,250,248,0.5)",
OverlayDark = "rgba(13,27,42,0.5)",
// Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
};
// Lowcountry Summer Nights - Dark Theme
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;
}
/* =============================================================================