Skip to content

Brand Kit

A collection of design assets and guidelines for the David Coleman brand.

Colors

One owned color used consistently beats a full palette used loosely.

Everything here protects Pine Shadow.

Core

Grounds

Accent

Secondary

Neutrals

Mono ramp

On this site

  • groundLimestone light, Basalt dark
  • surface#F8F9F6 light, Basalt Raised dark
  • inkFlint light, #E6EAEC dark
  • rule#D9DCD5 light, #3B4348 dark
  • brassAged Brass light, Brass Light dark
  • pinePine Shadow light, Ash dark

Rules

  • A green background is never right. Basalt is biased to the blue side for this reason. Pine Shadow is a hero color and a fill, never a page ground in dark mode.
  • Never Pine Shadow as a text highlight on Limestone. It sits 6 APCA points from the ink and reads as ink. Highlights are Aged Brass.
  • Aged Brass on light, Brass Light on dark. Swap them and the accent disappears.
  • On any dark ground, set type in Limestone or Fog Veil. Nothing else clears APCA for body text.
  • Accent stays under 5% of any surface.

Type

SF Pro Display for headings on Apple devices, Inter for everything else.

Display

SF Pro Display

I help people discover who they're created to be and what they're capable of achieving.

Headings, the hero line, pull quotes, in semibold. Apple devices render SF Pro Display; everywhere else falls back to Inter.

Everything else

Inter

Live purpose-filled and relationship rich!

The Google Fonts face closest to Apple's SF Pro. Labels, data and body copy. No monospace: numbers align with tabular figures.

Scale

  • David Coleman

    Display XL

  • Personal Website

    Display LG

  • Brand Guidelines

    Display MD

  • Transparent, minimalist, and functional.

    Body

  • Brand Kit

    Eyebrow

Display stack

-apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif

Sans stack

Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif

System

Shape and space

Generous padding; sections breathe at ~104px, card interiors at ~22/24px. Text column caps at about 62 characters.

  • Cards

    12px

  • Chip

    Chips and badges

    6px

  • Button

    Buttons

    Pill

UI Kit

Live look at our base components.

Buttons and links

Get The 1159Visit Dovito®
More about me
ChipFeatured

What I believe

Learn. Apply. Share.™

Get The 1159Visit Dovito®