DESIGN.md · Analysis

Draper University

draperuniversity.com · 26 Oct 2026 · 47 colors · Inter, Share Tech

Draper University

Draper University is a startup-education institution whose site presents a bold, high-contrast 'Full Speed Ahead' entrepreneurial identity. The visual language pairs a deep navy canvas with a saturated sky-blue accent and a warm yellow highlight.

Colors

surface#ffffff

surface-dim#e2f2ff

surface-bright#ffffff

surface-container-lowest#ffffff

surface-container-low#f8f9fa

surface-container#f0f0f0

surface-container-high#e9ecef

surface-container-highest#dee2e6

on-surface#212529

on-surface-variant#111111

inverse-surface#00204b

inverse-on-surface#ffffff

outline#adb5bd

outline-variant#ced4da

surface-tint#3c74c0

primary#3c74c0

on-primary#ffffff

primary-container#7cc1ff

on-primary-container#00204b

inverse-primary#7cc1ff

secondary#00429b

on-secondary#ffffff

secondary-container#79adf4

on-secondary-container#00204b

tertiary#f7e05f

on-tertiary#00204b

tertiary-container#fff3b0

on-tertiary-container#3d3300

error#dc3545

on-error#ffffff

error-container#f8d7da

on-error-container#58151c

primary-fixed#7cc1ff

primary-fixed-dim#3c74c0

on-primary-fixed#00204b

on-primary-fixed-variant#00429b

secondary-fixed#79adf4

secondary-fixed-dim#00429b

on-secondary-fixed#00204b

on-secondary-fixed-variant#00429b

tertiary-fixed#f7e05f

tertiary-fixed-dim#e2c94a

on-tertiary-fixed#3d3300

on-tertiary-fixed-variant#664d03

background#ffffff

on-background#212529

surface-variant#e2f2ff

Typography

display: fontFamily: Inter · fontSize: 40px · fontWeight: 700 · lineHeight: 48px · letterSpacing: -0.02em
headline-lg: fontFamily: Inter · fontSize: 32px · fontWeight: 500 · lineHeight: 38px · letterSpacing: -0.01em
headline-md: fontFamily: Inter · fontSize: 24px · fontWeight: 500 · lineHeight: 30px
title-lg: fontFamily: Inter · fontSize: 20px · fontWeight: 500 · lineHeight: 28px
body-lg: fontFamily: Inter · fontSize: 18px · fontWeight: 400 · lineHeight: 27px
body-md: fontFamily: Inter · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
label-md: fontFamily: Inter · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.02em
label-sm: fontFamily: Share Tech · fontSize: 12px · fontWeight: 400 · lineHeight: 16px · letterSpacing: 0.05em

Design guidance

Overview

Draper University presents an unapologetically direct, startup-forward identity: 'Go Full Speed Ahead' is the core emotional promise. The aesthetic is a restrained Bootstrap-derived utility base overlaid with a bold, saturated blue brand accent and a spare white canvas, giving it the energy of a founder's pitch deck rather than a traditional campus. The emotional response is urgency tempered by confidence.

The voice is short, imperative and declarative. Headlines are stacked in three lines with a heavy middle word, as in 'Go / Full Speed / ahead...'. Example sentence: "Go full speed ahead — the next cohort starts Monday."

Colors

Primary (#3c74c0) is the brand accent used on the main interactive links, headline emphasis and the CTA family; its dark counterpart #00204b is the signature ink used for headings and the inverse surface. Primary-container (#7cc1ff) is the lighter sky-blue used for highlights and hover fills. Secondary (#00429b) supports deeper blue states and secondary links, while Secondary-container (#79adf4) fills supporting chips. Tertiary (#f7e05f) is a warm yellow reserved for badges and small emphasis, never for body text.

The surface stack is pure white (#ffffff) at the base, with surface-container-low (#f8f9fa) for cards and surface-container-high (#e9ecef) for hover. Body text uses on-surface #212529; secondary copy uses on-surface-variant #6c757d. Hex values above are the authoritative tokens.

Typography

The type system uses Inter at 400, 500 and 600 for all reading and UI, with Share Tech reserved for small technical labels at 12px with 0.05em tracking. Display headlines use Inter 700 at 40px with -0.02em tracking to produce a dense, confident block. Body copy runs at 16px with 24px line-height for comfortable reading. Apply letter-spacing 0.02em on 14px uppercase-adjacent labels to keep them legible at small sizes.

Layout

The layout is a fluid 12-column grid capped at a 1320px container, with 24px gutters and 16px outer margins. White space is generous between hero blocks; use spacing lg (8px) for tight label groupings and xl (12px) for card internal padding, scaling up to section separation with gutter-sized vertical rhythm.

Elevation & Depth

Depth is conveyed sparingly. Cards at rest are flat on surface-container-low with no shadow. Hover elevation uses 0 .5rem 1rem rgba(0, 0, 0, .15) (elevation.md) and modal or floating panels use 0 1rem 3rem rgba(0, 0, 0, .175) (elevation.lg). Interactive focus is signalled by a 0.25rem ring of rgba(13, 110, 253, .25).

Shapes

The shape language is a Soft-Technical blend: 6px (.375rem) corners on inputs and small containers, 16px (1rem) on cards, and pill-shaped 50px corners on primary CTAs and round 50% circles for the arrow action. Pills signal invitation; the small input radius keeps form fields crisp.

Components

Action Elements Primary buttons are filled with primary (#3c74c0) on 50px pill corners, 48px tall, with label-md text. On hover the fill transitions to primary-fixed-dim over 150ms ease-in-out. Secondary buttons are transparent with a primary text colour and the same pill geometry.

Containers & Surfaces Cards use surface-container-low with 16px corners and 24px internal padding. On hover they lift to surface-container-high with the elevation.md shadow over 200ms ease.

Inputs & Interaction Input fields sit on surface-container-lowest with a 1px solid border in outline-variant (#ced4da), 6px corners and 16px internal padding. On focus the border becomes primary and a 0.25rem focus ring at rgba(13, 110, 253, .25) appears. Badges use the tertiary yellow fill as small full-radius

Do's and Don'ts

**Do**

Use primary #3c74c0 exclusively for CTAs and interactive links so the brand accent stays meaningful.
Keep headlines in Inter 700 at 40px with -0.02em tracking for the stacked, punchy look.
Use the 50px pill radius for primary buttons and the 50% circle for arrow actions.
Reserve tertiary yellow #f7e05f for badges and small highlights only.

**Don't**

Don't introduce gradients or glassmorphism; the identity is flat and high-contrast.
Don't use the yellow tertiary for body text or large fills.
Don't mix more than two blues in a single component.
Don't add decorative shadows to resting cards.

---
version: alpha
name: Draper University
description: >-
  Draper University is a startup-education institution whose site presents a bold, high-contrast 'Full Speed Ahead'
  entrepreneurial identity. The visual language pairs a deep navy canvas with a saturated sky-blue accent and a warm
  yellow highlight.
logo:
  src: https://draperuniversity.com/assets/draper_logo.5ee21044.svg
colors:
  surface: '#ffffff'
  surface-dim: '#e2f2ff'
  surface-bright: '#ffffff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f8f9fa'
  surface-container: '#f0f0f0'
  surface-container-high: '#e9ecef'
  surface-container-highest: '#dee2e6'
  on-surface: '#212529'
  on-surface-variant: '#111111'
  inverse-surface: '#00204b'
  inverse-on-surface: '#ffffff'
  outline: '#adb5bd'
  outline-variant: '#ced4da'
  surface-tint: '#3c74c0'
  primary: '#3c74c0'
  on-primary: '#ffffff'
  primary-container: '#7cc1ff'
  on-primary-container: '#00204b'
  inverse-primary: '#7cc1ff'
  secondary: '#00429b'
  on-secondary: '#ffffff'
  secondary-container: '#79adf4'
  on-secondary-container: '#00204b'
  tertiary: '#f7e05f'
  on-tertiary: '#00204b'
  tertiary-container: '#fff3b0'
  on-tertiary-container: '#3d3300'
  error: '#dc3545'
  on-error: '#ffffff'
  error-container: '#f8d7da'
  on-error-container: '#58151c'
  primary-fixed: '#7cc1ff'
  primary-fixed-dim: '#3c74c0'
  on-primary-fixed: '#00204b'
  on-primary-fixed-variant: '#00429b'
  secondary-fixed: '#79adf4'
  secondary-fixed-dim: '#00429b'
  on-secondary-fixed: '#00204b'
  on-secondary-fixed-variant: '#00429b'
  tertiary-fixed: '#f7e05f'
  tertiary-fixed-dim: '#e2c94a'
  on-tertiary-fixed: '#3d3300'
  on-tertiary-fixed-variant: '#664d03'
  background: '#ffffff'
  on-background: '#212529'
  surface-variant: '#e2f2ff'
typography:
  display:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: '700'
    lineHeight: 48px
    letterSpacing: '-0.02em'
  headline-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '500'
    lineHeight: 38px
    letterSpacing: '-0.01em'
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '500'
    lineHeight: 30px
  title-lg:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '500'
    lineHeight: 28px
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 27px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.02em
  label-sm:
    fontFamily: Share Tech
    fontSize: 12px
    fontWeight: '400'
    lineHeight: 16px
    letterSpacing: 0.05em
rounded:
  sm: 6px
  DEFAULT: 6px
  md: 16px
  lg: 16px
  xl: 50px
  full: 9999px
spacing:
  unit: 4px
  xs: 3px
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
  gutter: 24px
  margin: 16px
  container-max: 1320px
elevation:
  sm: 0 .125rem .25rem rgba(0, 0, 0, .075)
  md: 0 .5rem 1rem rgba(0, 0, 0, .15)
  lg: 0 1rem 3rem rgba(0, 0, 0, .175)
layout:
  containerMaxWidth: 1320px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    height: 48px
  button-primary-hover:
    backgroundColor: '{colors.primary-fixed-dim}'
    textColor: '{colors.on-primary}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    height: 48px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
  card:
    backgroundColor: '{colors.surface-container-low}'
    rounded: '{rounded.xl}'
    padding: '{spacing.xl}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
    rounded: '{rounded.xl}'
  input-field:
    backgroundColor: '{colors.surface-container-lowest}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.lg}'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.lg}'
  list-item-hover:
    backgroundColor: '{colors.surface-variant}'
    textColor: '#111111'
  badge:
    backgroundColor: '{colors.tertiary}'
    textColor: '{colors.on-tertiary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: '{spacing.sm}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Primary buttons are filled with primary (#3c74c0) on 50px pill corners, 48px tall, with label-md text. On hover the fill transitions to primary-fixed-dim over 150ms ease-in-out. Secondary buttons are transparent with a primary text colour and the same pill geometry.

### Containers & Surfaces
Cards use surface-container-low with 16px corners and 24px internal padding. On hover they lift to surface-container-high with the elevation.md shadow over 200ms ease.

### Inputs & Interaction
Input fields sit on surface-container-lowest with a 1px solid border in outline-variant (#ced4da), 6px corners and 16px internal padding. On focus the border becomes primary and a 0.25rem focus ring at rgba(13, 110, 253, .25) appears. Badges use the tertiary yellow fill as small full-radius

## Do's and Don'ts

**Do**
- Use primary #3c74c0 exclusively for CTAs and interactive links so the brand accent stays meaningful.
- Keep headlines in Inter 700 at 40px with -0.02em tracking for the stacked, punchy look.
- Use the 50px pill radius for primary buttons and the 50% circle for arrow actions.
- Reserve tertiary yellow #f7e05f for badges and small highlights only.

**Don't**
- Don't introduce gradients or glassmorphism; the identity is flat and high-contrast.
- Don't use the yellow tertiary for body text or large fills.
- Don't mix more than two blues in a single component.
- Don't add decorative shadows to resting cards.

Edit, then copy or download.