Client: Noir Studios

by Hannah Lindström·Generated from prompt

cinematic dark dramatic noir atmospheric

complementaryneutral

3.7(7)

Design Direction

Film production company — cinematic dark, dramatic shadows, serif titles, atmospheric

Colour Strategy

complementary harmony from hue 40 with neutral temperature

Typography Strategy

Anton headings paired with Work Sans body text

Colour Palette

primary

#b89b60

secondary

#6981af

accent

#7cbd5c

neutral

#918e88

success

#4ace91

warning

#daa13e

error

#ce4a4a

info

#4a7dce

Typography

Heading

Anton, sans-serif

View on Google Fonts ↗

Body

Work Sans, 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.

Selection colour · highlighted text looks like this · try selecting any text on this page

Spacing

7px base unit · generous density

7px

14px

29px

43px

58px

2xl

86px

3xl

115px

4xl

173px

Border radius

none

0px

2px

5px

10px

16px

full

9999px

Elevation

sunken

base

raised

floating

overlay

Shadows

low

0 2px 8px rgba(0, 0, 0, 0.4), 0 0 4px rgba(184, 155, 96, 0.1)

mid

0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(184, 155, 96, 0.15)

high

0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(184, 155, 96, 0.2)

glow

Texture

grain · opacity 0.07 · overlay blend

grain · overlay · 0.07

Grid

expansive · 6 columns · 48px gutter · 120px margin · 1600px max

Columns6

Gutter48px

Margin120px

Max width1600px

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 Remix Icon — Expressive icons bridging outlined and filled styles

Stroke weight

1.75px

Matches border width (1px)

Corner rounding

2px

Use for icon containers

Icon set preview (edgy) — 1.75px 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: #f8f8f6;
  --color-primary-100: #efeeeb;
  --color-primary-200: #e5e0d6;
  --color-primary-300: #dcceb1;
  --color-primary-400: #cdb88e;
  --color-primary-500: #b89b60;
  --color-primary-600: #9f8147;
  --color-primary-700: #826a3a;
  --color-primary-800: #5b5039;
  --color-primary-900: #3c382f;
  --color-primary-950: #282520;

  /* ─── Colors: Secondary ─── */
  --color-secondary-50: #f7f7f8;
  --color-secondary-100: #ecedef;
  --color-secondary-200: #d8dce4;
  --color-secondary-300: #b6c1d8;
  --color-secondary-400: #94a5c6;
  --color-secondary-500: #6981af;
  --color-secondary-600: #506796;
  --color-secondary-700: #41557b;
  --color-secondary-800: #3c4558;
  --color-secondary-900: #31343a;
  --color-secondary-950: #202327;

  /* ─── Colors: Accent ─── */
  --color-accent-50: #f7f8f6;
  --color-accent-100: #ecefeb;
  --color-accent-200: #dbe6d5;
  --color-accent-300: #bfdfaf;
  --color-accent-400: #a2d08b;
  --color-accent-500: #7cbd5c;
  --color-accent-600: #63a342;
  --color-accent-700: #518637;
  --color-accent-800: #445d37;
  --color-accent-900: #333c2f;
  --color-accent-950: #22281f;

  /* ─── Colors: Neutral ─── */
  --color-neutral-50: #f8f7f7;
  --color-neutral-100: #eeedec;
  --color-neutral-200: #dfdedd;
  --color-neutral-300: #c9c8c5;
  --color-neutral-400: #b1aeaa;
  --color-neutral-500: #918e88;
  --color-neutral-600: #77746e;
  --color-neutral-700: #62605b;
  --color-neutral-800: #4d4b47;
  --color-neutral-900: #383633;
  --color-neutral-950: #252422;

  /* ─── Colors: Semantic ─── */
  --color-success: #4ace91;
  --color-success-light: #202d27;
  --color-warning: #daa13e;
  --color-warning-light: #2e281e;
  --color-error: #ce4a4a;
  --color-error-light: #2d2020;
  --color-info: #4a7dce;
  --color-info-light: #20252d;

  /* ─── Colors: Surface ─── */
  --color-background: #11100e;
  --color-foreground: #e7e6e4;
  --color-card: #1e1d1a;
  --color-card-foreground: #e7e6e4;
  --color-muted: #282724;
  --color-muted-foreground: #989590;
  --color-border: #302f2c;
  --color-input: #252422;
  --color-ring: #d1a347;

  /* ─── Typography ─── */
  --font-heading: Anton, sans-serif;
  --font-body: Work Sans, 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 2px 8px rgba(0, 0, 0, 0.4), 0 0 4px rgba(184, 155, 96, 0.1);
  --shadow-mid: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(184, 155, 96, 0.15);
  --shadow-high: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(184, 155, 96, 0.2);
  --shadow-glow: 0 0 40px rgba(184, 155, 96, 0.3), 0 0 80px rgba(184, 155, 96, 0.15);

  /* ─── 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: #060505;
  --elevation-base: #0e0d0c;
  --elevation-raised: #211f1c;
  --elevation-floating: #322f2a;
  --elevation-overlay: #48443d;

  /* ─── 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 (expansive) ─── */
  --grid-columns: 6;
  --grid-gutter: 48px;
  --grid-margin: 120px;
  --grid-max-width: 1600px;

  /* ─── Selection ─── */
  --selection-bg: #9f8147;
  --selection-fg: #FFFFFF;
}

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