---
title: "Memorisely design system"
variant: extended
source: https://www.memorisely.com/
captured_at: 2026-10-12
theme: light
industry: education
generator: Design DNA (https://four.wiralomi.com/style/memorisely-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Memorisely · Design System

> A calm, spacious canvas for practical AI design learning.

**Theme:** light · **Industry:** education · **Source:** https://www.memorisely.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Memorisely presents AI design courses and workshops through a clean, white-first learning homepage. Bold centered messaging, restrained dark CTAs, and practical course imagery keep the long page approachable and easy to scan.

## North star

Keep the page predominantly white and quiet; use dark type, clear spacing, and practical learning imagery to make each section easy to scan.

## Overview

The page uses a white canvas as its defining visual foundation, with warm off-white panels and cards providing subtle separation instead of strongly coloured section bands. Near-black headings and buttons create contrast; muted grays carry supporting copy and navigation. Inter is used throughout, with confident semibold headings, compact body text, and a large, tightly tracked hero display. The hero is centered and spacious, while course listings, event cards, job listings, and testimonials shift into left-aligned or multi-column arrangements for efficient scanning. Imagery is practical rather than decorative: course thumbnails show instructors and interface overlays, while the skills product section features a dark code-like preview that stands out against the otherwise light page. Repeated generous gaps pace the long homepage. Soft card shadows and fine, low-contrast outlines add just enough layering without disrupting the flat, minimal composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the light background behind the hero, course content, and most sections. |
| Reading Gray | `#6e6e6e` | `--color-reading-gray` | semantic | Primary muted copy and navigation links, including supporting descriptions and labels. |
| Warm Porcelain | `#faf9f6` | `--color-warm-porcelain` | surface | Soft warm surface used for subtle cards and button-like chips against white. |
| Soft Ink | `#171717` | `--color-soft-ink` | brand | Headlines, strong text, and dark primary CTA backgrounds. |
| Quiet Gray | `#878787` | `--color-quiet-gray` | semantic | Lower-emphasis supporting text and small captions. |
| Slate Ink | `#414141` | `--color-slate-ink` | neutral | Secondary heading and body text variation visible in page typography. |
| Deep Charcoal | `#212121` | `--color-deep-charcoal` | neutral | Occasional dark text detail; visually close to the main near-black ink. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#faf9f6` (Warm Porcelain) · `--color-text` → `#171717` (Soft Ink) · `--color-text-muted` → `#6e6e6e` (Reading Gray) · `--color-text-subtle` → `#878787` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171717` | `#ffffff` | 17.93:1 | AAA |
| `#171717` | `#faf9f6` | 17.03:1 | AAA |
| `#6e6e6e` | `#ffffff` | 5.1:1 | AA |
| `#6e6e6e` | `#faf9f6` | 4.84:1 | AA |
| `#878787` | `#ffffff` | 3.59:1 | AA-large |
| `#878787` | `#faf9f6` | 3.41:1 | AA-large |

### Gradients

- `linear-gradient(90deg, rgb(255, 255, 255) 48%, rgba(255, 255, 255, 0) 97%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600 | All page typography, from hero display and section headings to body copy, captions, and links. | Inter |

- **Inter:** Use weights 400, 500, and 600; headings are semibold, hero display has tight negative tracking, and text remains in sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 600 | 1.14 | -0.04em | — | Inter | Large centered hero headline. |
| h1 | 40px | 600 | 1.2 | 0 | — | Inter | Primary page and major section headings. |
| h2 | 32px | 600 | 1.25 | 0 | — | Inter | Section titles such as course and job headings. |
| h3 | 22px | 600 | 1.45 | 0 | — | Inter | Course titles and prominent card headings. |
| h4 | 18px | 600 | 1.44 | 0 | — | Inter | Smaller subheads and supporting content headings. |
| body | 14px | 400 | 1.43 | 0 | — | Inter | Paragraphs, course descriptions, and general explanatory copy. |
| caption | 13px | 400 | 1.38 | 0 | — | Inter | Compact metadata, ratings, and understated labels. |
| link | 14px | 500 | 1.43 | 0 | — | Inter | Navigation and inline text links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 7, 8, 10, 11, 12, 16, 20, 32, 40 px.
- Section rhythm 80px · element gap 10px · card padding 16px · max content width 1264px.

The page follows a centered, single-column canvas with a measured maximum width of 1264px. The hero is centered, while most later section headings and content align left. Course cards form a responsive multi-column grid; workshops and testimonials use repeated card rows, and the job section combines introductory copy with listing content. A comfortable density and substantial section gaps create clear pauses across the long page. Keep card interiors consistently padded and use compact gaps between related elements.

## Shape & elevation

- Radius: button `8px` · card `12px` · media `50%` · link `28px` · xs `4px` · sm `6px` · md `8px` · lg `9px` · xl `10px` · 2xl `11px` · pill `9999px`
- Shadow `md` (other): `rgba(191, 191, 191, 0.25) 0px 1px 20px 0px`
- Shadow `hairline` (link): `rgba(110, 110, 110, 0.1) 0px 0px 0px 1px, rgba(110, 110, 110, 0.2) 0px 1px 0px 0px`
- Shadow `hairline-2` (link): `rgba(110, 110, 110, 0) 0px 0px 0px 1.2px`
- Shadow `hairline-3` (button): `rgb(255, 255, 255) 0px 0px 0px 1.2px`
- Shadow `lg` (card): `rgba(84, 84, 84, 0.1) 0px 1px 40px 0px`
- Shadow `md-2` (card): `rgba(26, 26, 26, 0.5) 0px 6px 10px 2px`
- Motion: standard transition `0.4s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

Most sections remain flat on the white canvas, with separation created through whitespace rather than borders or coloured bands. Cards use restrained shadows and subtle hairline treatment; avoid strong outlines or heavy elevation. The soft surfaces should feel like quiet layers, not floating panels.

## Imagery

Use real instructor and learner photography within course thumbnails, often paired with visible interface or AI-tool overlays. Product previews may show dark code or design-system screens, providing contrast against the white page. Keep imagery contained in rounded card frames and avoid adding decorative illustration styles that are not evidenced by the page.

## Components

### Top navigation

Compact rounded white navigation capsule with the Memorisely mark and text links, lifted subtly from the page with a soft shadow.

### Primary CTA

Near-black button with white text, an 8px radius, and measured vertical and horizontal padding; secondary actions remain light and understated.

### Course cards

Rounded image-led cards with instructor imagery, tool overlays, a course title, concise description, and compact cohort metadata.

### Skills product feature

Left-aligned product section with a title and short explanation above a wide dark code-like product preview and compact purchase actions.

### Workshop listings

Open, lightly framed event cards that prioritize workshop title, date, format, and host details.

### Testimonial cards

A calm stack of white review cards with small profile imagery, reviewer names, and muted testimonial copy.

### Measured component styles

- **Primary button** (“New AI prototyping skills.md”): background #faf9f6 · text #0000ee · radius 100px · padding 4px 8px 4px 6px · 400 12px sans-serif · shadow rgb(255, 255, 255) 0px 0px 0px 1.2px
- **Secondary button** (“Browse AI bootcamps”): background #171717 · text #0000ee · radius 8px · padding 8px 20px · 400 12px sans-serif
- **Link** (“AI design path”): transparent background · text #6e6e6e · radius 0px · padding 0px · 500 14px Inter
- **Card** (“Lauren Layre Memorisely's unique and eng”): background #ffffff · text #000000 · radius 12px · padding 16px · 400 12px sans-serif

## Do

- Keep the page canvas white and let whitespace establish section boundaries.
- Use Soft Ink for major headings and primary CTA backgrounds.
- Use muted gray for secondary copy, metadata, and links.
- Center the hero message and keep later content sections easy to scan.
- Use practical course photography and genuine-looking product interfaces.
- Reserve stronger shadows for card surfaces and small floating navigation.

## Don't

- Do not introduce saturated brand colours as broad page backgrounds.
- Do not use decorative gradients or ornamental illustrations as defining elements.
- Do not crowd the hero or collapse the generous section rhythm.
- Do not style every card as a strongly bordered or elevated panel.
- Do not use oversized all-caps headings or a condensed display typeface.
- Do not treat colours inside screenshots or thumbnails as the site palette.

## Agent prompt

Build a new Memorisely-style page with a white-first, quiet learning interface. Use Gallery White (#ffffff) as the main canvas, Warm Porcelain (#faf9f6) for occasional soft surfaces, and Soft Ink (#171717) for headings and primary CTA backgrounds. Set all copy in Inter, with semibold sentence-case headings and compact, readable supporting text in Reading Gray (#6e6e6e) or Quiet Gray (#878787). Center the hero, then use left-aligned content sections and responsive grids for courses or workshops. Let generous whitespace separate sections. Use rounded, image-led course cards with practical instructor and product-interface imagery; a dark code preview may provide a focused contrast point. Keep borders and shadows subtle, and use restrained near-black buttons rather than colourful calls to action. Prioritize clear scanning over decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero with headline, supporting copy, trust details, actions, logo row, and course imagery below. | Primary and secondary actions, Social proof, Brand trust logos | Large centered headline, Dark primary button, Muted partner logos |
| 2 | feature-grid | Four concise benefit statements arranged as a compact row beneath course content. | Benefit scanning, Training value summary | Small icons, Short headings, Muted descriptions |
| 3 | product-showcase | Left-aligned heading and description above a wide, full-bleed dark product preview. | Product explanation, View and purchase actions | Dark interface preview, Compact action links, Rounded media |
| 4 | feature-grid | Four short benefit items in a horizontal row between event listings and career content. | Quick benefit scan, Career-oriented reassurance | Minimal icon-and-text items, Fine visual separators |
| 5 | content-feed | Two-column introduction and job listings, with open positions displayed as vertically spaced rows. | Browse open roles, View all jobs | Text-led job rows, Company marks, Compact role metadata |
| 6 | testimonials | Three-column review presentation that continues into a vertically stacked testimonial feed. | Learner feedback, Reviewer attribution | Profile thumbnails, Soft white cards, Muted testimonial copy |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/memorisely-com