SimpliFI

Branding

Color scheme

Pick a brand color. See it as a light and dark design system, check contrast, and copy the CSS into a repo.

Light

Product name

Body text sits on the background. It should stay readable at a glance.

Secondary text for captions, SKUs, and timestamps.

A surface, such as a card or a field.

ContinueText link
Email address
In stockLow stockOut of stock

Dark

Product name

Body text sits on the background. It should stay readable at a glance.

Secondary text for captions, SKUs, and timestamps.

A surface, such as a card or a field.

ContinueText link
Email address
In stockLow stockOut of stock

Scale

  • 50

    #f8f2ff

  • 100

    #f2e5ff

  • 200

    #e5d1fb

  • 300

    #d3b5f1

  • 400

    #ba95de

  • 500

    #a077c5

  • 600

    #855ca8

  • 700

    #6c468d

  • 800

    #543370

  • 900

    #3c2252

  • 950

    #251235

Contrast

Body text and button labels need 4.5:1. A pair between 3:1 and 4.5:1 is only enough for large text. The button color itself needs 3:1 against the background.

Checks that do not pass — light: 1, dark: 0.

  • Text on background15.73:1Pass
  • Secondary text on background6.60:1Pass
  • Text on surface17.26:1Pass
  • Label on button5.27:1Pass
  • Link on background6.60:1Pass
  • Button on background2.98:1Fail
  • Label on success5.38:1Pass
  • Label on warning11.54:1Pass
  • Label on danger6.57:1Pass

Export

:root {
  --background: #f8f2ff;
  --surface: #ffffff;
  --foreground: #251235;
  --muted: #6c468d;
  --border: #e5d1fb;
  --primary: #a67dcc;
  --primary-foreground: #1c1b19;
  --accent: #6c468d;
  --success: #157a45;
  --success-foreground: #ffffff;
  --warning: #f5d061;
  --warning-foreground: #1c1b19;
  --danger: #b42318;
  --danger-foreground: #ffffff;
  --brand-50: #f8f2ff;
  --brand-100: #f2e5ff;
  --brand-200: #e5d1fb;
  --brand-300: #d3b5f1;
  --brand-400: #ba95de;
  --brand-500: #a077c5;
  --brand-600: #855ca8;
  --brand-700: #6c468d;
  --brand-800: #543370;
  --brand-900: #3c2252;
  --brand-950: #251235;
}

.dark {
  --background: #251235;
  --surface: #3c2252;
  --foreground: #f8f2ff;
  --muted: #d3b5f1;
  --border: #543370;
  --primary: #a67dcc;
  --primary-foreground: #1c1b19;
  --accent: #d3b5f1;
  --success: #157a45;
  --success-foreground: #ffffff;
  --warning: #f5d061;
  --warning-foreground: #1c1b19;
  --danger: #b42318;
  --danger-foreground: #ffffff;
}

Cover image →Design & prioritisation →