Design Guidelines

Logo

White wireframe globe on Princeton Orange circular background, adapted from Climate Global's orthographic projection. Regenerate with npm run generate:logo.

Variants

Primary — Light Background

White globe on Princeton Orange circle — primary brand mark

White — Dark Background

White globe, no background — for dark surfaces

Available Sizes

16x16

Browser favicon

32x32

Browser favicon

48x48

Windows pinned sites

180x180

iOS home screen

192x192

Android/PWA manifest

512x512

Android/PWA splash

256x256

Google Workspace avatar

512x512

General use

1024x1024

LinkedIn profile photo

1200x630

Open Graph / social share

Generation Parameters

Globe Geometry

Axis:          (-0.44, 0.39)
Arc 1 Rotation: 170°
Arc 2 Rotation: 87°
Stroke Width:   4.5
Globe Color:    #FFFFFF
Background:     #F77F00 (Princeton Orange)
Generator:      scripts/generate-logo.js

Clear Space

Minimum clear space equals the height of the logo mark

Color Palette

"Warm Autumn Glow" palette. Click hex values to copy.

Primary & Accent

Deep Space Blue Links, timeline dots, header/stats strip, interactive elements

Midnight Navy Footer background

Vanilla Custard Light section backgrounds, subtle fills

Princeton Orange Tagline, CTAs, link hover states

Emphasis & Warmth

Flag Red Timeline highlight dot (Climate Global), Current badge, special emphasis

Sunflower Gold Stats strip emphasis, warm accent details

Backgrounds & Neutrals

Warm Ivory Page background, alternating section fills

White Cards, hero section, primary content areas

Warm Grey Borders, dividers, photo borders

Text Colors

Dark Ink Headings, body text, publication titles, category headings

Cool Grey Descriptions, meta text, subtitles, authors

Preview

Buttons

Typography

Deyle.com

Entrepreneur, Technologist, Scientist, Investor, Curiosity Seeker

Typography

Heading Font

Source Serif 4 Fallback: Georgia, serif

DEYLE.COM

Entrepreneur, Technologist, Scientist

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Family: Source Serif 4, Georgia, serif

Weights: Regular (400), Semibold (600), Bold (700)

Usage: Logo wordmark, all headings, section titles

Body Font

Inter Fallback: system-ui, -apple-system, sans-serif

Deyle.com

Entrepreneur, technologist, and curiosity seeker.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Family: Inter, system-ui, -apple-system, sans-serif

Weights: Regular (400), Medium (500), Semibold (600), Bold (700)

Usage: Body text, navigation, UI elements

Type Scale

h1 / 2.5rem Deyle.com

h2 / 2rem Section Heading

h3 / 1.5rem Subsection Title

h4 / 1.125rem Card Title

body / 1rem Body text for paragraphs and content.

small / 0.875rem Captions, labels, secondary text.

CSS Implementation

Typography CSS

:root {
  --font-heading: 'Source Serif 4', Georgia, serif;
  --font-body: Inter, system-ui, -apple-system, sans-serif;

  --text-h1: 2.5rem;
  --text-h2: 2rem;
  --text-h3: 1.5rem;
  --text-h4: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;

  --leading-tight: 1.3;
  --leading-normal: 1.7;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
}

body {
  font-family: var(--font-body);
  line-height: var(--leading-normal);
}

Design Tokens

Export color values and typography settings for development.

CSS Variables

:root {
  /* Deyle.com — "Warm Autumn Glow" */
  --color-primary:        #003049;
  --color-primary-dark:   #001D2E;
  --color-primary-light:  #EAE2B7;
  --color-accent:         #F77F00;
  --color-accent-light:   #FFF3E0;
  --color-highlight:      #D62828;
  --color-warm:           #FCBF49;
  --color-background:     #FAF8F3;
  --color-surface:        #FFFFFF;
  --color-border:         #DDD8D0;
  --color-text-primary:   #1A1D21;
  --color-text-secondary: #5A6570;
  --color-logo:           #F77F00;

  --font-heading: 'Source Serif 4', Georgia, serif;
  --font-body: Inter, system-ui, -apple-system, sans-serif;
}

JavaScript / TypeScript

export const colors = {
  primary: '#003049',
  primaryDark: '#001D2E',
  primaryLight: '#EAE2B7',
  accent: '#F77F00',
  highlight: '#D62828',
  warm: '#FCBF49',
  background: '#FAF8F3',
  surface: '#FFFFFF',
  border: '#DDD8D0',
  textPrimary: '#1A1D21',
  textSecondary: '#5A6570',
  logo: '#F77F00',
};

export const typography = {
  heading: "'Source Serif 4', Georgia, serif",
  body: "Inter, system-ui, sans-serif",
};

Usage Guidelines

✓ Do

Use dark text (--color-text-primary) for headings
Use Deep Space Blue only for links and interactive elements
Use Princeton Orange for tagline, CTAs, and hover states
Use Source Serif 4 for all headings and display text
Use Inter for all body and UI text
Maintain minimum clear space around logo equal to mark height
Use reversed (white) logo on dark backgrounds

✗ Don't

Color headings or category titles with blue
Use Flag Red except for Climate Global timeline entry
Add fade-in or scroll-triggered animations
Introduce fonts beyond Source Serif 4 and Inter
Stretch or distort the logo
Use drop shadows or effects on the logo
Place logo on busy backgrounds without contrast