Clarity Dashboard

by Nadia Petrova·Generated from prompt

clean modern systematic professional minimal

analogouscool

3.0(1)

Design Direction

Clean analytics dashboard with lots of whitespace, data-forward, blue-grey palette

Colour Strategy

analogous harmony from hue 215 with cool temperature

Typography Strategy

Urbanist headings paired with Red Hat Display body text

Colour Palette

primary

#5383c6

secondary

#665eba

accent

#974dcb

neutral

#888b91

success

#20c578

warning

#d48d11

error

#c52020

info

#205fc5

Typography

Heading

Urbanist, sans-serif

View on Google Fonts ↗

Body

Red Hat Display, sans-serif

View on Google Fonts ↗

Design is intelligence made visible

Great typography is the foundation of great design. The pairing of heading and body typefaces creates a visual hierarchy that guides the reader through content with clarity and purpose, while expressing personality at every level.

Spacing

2px base unit · compact density

2px

5px

10px

14px

19px

2xl

29px

3xl

38px

4xl

58px

Border radius

none

0px

4px

10px

18px

28px

full

9999px

Elevation

sunken

base

raised

floating

overlay

Shadows

low

0 1px 3px rgba(83, 131, 198, 0.08), 0 1px 2px rgba(83, 131, 198, 0.06)

mid

0 4px 6px -1px rgba(83, 131, 198, 0.1), 0 2px 4px -2px rgba(83, 131, 198, 0.08)

high

0 20px 25px -5px rgba(83, 131, 198, 0.12), 0 8px 10px -6px rgba(83, 131, 198, 0.08)

Texture

mesh · opacity 1 · normal blend

mesh · normal · 1

Grid

dense · 16 columns · 12px gutter · 16px margin · 1440px max

Columns16

Gutter12px

Margin16px

Max width1440px

Motion

Hover, click, and interact to see the motion tokens in action.

micro

50ms

Button press feedback

fast

100ms

Hover me

Colour & border transitions

normal

180ms

Toggles & state changes

slow

250ms

Panel content slides in at the slow duration - used for modals, drawers, and accordions.

glacial

400ms

Page transitions & loading states

Easings

General

Hover states, colour changes, most transitions

cubic-bezier(0.2, 0, 0, 1)

Enter

Elements appearing - modals, dropdowns, toasts

cubic-bezier(0, 0, 0.2, 1)

Exit

Elements leaving - dismissals, close animations

cubic-bezier(0.4, 0, 1, 1)

Bounce

Playful feedback - toggles, badges, confirmations

cubic-bezier(0.34, 1.56, 0.64, 1)

Spring

Physics-based - drag, gestures, elastic effects

cubic-bezier(0.22, 1.2, 0.36, 1)

Iconography

Icon style derived from the system's personality, mood, and visual tokens.

Recommended library

Radix Icons

Minimal, precise icons for component-driven design systems

Browse Radix Icons ↗

Also consider Material Symbols — Comprehensive icon system with variable weight and fill

Stroke weight

1.25px

Matches border width (1.5px)

Corner rounding

4px

Use for icon containers

Icon set preview (technical) — 1.25px stroke

Size scale

12px

16px

20px

24px

32px

On colour

primary

secondary

accent

muted

error

success

ComponentsPro

Component showcase is a Pro feature

Upgrade to see fully themed buttons, inputs, cards, badges, and more - all wired to this system's tokens.

Upgrade to Pro

PatternsPro

Patterns are a Pro feature

Upgrade to see fully themed form layouts, empty states, loading skeletons, and error handling - all built with this system's tokens.

Upgrade to Pro

Export

Code Tokens

:root {
  /* ─── Colors: Primary ─── */
  --color-primary-50: #f6f7f8;
  --color-primary-100: #eaedf0;
  --color-primary-200: #d4dce8;
  --color-primary-300: #abc2e3;
  --color-primary-400: #85a7d6;
  --color-primary-500: #5383c6;
  --color-primary-600: #3969ac;
  --color-primary-700: #2f568e;
  --color-primary-800: #344660;
  --color-primary-900: #2e343e;
  --color-primary-950: #1e2329;

  /* ─── Colors: Secondary ─── */
  --color-secondary-50: #f7f6f8;
  --color-secondary-100: #ebebef;
  --color-secondary-200: #d7d6e6;
  --color-secondary-300: #b4b0dd;
  --color-secondary-400: #928dce;
  --color-secondary-500: #665eba;
  --color-secondary-600: #4d45a1;
  --color-secondary-700: #3f3984;
  --color-secondary-800: #3b385c;
  --color-secondary-900: #302f3c;
  --color-secondary-950: #201f28;

  /* ─── Colors: Accent ─── */
  --color-accent-50: #f8f6f9;
  --color-accent-100: #eeeaf0;
  --color-accent-200: #e0d3e9;
  --color-accent-300: #cca8e6;
  --color-accent-400: #b581da;
  --color-accent-500: #974dcb;
  --color-accent-600: #7d34b2;
  --color-accent-700: #672a92;
  --color-accent-800: #4e3262;
  --color-accent-900: #372d3e;
  --color-accent-950: #251e2a;

  /* ─── Colors: Neutral ─── */
  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #ecedee;
  --color-neutral-200: #dddedf;
  --color-neutral-300: #c5c7c9;
  --color-neutral-400: #aaadb1;
  --color-neutral-500: #888b91;
  --color-neutral-600: #6e7277;
  --color-neutral-700: #5b5e62;
  --color-neutral-800: #47494d;
  --color-neutral-900: #333538;
  --color-neutral-950: #222325;

  /* ─── Colors: Semantic ─── */
  --color-success: #20c578;
  --color-success-light: #eff6f2;
  --color-warning: #d48d11;
  --color-warning-light: #f7f3ee;
  --color-error: #c52020;
  --color-error-light: #f6efef;
  --color-info: #205fc5;
  --color-info-light: #eff1f6;

  /* ─── Colors: Surface ─── */
  --color-background: #fafafa;
  --color-foreground: #17191c;
  --color-card: #FFFFFF;
  --color-card-foreground: #17191c;
  --color-muted: #f2f2f3;
  --color-muted-foreground: #61656b;
  --color-border: #e4e5e7;
  --color-input: #dfe0e2;
  --color-ring: #4781d1;

  /* ─── Typography ─── */
  --font-heading: Urbanist, sans-serif;
  --font-body: Red Hat Display, sans-serif;
  --font-mono: JetBrains Mono, monospace;

  /* ─── Spacing ─── */
  --space-lg: 14px;
  --space-md: 10px;
  --space-sm: 5px;
  --space-xl: 19px;
  --space-xs: 2px;
  --space-2xl: 29px;
  --space-3xl: 38px;
  --space-4xl: 58px;

  /* ─── Border Radius ─── */
  --radius-lg: 18px;
  --radius-md: 10px;
  --radius-sm: 4px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --radius-none: 0px;

  /* ─── Shadows ─── */
  --shadow-low: 0 1px 3px rgba(83, 131, 198, 0.08), 0 1px 2px rgba(83, 131, 198, 0.06);
  --shadow-mid: 0 4px 6px -1px rgba(83, 131, 198, 0.1), 0 2px 4px -2px rgba(83, 131, 198, 0.08);
  --shadow-high: 0 20px 25px -5px rgba(83, 131, 198, 0.12), 0 8px 10px -6px rgba(83, 131, 198, 0.08);

  /* ─── Motion ─── */
  --duration-micro: 50ms;
  --duration-fast: 100ms;
  --duration-normal: 180ms;
  --duration-slow: 250ms;
  --duration-glacial: 400ms;
  --easing-default: cubic-bezier(0.2, 0, 0, 1);
  --easing-entrance: cubic-bezier(0, 0, 0.2, 1);
  --easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-spring: cubic-bezier(0.22, 1.2, 0.36, 1);

  /* ─── Elevation ─── */
  --elevation-sunken: #eff0f0;
  --elevation-base: #fafafa;
  --elevation-raised: #FFFFFF;
  --elevation-floating: #FFFFFF;
  --elevation-overlay: #fcfcfd;

  /* ─── Component Scale (compact) ─── */
  --comp-padding-x: 0.75rem;
  --comp-padding-y: 0.375rem;
  --comp-gap: 0.5rem;
  --comp-border-width: 1.5px;
  --comp-font-size: 0.875rem;
  --comp-input-height: 2rem;
  --comp-button-height: 2rem;
  --comp-icon-size: 1rem;

  /* ─── Grid (dense) ─── */
  --grid-columns: 16;
  --grid-gutter: 12px;
  --grid-margin: 16px;
  --grid-max-width: 1440px;

}

Brand DocumentsPro

Brand Guidelines

Standalone HTML, print to PDF. Colours, typography, spacing, all in one page.

Presentation Deck

PPTX template with palette, typography, and blank slides in your brand.

Figma Tokens

JSON for Tokens Studio plugin. Import colours, type, spacing straight into Figma.

PDF Brand Guide

Full brand guidelines as a real PDF file. Colours and typography rendered exactly.

AI Skill

System prompt you can paste into Cursor or any AI tool to generate on-brand UI instantly.

Upgrade to Pro for all exports