From 144f7c7527f652576c7189c78bb408c0b3e8077e Mon Sep 17 00:00:00 2001 From: Daniel Harvey Date: Sun, 17 May 2026 21:20:06 -0400 Subject: [PATCH] Wireframe palette + font foundation: navy/green/off-white PaletteLight, Cormorant Garamond + Geist Mono + DM Sans, retire Bodoni Moda --- DeepDrftWeb.Client/Layout/MainLayout.razor | 79 +++++++++++-------- DeepDrftWeb/Components/App.razor | 4 +- .../wwwroot/styles/deepdrft-styles.css | 77 +++++++++++------- 3 files changed, 98 insertions(+), 62 deletions(-) diff --git a/DeepDrftWeb.Client/Layout/MainLayout.razor b/DeepDrftWeb.Client/Layout/MainLayout.razor index d9fd6b7..29df2ae 100644 --- a/DeepDrftWeb.Client/Layout/MainLayout.razor +++ b/DeepDrftWeb.Client/Layout/MainLayout.razor @@ -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 diff --git a/DeepDrftWeb/Components/App.razor b/DeepDrftWeb/Components/App.razor index 7ed2d2a..5d10bda 100644 --- a/DeepDrftWeb/Components/App.razor +++ b/DeepDrftWeb/Components/App.razor @@ -8,9 +8,7 @@ - - - + diff --git a/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css index 4a81580..1d74261 100644 --- a/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css +++ b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css @@ -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; } /* =============================================================================