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;
}
/* =============================================================================