Vercel Angular Material Theme

Clean black-and-white Product design with sharp contrast and minimal chrome.

Live preview

About this theme

A Vercel-inspired Material 3 palette built for product UIs that feel crisp and intentional. Neutral surfaces carry the layout; primary accents stay restrained so content and controls stay readable.

Light: Light mode leans on bright surfaces and soft outlines so dense dashboards stay calm without looking washed out.

Dark: Dark mode keeps deep neutrals and clear on-surface text — close to the high-contrast look of modern shipping dashboards.

Customize the theme

Theme SCSS

@use '@angular/material' as mat;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap');

html {
  color-scheme: light dark;
  @include mat.theme(
    (
      color: mat.$violet-palette,
      typography: (
        plain-family: 'Inter',
        brand-family: 'Inter',
        bold-weight: 700,
        medium-weight: 500,
        regular-weight: 400
      ),
      density: 0
    )
  );

  @include mat.theme-overrides(
    (
      primary: light-dark(#000000, #f9f9f9),
      'on-primary': light-dark(#f9f9f9, #5f5f5f),
      'primary-container': light-dark(#ebebeb, #a0a0a0),
      'on-primary-container': light-dark(#575757, #232323),
      secondary: light-dark(#5e5f5f, #c6c6c6),
      'on-secondary': light-dark(#f9f9f9, #3f4041),
      'secondary-container': light-dark(#e2e2e2, #3a3c3c),
      'on-secondary-container': light-dark(#505252, #bfbfbf),
      tertiary: light-dark(#5e5f5f, #f9f9f9),
      'on-tertiary': light-dark(#f9f9f9, #5e5f5f),
      'tertiary-container': light-dark(#ffffff, #ebebeb),
      'on-tertiary-container': light-dark(#616263, #555757),
      error: light-dark(#bb1b1b, #ff7164),
      'on-error': light-dark(#fff7f6, #4a0002),
      'error-container': light-dark(#fe4e44, #ac0c12),
      'on-error-container': light-dark(#570003, #ffb8b0),
      surface: light-dark(#ffffff, #0d0e0f),
      'on-surface': light-dark(#323333, #e6e5e5),
      'on-surface-variant': light-dark(#5e5f5f, #ababab),
      'surface-container': light-dark(#efeded, #191a1a),
      'surface-container-high': light-dark(#e9e8e8, #1f2020),
      'surface-container-highest': light-dark(#e3e2e2, #252626),
      'surface-container-low': light-dark(#f4f3f3, #121414),
      'surface-container-lowest': light-dark(#ffffff, #000000),
      'surface-bright': light-dark(#faf9f9, #2b2c2c),
      'surface-dim': light-dark(#dbdad9, #0d0e0f),
      'surface-variant': light-dark(#e3e2e2, #252626),
      'surface-tint': light-dark(#5f5f5f, #f9f9f9),
      'inverse-surface': light-dark(#0d0e0f, #faf9f9),
      'inverse-on-surface': light-dark(#9d9d9d, #545555),
      'inverse-primary': light-dark(#ffffff, #5f5f5f),
      outline: light-dark(#7a7b7b, #757575),
      'outline-variant': light-dark(#b2b2b2, #474848),
      background: light-dark(#faf9f9, #0d0e0f),
      'on-background': light-dark(#323333, #e6e5e5),
      scrim: light-dark(#000000, #000000),
      shadow: light-dark(#000000, #000000),
    )
  );

  @include mat.button-overrides(
    (
      'outlined-container-height': 34px,
      'text-horizontal-padding': 15px,
      'tonal-container-height': 34px,
      'filled-horizontal-padding': 15px,
      'tonal-horizontal-padding': 15px,
      'text-container-height': 34px,
      'protected-horizontal-padding': 15px,
      'outlined-container-shape': 8px,
      'protected-container-height': 34px,
      'outlined-horizontal-padding': 15px,
      'filled-container-height': 34px,
      'protected-container-shape': 8px,
      'filled-container-shape': 8px,
      'tonal-container-shape': 8px,
      'text-container-shape': 8px,
    )
  );

  @include mat.card-overrides(
    (
      'outlined-outline-width': 1px,
      'outlined-container-color': var(--mat-sys-surface-container-lowest),
    )
  );

  @include mat.form-field-overrides(
    (
      'container-vertical-padding': 7px,
      'filled-with-label-container-padding-bottom': 8px,
      'filled-with-label-container-padding-top': 8px,
      'container-height': 16px,
    )
  );

  @include mat.list-overrides(
    (
      'list-item-one-line-container-height': 36px,
      'active-indicator-shape': 8px,
      'list-item-leading-icon-size': 19px,
      'list-item-leading-icon-end-space': '12px',
    )
  );

  @include mat.select-overrides(
    (
      'arrow-transform': 'down',
    )
  );

  @include mat.sidenav-overrides(
    (
      'container-width': '250px',
      'content-background-color': var(--mat-sys-surface-container-lowest),
    )
  );

  @include mat.toolbar-overrides(
    (
      'container-background-color': var(--mat-sys-surface-container-lowest),
    )
  );
}