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

# Design Full-Time · Design System

> A dark course catalog built for working designers.

**Theme:** dark · **Industry:** design · **Source:** https://designfulltime.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._

Design Full-Time presents practical design courses in a dark, tightly organized catalog. Strong course imagery, clear outcomes, and prominent enrollment actions make the page feel direct and work-focused.

## North star

Keep the interface quiet and dark so course artwork, concise outcomes, and enrollment actions carry the attention.

## Overview

The page uses a near-black canvas as its dominant brand surface, giving white headings and muted gray descriptions strong contrast without feeling glossy. Course cards are arranged as a vertical catalog, each pairing a wide, colorful course thumbnail with a compact text and action column. The thumbnails carry most of the vivid color: warm orange, yellow, green, and blue treatments appear within individual course art and CTA gradients rather than defining the overall palette. Inter supplies a practical, consistent voice across navigation, headlines, descriptions, and buttons; bold headings establish hierarchy while smaller muted copy stays readable against the dark background. Thin charcoal borders separate cards and sections instead of relying on rounded containers or pronounced shadows. A centered wordmark and concise supporting line lead into a promotional strip, then repeated course rows, a free-video lesson band, and a restrained closing notification area. Spacing is compact but orderly, keeping many offerings scannable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Night Canvas | `#111111` | `--color-night-canvas` | brand | Dominant page canvas and dark button surface; the foundation for the catalog. |
| Quiet Gray | `#a0a0a0` | `--color-quiet-gray` | neutral | Primary muted body copy, especially course descriptions and supporting text. |
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Headings, navigation, button labels, and high-contrast course information. |
| Charcoal Rule | `#292929` | `--color-charcoal-rule` | surface | Hairline borders that outline course cards and media sections. |
| Graphite Band | `#252525` | `--color-graphite-band` | surface | Raised dark section surfaces, including the free-video lesson area. |
| Deep Graphite | `#1d1d1d` | `--color-deep-graphite` | surface | Subtle alternate section surface and dark gradient transition. |
| Slate Shadow | `#171819` | `--color-slate-shadow` | surface | Subdued gradient stop within dark section backgrounds. |
| True Black | `#000000` | `--color-true-black` | neutral | Small incidental dark details and text remnants; not a defining brand surface. |
| Hot Vermilion | `#fa3a19` | `--color-hot-vermilion` | accent | Warm orange-red appearing in select course artwork and CTA gradient treatments. |
| Course Gold | `#ffc84e` | `--color-course-gold` | accent | Yellow highlight in promotional accents and selected course artwork or buttons. |
| Blue Slate | `#2c3e50` | `--color-blue-slate` | semantic | Sparse heading text color recorded by measurement; not a dominant visible page color. |
| Navigation Gray | `#888888` | `--color-navigation-gray` | neutral | Secondary navigation and low-emphasis text details. |
| Soft Silver | `#a8a8a8` | `--color-soft-silver` | neutral | Occasional supporting copy and subdued interface text. |
| Border Ash | `#414141` | `--color-border-ash` | surface | Fine outlines and dividers around secondary links and headings. |
| Pale Button | `#cfcfcf` | `--color-pale-button` | semantic | Measured inverse button surface for selected purchase actions. |
| Silver Text | `#c3c3c3` | `--color-silver-text` | neutral | Measured inverse text treatment on small action or content elements. |

### Semantic aliases

`--color-canvas` → `#111111` (Night Canvas) · `--color-surface` → `#252525` (Graphite Band) · `--color-surface-2` → `#1d1d1d` (Deep Graphite) · `--color-surface-3` → `#cfcfcf` (Pale Button) · `--color-surface-4` → `#c3c3c3` (Silver Text) · `--color-text` → `#ffffff` (Studio White) · `--color-text-muted` → `#a0a0a0` (Quiet Gray) · `--color-text-subtle` → `#2c3e50` (Blue Slate) · `--color-border` → `#292929` (Charcoal Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#ffffff` | `#252525` | 15.33:1 | AAA |
| `#ffffff` | `#1d1d1d` | 16.86:1 | AAA |
| `#ffffff` | `#cfcfcf` | 1.56:1 | fail |
| `#a0a0a0` | `#111111` | 7.22:1 | AAA |
| `#a0a0a0` | `#252525` | 5.86:1 | AA |
| `#a0a0a0` | `#1d1d1d` | 6.45:1 | AA |
| `#a0a0a0` | `#cfcfcf` | 1.68:1 | fail |
| `#2c3e50` | `#111111` | 1.72:1 | fail |
| `#2c3e50` | `#252525` | 1.4:1 | fail |

### Gradients

- `linear-gradient(95.47deg, rgba(216, 157, 138, 0.05) 0%, rgba(166, 101, 80, 0.05) 42.71%, rgba(90, 92, 85, 0.05) 100%)`
- `linear-gradient(95.47deg, rgba(255, 204, 23, 0.05) 0%, rgba(200, 167, 118, 0.05) 42.71%, rgba(167, 61, 47, 0.05) 100%)`
- `linear-gradient(95.47deg, rgba(60, 65, 69, 0.2) 0%, rgba(47, 52, 56, 0.2) 45.5%, rgba(31, 32, 33, 0.2) 100%)`
- `linear-gradient(95.47deg, rgba(193, 211, 78, 0.05) 0%, rgba(89, 211, 78, 0.05) 42.71%, rgba(81, 211, 78, 0.05) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | system | 400, 700, 600, 800 | Navigation, course titles, descriptions, labels, and buttons throughout the page. | Inter |

- **Inter:** Neutral sans-serif; bold weights emphasize headings and navigation, with compact sentence-case copy and no measured tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.491, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 700 | 1.04 | 0 | — | Inter | Primary page or course headline, set in bold white. |
| h2 | 24px | 700 | 1.33 | 0 | — | Inter | Course titles and secondary section headings. |
| body | 18px | 400 | 1.56 | 0 | — | Inter | Course summaries and supporting explanatory copy. |
| caption | 16px | 700 | 1.5 | 0 | — | Inter | Small labels, instructor details, and supporting metadata. |
| button | 16px | 800 | 1.5 | 0 | — | Inter | Enrollment, notification, and other action labels. |
| nav | 16px | 700 | 1.5 | 0 | — | Inter | Top navigation links and account access. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 5, 6, 8, 10, 12, 16, 24, 32, 40, 48 px.
- Section rhythm 48px · element gap 16px · card padding — · max content width 1374px.

A single-column page flow presents a centered brand introduction above a full-width promotional strip and a long stack of course rows. The measured maximum page width is 1374px; the screenshot shows generous outer margins at desktop width. Each course row uses a two-column split, with media on the left and copy plus paired actions on the right. The layout is comfortable but visually dense, using repeated spacing intervals and clear section gaps to keep a long catalog scannable.

## Shape & elevation

- Radius: media `50%`
- Shadow `hairline` (other, nav): `rgba(0, 0, 0, 0) 0px 4px 2px -2px`
- Shadow `hairline-2` (other): `rgba(0, 0, 0, 0.35) 0px 4px 0px 0px`

The interface is largely flat. Thin charcoal borders define course cards, media regions, and secondary actions; dark alternate surfaces separate content bands. Avoid floating cards, rounded containers, and dramatic shadows. Limited subtle shadowing may appear in navigation details, but borders and tonal contrast do the main structural work.

## Imagery

Course thumbnails are prominent, rectangular video or course-cover images, frequently featuring the instructor, design interfaces, or oversized graphic lettering. Their saturated warm and cool colors contrast with the restrained dark interface. A later row of free lessons uses several smaller video thumbnails. Keep imagery crisp and unrounded; vivid color belongs chiefly to the course artwork rather than the page chrome.

## Components

### Course card

A bordered dark row pairs a wide course thumbnail with a title, short summary, instructor attribution, and two adjacent actions.

### Purchase button

Prominent enrollment action; measured component uses a #cfcfcf surface with white text, while screenshots also show vivid course-specific gradient treatments.

### View Details link

Secondary action sits beside enrollment, with white text and a thin #414141 outline.

### Promotional strip

A narrow horizontal offer band places a saving message, bundle price, and bright action button across one row.

### Free lesson gallery

A contrasting dark-gray band arranges several video thumbnails with concise lesson titles and course labels.

### Student Login

Compact top-right outlined navigation button with white text and a restrained charcoal border.

### Notification panel

Quiet closing section presents a short coming-soon message with a centered notification action.

### Measured component styles

- **Primary button** (“Take the Course - $149”): background #cfcfcf · text #ffffff · radius 0px · padding 12px 8px · 400 15px Inter
- **Secondary button** (“Student Login”): transparent background · text #ffffff · border 1px solid #4d4d4d · radius 0px · padding 8px 16px · 400 16px Inter
- **Link** (“View Details”): transparent background · text #ffffff · border 1px solid #414141 · radius 0px · padding 12px 0px · 400 15px Inter
- **Navigation item** (“CoursesJobs and Events Design Full Time ”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px Inter · shadow rgba(0, 0, 0, 0) 0px 4px 2px -2px

## Do

- Use #111111 as the dominant page canvas.
- Set headings in bold white and supporting copy in muted gray.
- Give course artwork the strongest color and visual detail.
- Repeat the media-left, copy-right course-row structure.
- Use thin charcoal borders to clarify section boundaries.
- Keep calls to action obvious and paired with a secondary details link.

## Don't

- Do not brighten the whole interface with large colored surfaces.
- Do not treat thumbnail colors as the site-wide palette.
- Avoid rounded, floating card treatments and heavy shadows.
- Do not bury the enrollment action inside long descriptions.
- Avoid oversized decorative copy that competes with course artwork.
- Do not make course rows feel loosely spaced or disconnected.

## Agent prompt

Build a new page in the Design Full-Time visual style: a restrained dark catalog where course content stays easy to scan. Use Night Canvas (#111111) as the main background, Studio White (#ffffff) for strong headings and actions, Quiet Gray (#a0a0a0) for descriptions, and Charcoal Rule (#292929) for subtle borders. Keep vivid colors such as Hot Vermilion (#fa3a19) and Course Gold (#ffc84e) mainly inside course artwork or limited CTA accents. Use Inter throughout. Organize content as a vertical sequence of bordered, two-column course rows with rectangular media, concise descriptions, instructor metadata, and paired enrollment/details controls. Add a compact promotional band and a smaller video lesson collection where appropriate. Favor flat surfaces, crisp alignment, and measured spacing over decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | One long dark page with a centered brand intro, offer strip, stacked course rows, video lessons, notification panel, and footer. | Browse courses in sequence, Compare course details, Enroll directly, Explore free lessons | Dark canvas, Bordered split cards, Promotional banner, Video thumbnail gallery, Compact footer |

## Source CSS custom properties (selected)

```css
--vt-c-text-light-1: #2c3e50;
--vt-c-text-light-2: rgba(60, 60, 60, .66);
--vt-c-text-dark-1: #ffffff;
--vt-c-text-dark-2: rgba(235, 235, 235, .64);
--color-background: #ffffff;
--color-background-soft: #f8f8f8;
--color-background-mute: #f2f2f2;
--color-border: rgba(60, 60, 60, .12);
--color-border-hover: rgba(60, 60, 60, .29);
--color-heading: #2c3e50;
--color-text: #2c3e50;
--section-gap: 160px;
```

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