---
version: alpha
name: "Udacity"
description: "Udacity presents technical education as an AI career system: a near-black hero, electric-blue enrollment actions, broad Plus Jakarta Sans headlines, project counts, mentor proof, and structured program discovery."
colors:
  bg: "#0a0b0f"
  bg-page: "#ffffff"
  surface: "#14161d"
  surface-light: "#f9f9f9"
  text: "#ffffff"
  text-dark: "#0b0b0b"
  text-muted: "#cecfd4"
  brand: "#175cff"
  brand-hover: "#0c49dc"
  accent: "#eda93b"
  border: "#343742"
  on-brand: "#ffffff"
typography:
  display:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "72px"
    lineHeight: 1.55
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Inter"
    fontSize: "16px"
    lineHeight: 1.55
  mono:
    fontFamily: "Roboto Mono"
rounded:
  button: "8px"
  card: "16px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

The first viewport is dark, direct, and technical. A large AI-focused headline sits above concrete project and mentor outcomes, while blue actions remain visible against the black surface.

## Colors

Use `#0a0b0f` for launch sections and white for catalog sections. Electric blue is reserved for enrollment and discovery actions; amber identifies exceptional program labels such as master's offerings.

## Typography

Plus Jakarta Sans carries broad display headlines at medium weight. Inter handles navigation, metadata, outcomes, and longer descriptions with a quieter texture.

## Layout

Lead with one featured learning path, then transition into a structured catalog. Use full-width bands rather than floating card sections, and keep proof adjacent to the relevant program claim.

On mobile, stack hero copy before the featured program proof. Keep program metadata in a stable vertical order and use full-width enrollment buttons.

## Elevation & Depth

Use dark tonal layers in the hero and thin neutral borders in the catalog. Cards should not appear to float far above the page.

## Shapes

Corners are disciplined: 4px for actions, 8px for course cards, and 16px for large media panels. Avoid soft pill-heavy education UI.

## Components

Primary buttons are blue rectangles with 4px corners. Program cards use white or very light gray surfaces, clear subject labels, duration and skill metadata, and one consistent action.

Featured programs may rotate, but controls and pause behavior must remain explicit. Blue buttons darken on hover and show a clear focus ring without changing layout.

Muted navigation text must stay readable on black. Carousels require pause, previous, and next controls; course outcomes should not rely on video or imagery alone.

Use measurable learning language: build, ship, practice, mentor, project, career, and credential. Avoid generic promises when a project count or concrete skill can be shown.

Dark sections communicate technical depth, while white sections support catalog scanning. Preserve this deliberate alternation instead of forcing the entire site into one theme.

Udacity reads like a developer platform that happens to sell education. Its strongest distinction is combining product-launch energy with the structured evidence expected from a learning provider.

## Do's and Don'ts

Do show projects, mentors, and skills near enrollment actions. Do not hide program requirements, over-round every control, or use blue as a decorative background everywhere.

Create an Udacity-style AI learning hero on near-black with a 76px Plus Jakarta Sans headline, electric-blue `Enroll now` buttons, amber program labels, real project counts, mentor proof, and a white structured program catalog below.