Style Guide

• Surface

  #FAF8F2

  --color-bg

• Surface Alt

  #EEEAE1

  --color-surface-alt

• Surface Active

  #FFE9E1

  --color-surface-active

• Card

  #F1EEE6

  --color-card

• Graphite

  #11110F

  --color-ink

• Void

  #0B0D0C

  --color-ink-deep

• Slate

  #66645E

  --color-muted

• Inactive

  #918E86

  --color-inactive

• Ash

  #AAA79F

  --color-faint

• Ash on Light

  #74726D

  --color-faint-on-light

• Muted

  #70736E

  --color-label

• Ivory

  #F1E8D6

  --color-on-dark

• Ivory Cool

  #F4F0E7

  --color-on-footer

• Signal

  #FF5A3D

  --color-accent

• Signal Press

  #E0432B

  --color-accent-press

• Signal Text

  #C74630

  --color-accent-text

• Signal Text Large

  #FB583C

  --color-accent-text-lg

• Hero Word · .text-hero-word · 84 / 120 / 128

  SIGNAL

• Display · .text-display · 46 / 72 / 104

  Have a project in mind?

• Closing · .text-closing · 44 / 68 / 100

  Your next move.

• Section Title · .text-section · 40 / 64 / 96

  The Signal Index

• Statement · .text-statement · 36 / 54 / 76

  The Signal Path.

• Service Title · .text-service · 32 / 48 / 70

  What clarity makes possible.

• Project Name · .text-project · 28 / 36 / 46

  Strategy, identity, digital and growth.

• Quote · .text-quote · 24 / 34 / 42

  signalform@example.com

• Title Small · .text-title-sm · 22 / 24 / 26

  Trusted by founder-led teams.

• Body Large · .text-body-lg · 17 / 19 / 21

  Founder-led brands, each with a position to prove and a number to show for it.

• Lead · .text-lead · 17 / 18 / 19

  Tell us what you’re building. We read every message and reply within one business day.

• Body · .text-body · 16 / 17 / 17

  Independent strategy, brand and digital studio working with founder-led teams worldwide.

• .mono-caps

  Selected work

• .mono-label

  Legal

• .sans-label

  Client Stories

Hover a row to play its easing curve over one second.

• Out

  --ease-out

  Reveals, hovers, nav, image pushcubic-bezier(0.16, 1, 0.3, 1)

• Fade

  --ease-fade

  Opacity fades, scrim, timelinecubic-bezier(0.44, 0, 0.56, 1)

• Soft

  --ease-soft

  Insight cards, media revealcubic-bezier(0.22, 1, 0.36, 1)

• Media

  --ease-media

  Slow image zoom (1.2s)cubic-bezier(0.16, 0.6, 0.2, 1)

• Text

  --ease-text

  Line reveals with blur (1s)cubic-bezier(0.2, 0.9, 0.3, 1)

• Standard

  --ease-standard

  Services image push, slider arrowscubic-bezier(0.4, 0, 0.2, 1)

• Page

  --ease-page

  Page crossfade (0.18s)cubic-bezier(0.76, 0, 0.24, 1)