Update Mithral brand design tokens

2026-05-10 18:05:10 -04:00 · 2026-05-10 18:05:10 -04:00 · a158e4d507
commit a158e4d507
parent a09e678e41
5 changed files with 132 additions and 28 deletions
--- a/README.md
+++ b/README.md
@ -5,10 +5,18 @@ A consistent, arcane-inspired design system used across The Mithral Archive appl
 ## Core Palette

 - **Obsidian**: `#08090C` (Primary Background)
- **Mithral**: `#E2E8F0` (Primary Text / Silver)
- **Mithral Dim**: `#94A3B8` (Secondary Text)
- **Mithral Dark**: `#334155` (Borders / Muted)
- **Arcane Blue**: `#38BDF8` (Accent / Glow)
+- **Mithral**: `#FFFFFF` (Primary Text / Silver)
+- **Mithral Dim**: `rgba(255, 255, 255, 0.74)` (Secondary Text)
+- **Mithral Soft**: `rgba(255, 255, 255, 0.48)` (Quiet Labels)
+- **Mithral Dark**: `rgba(255, 255, 255, 0.22)` (Muted Lines)
+- **Arcane Blue**: `#A78BFA` (Purple Accent / Glow)
+
+## Surface Language
+
+- **Surface Card**: dark glass card surface used for panels and controls.
+- **Surface Card Hover**: slightly brighter glass surface for interactive hover states.
+- **Surface Glass**: translucent obsidian field for inputs and subtle overlays.
+- **Border Arcane**: low-opacity purple border for active/selected states.

 ## Typography

@ -41,5 +49,12 @@ Include `base.css` and `components.css` for standard animations, scrollbars, and
 - **.arcane-circle**: Rotating background rings.
 - **.ledger-row**: Interactive links with the "Mithral Vein" hover effect.
 - **.stat-card**: Glowing cards for display metrics.
+- **.glass-panel**: Portal-style glass card panel.
+- **.arcane-button**: Purple-accent uppercase action button.
+- **.eyebrow-rune**: Small uppercase decorative label.
 - **.portal-divider**: Ornamental dividers with gradient lines.
 - **.bg-noise**: Film grain overlay effect.
+
+## Notes
+
+The general design-system files have been aligned with the newer Portal-v2 brand language. Jellyfin/ElegantFin theme files are separate and should be updated independently.
--- a/base.css
+++ b/base.css
@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Inter:wght@300;400;500&family=JetBrains+Mono&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Inter:wght@300;400;500;700;800&family=JetBrains+Mono:wght@400;700&display=swap");

 * {
  margin: 0;
@ -12,10 +12,36 @@ body {
  font-family: var(--font-body);
  min-height: 100vh;
  line-height: 1.6;
+  position: relative;
+  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+  background:
+    radial-gradient(circle at 20% 15%, rgba(167, 139, 250, 0.10), transparent 35%),
+    radial-gradient(circle at 80% 20%, rgba(167, 139, 250, 0.08), transparent 38%),
+    radial-gradient(circle at 50% 55%, rgba(167, 139, 250, 0.06), transparent 42%),
+    linear-gradient(180deg, rgba(8, 9, 12, 0.98) 0%, rgba(8, 9, 12, 0.98) 100%);
+}
+
+a {
+  color: inherit;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
 /* Scrollbar */
 ::-webkit-scrollbar {
  width: 6px;
@ -35,6 +61,10 @@ body {
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spin-reverse { 100% { transform: rotate(-360deg); } }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
+@keyframes pulse-glow {
+  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 5px var(--pulse-color, var(--success)); }
+  50% { transform: scale(1.2); opacity: 0.7; box-shadow: 0 0 15px var(--pulse-color, var(--success)); }
+}

 /* Film grain overlay */
 .bg-noise::before {
--- a/components.css
+++ b/components.css
@ -8,7 +8,7 @@
  height: 120vw;
  max-width: 1400px;
  max-height: 1400px;
-  border: 1px solid rgba(56, 189, 248, 0.05);
+  border: 1px solid rgba(167, 139, 250, 0.06);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
@ -25,15 +25,15 @@

 .arcane-circle::before {
  width: 80%; height: 80%;
-  border: 1px dashed rgba(226, 232, 240, 0.03);
+  border: 1px dashed rgba(255, 255, 255, 0.04);
  animation: spin-reverse 80s linear infinite;
 }

 .arcane-circle::after {
  width: 60%; height: 60%;
-  border: 1px solid rgba(56, 189, 248, 0.02);
-  border-top-color: rgba(56, 189, 248, 0.1);
-  border-bottom-color: rgba(56, 189, 248, 0.1);
+  border: 1px solid rgba(167, 139, 250, 0.03);
+  border-top-color: rgba(167, 139, 250, 0.14);
+  border-bottom-color: rgba(167, 139, 250, 0.14);
 }

 .rune-marker {
@ -52,7 +52,7 @@
  justify-content: space-between;
  align-items: baseline;
  padding: 1.2rem 0;
-  border-bottom: 1px solid rgba(226, 232, 240, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: inherit;
  position: relative;
@ -76,7 +76,7 @@

 .ledger-row:hover {
  padding-left: 1.5rem;
-  background: linear-gradient(90deg, rgba(56, 189, 248, 0.03), transparent);
+  background: linear-gradient(90deg, rgba(167, 139, 250, 0.05), transparent);
 }

 /* Title & Header Text */
@ -91,11 +91,57 @@
  text-shadow: 0 0 20px var(--mithral-glow);
 }

+.eyebrow-rune {
+  color: var(--mithral-soft);
+  font-family: var(--font-rune);
+  font-size: 0.58rem;
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+}
+
+.glass-panel {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 24%),
+    var(--surface-card);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.06) inset,
+    0 16px 40px rgba(0, 0, 0, 0.18);
+}
+
+.arcane-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 42px;
+  padding: 0.75rem 1rem;
+  border: 1px solid rgba(167, 139, 250, 0.8);
+  border-radius: 4px;
+  background: var(--surface-card-hover);
+  color: var(--mithral);
+  font-family: var(--font-rune);
+  font-size: 0.78rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  text-decoration: none;
+  transition: all 0.25s ease;
+}
+
+.arcane-button:hover {
+  background: rgba(45, 40, 58, 0.98);
+  transform: translateY(-1px);
+  box-shadow: 0 0 22px rgba(167, 139, 250, 0.12);
+}
+
 /* Stat Cards */
 .stat-card {
-  background: var(--surface-card);
-  border: 1px solid var(--border-arcane);
-  border-radius: 4px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 24%),
+    var(--surface-card);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
  padding: 1.5rem 1rem;
  text-align: center;
  transition: all 0.3s ease;
@ -114,8 +160,8 @@

 .stat-card:hover {
  background: var(--surface-card-hover);
-  border-color: var(--arcane-blue);
-  box-shadow: 0 0 15px rgba(56, 189, 248, 0.15);
+  border-color: rgba(167, 139, 250, 0.48);
+  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.08);
  transform: translateY(-2px);
 }

@ -128,7 +174,7 @@
  display: flex;
  align-items: center;
  gap: 1rem;
-  color: var(--mithral-dim);
+  color: var(--mithral-dark);
  font-family: var(--font-rune);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
--- a/tailwind.preset.js
+++ b/tailwind.preset.js
@ -7,6 +7,7 @@ module.exports = {
        mithral: {
          DEFAULT: "var(--mithral)",
          dim: "var(--mithral-dim)",
+          soft: "var(--mithral-soft)",
          dark: "var(--mithral-dark)",
          glow: "var(--mithral-glow)",
        },
@ -17,9 +18,12 @@ module.exports = {
        surface: {
          card: "var(--surface-card)",
          "card-hover": "var(--surface-card-hover)",
+          glass: "var(--surface-glass)",
+          "glass-strong": "var(--surface-glass-strong)",
        },
        border: {
          arcane: "var(--border-arcane)",
+          subtle: "var(--border-subtle)",
        }
      },
      fontFamily: {
@ -32,6 +36,7 @@ module.exports = {
        "spin-reverse-slow": "spin-reverse 80s linear infinite",
        "reveal": "reveal 1s ease-out forwards",
        "pulse-dot": "pulse-dot 2s infinite",
+        "pulse-glow": "pulse-glow 2s infinite",
      },
      keyframes: {
        "spin-reverse": {
@ -43,6 +48,10 @@ module.exports = {
        "pulse-dot": {
          "0%, 100%": { opacity: "0.5", boxShadow: "0 0 5px var(--arcane-blue)" },
          "50%": { opacity: "1", boxShadow: "0 0 15px var(--arcane-blue)" },
+        },
+        "pulse-glow": {
+          "0%, 100%": { transform: "scale(1)", opacity: "1", boxShadow: "0 0 5px var(--pulse-color, var(--success))" },
+          "50%": { transform: "scale(1.2)", opacity: "0.7", boxShadow: "0 0 15px var(--pulse-color, var(--success))" },
        }
      }
    },
--- a/variables.css
+++ b/variables.css
@ -1,22 +1,26 @@
 :root {
  /* Colors */
  --obsidian: #08090C;
-  --mithral: #E2E8F0;
-  --mithral-dim: #94A3B8;
-  --mithral-dark: #334155;
-  --arcane-blue: #38BDF8;
-  --arcane-glow: rgba(56, 189, 248, 0.4);
-  --mithral-glow: rgba(226, 232, 240, 0.2);
+  --mithral: #FFFFFF;
+  --mithral-dim: rgba(255, 255, 255, 0.74);
+  --mithral-soft: rgba(255, 255, 255, 0.48);
+  --mithral-dark: rgba(255, 255, 255, 0.22);
+  --arcane-blue: #A78BFA;
+  --arcane-glow: rgba(167, 139, 250, 0.32);
+  --mithral-glow: rgba(255, 255, 255, 0.16);
  
  /* Status Colors */
  --success: #10B981;
-  --danger: #EF4444;
+  --danger: #ef4444;
  --warning: #F59E0B;

  /* Surfaces */
-  --surface-card: rgba(226, 232, 240, 0.02);
-  --surface-card-hover: rgba(56, 189, 248, 0.05);
-  --border-arcane: rgba(56, 189, 248, 0.1);
+  --surface-card: rgba(22, 20, 28, 0.88);
+  --surface-card-hover: rgba(30, 27, 38, 0.94);
+  --surface-glass: rgba(8, 9, 12, 0.66);
+  --surface-glass-strong: rgba(8, 9, 12, 0.86);
+  --border-arcane: rgba(167, 139, 250, 0.16);
+  --border-subtle: rgba(255, 255, 255, 0.08);

  /* Typography */
  --font-rune: 'Cinzel Decorative', serif;