Palettise
Back to Explore

Concrete & Glass

by Tobias Engel·Generated from prompt
elegantrefinedminimalarchitecturalunderstated
analogousneutral
3.8(4)

Design Direction

Same firm but softer — warm concrete grey, plenty of whitespace, elegant serif headings

Colour Strategy

analogous harmony from hue 200 with neutral temperature

Typography Strategy

Playfair Display headings paired with Source Sans 3 body text

Colour Palette

primary

#599dc0

secondary

#6371b6

accent

#7953c5

neutral

#888e91

success

#20c578

warning

#d48d11

error

#c52020

info

#205fc5

Typography

Heading

Playfair Display, serif

View on Google Fonts ↗

Body

Source Sans 3, 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

7px base unit · generous density

xs
7px
sm
14px
md
29px
lg
43px
xl
58px
2xl
86px
3xl
115px
4xl
173px

Border radius

none

0px

sm

2px

md

5px

lg

10px

xl

16px

full

9999px

Elevation

sunken
base
raised
floating
overlay

Shadows

low

0 1px 2px rgba(89, 157, 192, 0.02)

mid

0 2px 4px rgba(89, 157, 192, 0.03)

high

0 4px 8px rgba(89, 157, 192, 0.04)

Texture

mesh · opacity 1 · normal blend

mesh · normal · 1

Grid

compact · 12 columns · 16px gutter · 24px margin · 1280px max

Columns12
Gutter16px
Margin24px
Max width1280px

Motion

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

micro

100ms

Button press feedback
fast

200ms

Hover me
Colour & border transitions
normal

400ms

Toggles & state changes
slow

600ms

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

800ms

Page transitions & loading states

Easings

General

Hover states, colour changes, most transitions

cubic-bezier(0.65, 0, 0.35, 1)

Enter

Elements appearing - modals, dropdowns, toasts

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

Exit

Elements leaving - dismissals, close animations

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

Bounce

Playful feedback - toggles, badges, confirmations

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

Spring

Physics-based - drag, gestures, elastic effects

cubic-bezier(0.16, 1.3, 0.3, 1)

Iconography

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

Recommended library

Material Symbols

Comprehensive icon system with variable weight and fill

Browse Material Symbols ↗

Also consider Feather Icons — Lightweight icons with a delicate, airy stroke

Stroke weight

1.25px

Matches border width (1px)

Corner rounding

2px

Use for icon containers

Icon set preview (luxury) — 1.25px stroke

Size scale

xs

12px

sm

16px

md

20px

lg

24px

xl

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: #f6f8f8;
  --color-primary-100: #ebeef0;
  --color-primary-200: #d5e1e7;
  --color-primary-300: #aecfe0;
  --color-primary-400: #89bad2;
  --color-primary-500: #599dc0;
  --color-primary-600: #3f84a6;
  --color-primary-700: #346d89;
  --color-primary-800: #36515e;
  --color-primary-900: #2e383d;
  --color-primary-950: #1f2529;

  /* ─── Colors: Secondary ─── */
  --color-secondary-50: #f7f7f8;
  --color-secondary-100: #ebecef;
  --color-secondary-200: #d7d9e5;
  --color-secondary-300: #b3b9db;
  --color-secondary-400: #909acb;
  --color-secondary-500: #6371b6;
  --color-secondary-600: #49579c;
  --color-secondary-700: #3c4880;
  --color-secondary-800: #3a3f5a;
  --color-secondary-900: #30323b;
  --color-secondary-950: #202128;

  /* ─── Colors: Accent ─── */
  --color-accent-50: #f7f6f8;
  --color-accent-100: #eceaf0;
  --color-accent-200: #dbd4e8;
  --color-accent-300: #beabe3;
  --color-accent-400: #a085d6;
  --color-accent-500: #7953c5;
  --color-accent-600: #603aac;
  --color-accent-700: #4f308d;
  --color-accent-800: #433460;
  --color-accent-900: #332e3e;
  --color-accent-950: #221e29;

  /* ─── Colors: Neutral ─── */
  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #ecedee;
  --color-neutral-200: #dddedf;
  --color-neutral-300: #c5c8c9;
  --color-neutral-400: #aaaeb1;
  --color-neutral-500: #888e91;
  --color-neutral-600: #6e7477;
  --color-neutral-700: #5b6062;
  --color-neutral-800: #474b4d;
  --color-neutral-900: #333638;
  --color-neutral-950: #222425;

  /* ─── 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: #171a1c;
  --color-card: #FFFFFF;
  --color-card-foreground: #171a1c;
  --color-muted: #f2f2f3;
  --color-muted-foreground: #61686b;
  --color-border: #e4e6e7;
  --color-input: #dfe1e2;
  --color-ring: #47a3d1;

  /* ─── Typography ─── */
  --font-heading: Playfair Display, serif;
  --font-body: Source Sans 3, sans-serif;
  --font-mono: JetBrains Mono, monospace;

  /* ─── Spacing ─── */
  --space-lg: 43px;
  --space-md: 29px;
  --space-sm: 14px;
  --space-xl: 58px;
  --space-xs: 7px;
  --space-2xl: 86px;
  --space-3xl: 115px;
  --space-4xl: 173px;

  /* ─── Border Radius ─── */
  --radius-lg: 10px;
  --radius-md: 5px;
  --radius-sm: 2px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --radius-none: 0px;

  /* ─── Shadows ─── */
  --shadow-low: 0 1px 2px rgba(89, 157, 192, 0.02);
  --shadow-mid: 0 2px 4px rgba(89, 157, 192, 0.03);
  --shadow-high: 0 4px 8px rgba(89, 157, 192, 0.04);

  /* ─── Motion ─── */
  --duration-micro: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 600ms;
  --duration-glacial: 800ms;
  --easing-default: cubic-bezier(0.65, 0, 0.35, 1);
  --easing-entrance: cubic-bezier(0.33, 0, 0, 1);
  --easing-exit: cubic-bezier(0.67, 0, 1, 0.67);
  --easing-bounce: cubic-bezier(0.22, 1.6, 0.36, 1);
  --easing-spring: cubic-bezier(0.16, 1.3, 0.3, 1);

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

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

  /* ─── Grid (compact) ─── */
  --grid-columns: 12;
  --grid-gutter: 16px;
  --grid-margin: 24px;
  --grid-max-width: 1280px;

}
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