Bellthan brand standards for durable software products.

:root {
  --bellthan-ink: #101312;
  --bellthan-paper: #f8faf6;
  --bellthan-surface: #ffffff;
  --bellthan-muted: #59645f;
  --bellthan-line: #d9ded5;
  --bellthan-primary: #217d8f;
  --bellthan-secondary: #2f8f68;
  --bellthan-tertiary: #b97817;
  --bellthan-success: #23805c;
  --bellthan-error: #b74735;
  --bellthan-chrome: #17201d;

  --app-background: var(--bellthan-paper);
  --app-surface: var(--bellthan-surface);
  --app-text: var(--bellthan-ink);
  --app-muted: var(--bellthan-muted);
  --app-border: var(--bellthan-line);
  --app-action: var(--bellthan-primary);
}

using MudBlazor;
using MudBlazor.Utilities;

public static class BellthanTheme
{
    public static MudTheme Create() => new()
    {
        PaletteLight = new PaletteLight
        {
            Background = new MudColor("#f8faf6"),
            Surface = new MudColor("#ffffff"),
            TextPrimary = new MudColor("#101312"),
            TextSecondary = new MudColor("#59645f"),
            Primary = new MudColor("#217d8f"),
            Secondary = new MudColor("#2f8f68"),
            Tertiary = new MudColor("#b97817"),
            Success = new MudColor("#23805c"),
            Warning = new MudColor("#b97817"),
            Error = new MudColor("#b74735"),
            AppbarBackground = new MudColor("#17201d"),
            AppbarText = new MudColor("#f8faf6"),
            DrawerBackground = new MudColor("#17201d"),
            DrawerText = new MudColor("#f8faf6"),
            LinesDefault = new MudColor("#d9ded5"),
            LinesInputs = new MudColor("#d1d8cf"),
            Divider = new MudColor("#e1e7dd")
        },
        PaletteDark = new PaletteDark
        {
            Background = new MudColor("#101312"),
            Surface = new MudColor("#17201d"),
            TextPrimary = new MudColor("#f8faf6"),
            TextSecondary = new MudColor("#b8c3bd"),
            Primary = new MudColor("#67c7d4"),
            Secondary = new MudColor("#63d2a1"),
            Tertiary = new MudColor("#f2b84b"),
            Success = new MudColor("#58be8f"),
            Warning = new MudColor("#f2b84b"),
            Error = new MudColor("#e36d5a"),
            LinesDefault = new MudColor("#2b3430"),
            LinesInputs = new MudColor("#37413d")
        },
        LayoutProperties = new LayoutProperties
        {
            DefaultBorderRadius = "8px",
            AppbarHeight = "60px",
            DrawerWidthLeft = "272px"
        }
    };
}

// MainLayout.razor
<MudThemeProvider Theme="_theme" IsDarkMode="_isDarkMode" />

@code {
    private readonly MudTheme _theme = BellthanTheme.Create();
    private bool _isDarkMode = true;
}

{
  "brand": "Bellthan",
  "font": {
    "ui": "Segoe UI Variable, Segoe UI, Inter, system-ui, sans-serif",
    "mono": "Cascadia Code, Consolas, Courier New, monospace"
  },
  "color": {
    "light": {
      "background": "#f8faf6",
      "surface": "#ffffff",
      "text": "#101312",
      "muted": "#59645f",
      "primary": "#217d8f",
      "secondary": "#2f8f68",
      "tertiary": "#b97817",
      "error": "#b74735"
    },
    "dark": {
      "background": "#101312",
      "surface": "#17201d",
      "text": "#f8faf6",
      "muted": "#b8c3bd",
      "primary": "#67c7d4",
      "secondary": "#63d2a1",
      "tertiary": "#f2b84b",
      "error": "#e36d5a"
    }
  }
}