DESIGN.md inspired by FutureLearn

---
name: FutureLearn
tagline: "Bright social learning journeys shaped by courses and community."
updated_at: 2026-08-05T01:25:44.561Z
published_at: 2026-08-05T01:25:44.561Z
author: webdesignhot
source_url: https://www.futurelearn.com/
spec: webdesignhot/0.2
profile: catalog
quality: curated
featured: false
categories: [education, marketplace]
tags: [education, courses, university, editorial, community]
preview_swatch: ["#ffffff", "#de00a5", "#3a343a"]
related: [skillshare, coursera, openstax]
description: "FutureLearn pairs a strong pink action color with editorial course discovery. The interface balances university credibility and social participation through white space, warm dark text, restrained gray panels, and clear course metadata. Its system should feel welcoming without becoming childish or promotional."

aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-soft
  border: border

colors:
  bg: '#ffffff'
  surface: '#ededee'
  text: '#3a343a'
  brand: '#de00a5'
  on-brand: '#ffffff'
  border: '#e5e7eb'
  text-soft: '#6b646b'
  border-soft: '#f0f0f1'

typography:
  display:
    family: 'Europa, system-ui, -apple-system, sans-serif'
    weights: [500, 600, 700]
  body:
    family: 'Europa, system-ui, -apple-system, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 80, weight: 700, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-lg:      { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    h1:              { size: 40, weight: 700, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h2:              { size: 32, weight: 600, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h3:              { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
    h4:              { size: 20, weight: 600, lineHeight: 1.3,  tracking: '0',        family: body }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    caption:         { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

components:
  button-primary: { bg: brand, text: on-brand, padding: '10px 16px', radius: 8 }
  button-ghost:   { bg: transparent, text: text, border: border, padding: '10px 16px', radius: 8 }
  card:           { bg: surface, border: border, radius: 12, padding: 24 }
  input:          { bg: bg, border: border, text: text, radius: 8, padding: '8px 12px' }

lineage:
  summary: "Recorded from the current futurelearn public site during the 2026-08-05 catalog audit."
  influences:
    - name: "FutureLearn public homepage"
      role: "Source for Europa typography, pink action color, pale gray course surfaces, and partner-led discovery."
      url: https://www.futurelearn.com/
---

## 1. Visual Theme & Atmosphere

FutureLearn pairs a strong pink action color with editorial course discovery. The interface balances university credibility and social participation through white space, warm dark text, restrained gray panels, and clear course metadata. Its system should feel welcoming without becoming childish or promotional. The public composition should feel authored at first glance, then become predictable when a user starts a task. Keep the product or service evidence visible instead of replacing it with abstract decoration.

**Key Characteristics**
- A clear primary action
- A stable content hierarchy
- Readable metadata
- Intentional surface contrast
- Responsive media treatment
- Text equivalents for visual state

## 2. Color Palette & Roles

Use `#ffffff` for the main learning canvas and `#3a343a` for warm, readable body text. `#de00a5` is the signature action and selected state; keep it concentrated around enrollment and progress. The sampled `#ededee` surface works for course metadata, filters, and community context, while `#e5e7eb` provides a quiet divider. Add semantic colors only as labeled status, never as decorative confetti.

Use color roles consistently: background for the page ground, surface for grouped content, text for reading, brand for the primary action, border for structure, and semantic colors for states with text labels. Preview swatches should show the canvas, brand action, and primary reading color.

## 3. Typography Rules

Europa is the sampled display and body family. Use its heavier weights for course names, partner institutions, and step headings, then return to regular text for discussion and explanatory copy. FutureLearn needs an editorial rhythm: a large course promise, a compact institution or category line, and a clear time/progress explanation. Avoid compressed uppercase labels that would make the platform feel like a dashboard.

Suggested hierarchy: display-hero for the first promise, display-lg for a major section, h1 for the page task, h2 for grouped content, h3 for cards, body-lg for introductions, body for explanations, body-sm for metadata, label for controls, and caption for timestamps or secondary context. Never use tracking as a substitute for hierarchy.

## 4. Component Stylings

The primary enrollment button uses pink with white text and an 8px radius. A dark filled button can carry a completion or account action, while an outlined button handles saved courses and secondary navigation. Course cards should expose partner, title, rating or participation cue, duration, and current step. Tags can be pink-outline or neutral filled; inputs need a visible label and a generous 8px radius. Navigation should separate learning discovery from the signed-in course journey.

Treat controls as a system: every filled action needs a hover, pressed, disabled, and focus treatment; every card needs a stable content order; every input needs a label and error state. Use familiar icons inside tool buttons and give unfamiliar icons a tooltip.

## 5. Layout Principles

Build around a 1280px page with a 720px reading measure. Use a 12-column discovery grid: editorial copy and a featured course can sit beside a compact enrollment or category rail. Keep 64px header height, 24px card padding, and 64/96px section gaps. On list pages, align the institution and duration rows so course comparisons remain legible.

Prefer full-width bands with constrained inner content over decorative nested cards. Stable aspect ratios, explicit grid tracks, and fixed control dimensions keep media and labels from shifting the page as content loads.

## 6. Shapes & Radius Scale

Use 4px for compact controls, 8px for buttons and inputs, 12px for course cards, and 16px for a featured learning or community panel. Pills belong to course status and topic labels only. The shapes should soften the learning experience without turning every block into a floating bubble.

Keep the radius scale intentional: micro controls, standard controls, comfortable cards, relaxed feature panels, and pills only for true categorical selectors. A rounded rectangle should communicate an action or grouped item, not decorate every section.

## 7. Depth & Elevation

Use white and the sampled pale gray as the primary depth system. A course card can be separated by a 1px border and a small shadow only when it is interactive or selected. Dialogs and enrollment sheets may use a larger shadow with a scrim. Keep discussion content flat so the social layer does not look like an advertisement rail.

Elevation should explain interaction or layering. If a surface can be understood through contrast, spacing, and a border, do not add a shadow. Every overlay needs a scrim, a clear title, an escape path, and focus restoration.

## 8. Interaction & Motion

Use 150ms for hover/focus feedback, 240ms for filter and disclosure transitions, and 320ms for a course-step transition. Progress can move once when a lesson completes, but do not continuously animate badges or community counts. Respect reduced motion by switching all progress and carousel transitions to instant state changes.

Use motion to confirm an action, expose a relationship, or orient the user. Do not use looping motion to manufacture attention. Make the final state available without animation and ensure reduced-motion preferences remove nonessential transitions.

## 9. Accessibility & A11y

Use warm dark text on white for body copy and verify white text on pink for every button size. Focus rings must remain visible on both white and pale gray surfaces. Course status, completion, and rating need text labels in addition to icon or color. Discussion and lesson navigation should use landmarks and preserve heading order; dialogs must return focus to the initiating control.

Use semantic landmarks, a single logical heading order, keyboard-operable controls, and text alternatives for status. Test focus against every surface, including imagery, selected states, dialogs, and disabled-looking controls. Do not use a color difference as the only error, progress, rating, or selection signal.

## 10. Responsive Behavior

At 640px, stack course discovery and enrollment actions, keeping the pink action within the first screenful. At 1024px, collapse secondary course metadata into a labeled details row. At 1280px, show the institution and progress rail beside the course content. Keep 44px targets, stable course-image ratios, and a readable one-column lesson measure on mobile.

Responsive changes should reflow tasks rather than merely scale the desktop composition. Preserve the first useful action, the content subject, and the state explanation at every breakpoint. If a control row cannot fit, group it under a labeled disclosure instead of allowing clipped text.

## 11. Content & Voice

Use an encouraging but specific voice: name the outcome, the partner, the time commitment, and the next step. Prefer “Join course”, “Continue learning”, and “See what you’ll learn”. Empty states should recommend a topic or course family rather than merely say that nothing was found. Community copy should invite participation without manufacturing urgency.

Microcopy should state the object, action, and consequence. Keep empty states useful, error messages recoverable, and confirmation messages specific. Avoid claims that cannot be understood or verified from the surrounding interface.

## 12. Dark Mode & Theming

The sampled page is light-first with no production dark mode inferred. Keep the pink action stable and define separate surfaces before adding a dark theme. A future dark mode must preserve the warm text hierarchy and retain a non-color completion label for every step.

Theme tokens must cover background, surface, text, muted text, border, primary action, primary foreground, focus ring, and semantic states. A theme toggle should preserve the user’s position and announce the current mode; never use an automatic inversion that damages imagery or clinical/product evidence.

## 13. Lineage & Influences

FutureLearn sits between an editorial education site and a social course platform. Its restrained gray surfaces support institutional content, while the pink action and generous spacing make joining feel approachable. It borrows the clarity of course catalogs but rejects the cold, database-like density of a university administration portal.

The lineage is a design rationale, not a claim that the source site uses every implementation token in this file. The sampled source URL and recorded production observations remain the authority for brand-specific color and typography decisions.

## 14. Do's and Don'ts

**Do**
- Lead with a concrete learning outcome.
- Show institution and duration near the title.
- Use pink for joining and progress.
- Make the community layer readable.
- Keep course cards easy to compare.
- Use generous line height for lessons.
- Label completion in text.
- Keep mobile enrollment actions visible.

**Don't**
- Do not make a course tile a mystery box.
- Do not use pink for every heading.
- Do not hide duration or level in a tooltip.
- Do not add loud gradients to the learning canvas.
- Do not make community counts the only proof.
- Do not use color alone for completion.
- Do not bury the next lesson below decorative media.
- Do not collapse headings out of order.

## 15. Agent Prompt Guide

### Quick Color Reference

- Background: use the sampled canvas token.
- Foreground: use the sampled reading token.
- Primary: use the brand action token.
- Surface: use the grouped-content token.
- Border: use the quiet structural divider.
- Focus: use a high-contrast visible ring.

### Example Component Prompts

- Create a FutureLearn-like course hero with a warm editorial headline, partner line, duration, and pink “Join course” action.
- Design a course card that shows institution, title, current step, completion state, and a calm pale-gray metadata band.
- Build a topic discovery page with an editorial intro and a 3-column course grid that becomes one column on mobile.
- Create a lesson shell with a readable prose column, sticky progress navigation, and a clear “Continue learning” action.

### Iteration Guide

1. Check that the course outcome precedes the institution metadata.
2. Test pink action contrast at every button state.
3. Reduce card density until titles scan without truncation.
4. Make completion understandable without the progress color.
5. Verify the lesson measure on a narrow viewport.
6. Remove decorative UI that competes with the next lesson.