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

# ilovecreatives · Design System

> Creative learning with a lively editorial edge

**Theme:** light · **Industry:** education · **Source:** https://ilovecreatives.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._

ilovecreatives pairs a restrained black-and-white interface with oversized editorial typography and colorful creative work. The homepage brings courses, member profiles, community listings, articles, and goods together in a long, image-led browse experience.

## North star

Keep the interface monochrome and editorial; let real creative work provide the color and personality.

## Overview

The visual strategy is built on a near-monochrome foundation: white is the main canvas, black anchors the inverse hero and footer, #222222 carries subdued text and outlines, and #ebebeb marks occasional section bands. The opening is deliberately image-led, with an oversized white serif wordmark over a full-bleed photograph; later sections switch to white space and sharp black typography. SuisseRegular supplies the clean, compact interface voice, while romana adds expressive editorial contrast to display headings. The page alternates broad, airy introductions with horizontally browsable cards for courses, profiles, products, ads, articles, and creative websites. Rounded outline treatments make key phrases and actions feel informal without introducing a separate accent color. Photography, course artwork, product imagery, and student work supply nearly all the color, so the measured palette stays quiet while the content feels energetic. Thin dark borders and limited surface shading keep cards crisp and direct.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#000000` | `--color-studio-black` | neutral | Inverse newsletter/footer canvas, primary text, and dark outlines on cards and controls. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, white hero lettering, and contrasting text or buttons on dark areas. |
| Soft Ink | `#222222` | `--color-soft-ink` | neutral | Muted body and link text, fine borders, badges, and secondary interface details. |
| Quiet Fog | `#ebebeb` | `--color-quiet-fog` | surface | Pale section bands, including the introductory hero base and testimonial area. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Studio Black) · `--color-surface-2` → `#ebebeb` (Quiet Fog) · `--color-text` → `#000000` (Studio Black) · `--color-text-muted` → `#222222` (Soft Ink) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#222222` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ebebeb` | 17.62:1 | AAA |
| `#222222` | `#ffffff` | 15.91:1 | AAA |
| `#222222` | `#000000` | 1.32:1 | fail |
| `#222222` | `#ebebeb` | 13.35:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#ebebeb` | 1.19:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SuisseRegular | `--font-body` | webfont | 100, 400, 500 | Primary sans-serif for headings, body copy, navigation, links, and controls. | Inter |
| romana | `--font-display` | webfont | 100 | Expressive serif display face for the wordmark and selected editorial headings. | Bodoni Moda |
| Arial | `--font-arial` | system | 100 | Secondary fallback for a measured heading role. | Arial |

- **SuisseRegular:** Use light-looking weights, tight negative tracking, and mixed case; keep navigation compact.
- **romana:** Use for high-contrast display moments and short headings, not dense interface copy.
- **Arial:** Appears in a limited heading role; retain a plain sans-serif fallback rather than extending its use.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 59.5px | 100 | 0.95 | -0.04em | — | romana | Oversized serif wordmark and expressive display moments. |
| h1 | 54px | 100 | 1.05 | -0.04em | — | SuisseRegular | Primary introductory statement and major page heading. |
| h2 | 48.5px | 100 | 1.17 | -0.06em | — | SuisseRegular | Section titles and prominent editorial statements. |
| h3 | 35px | 100 | 1 | -0.04em | — | romana | Serif subheads and selected card or section headings. |
| h4 | 32px | 100 | 1.1 | -0.02em | — | Arial | Smaller subsection headings where a neutral sans-serif appears. |
| body | 14px | 100 | 1.4 | -0.02em | — | SuisseRegular | Course descriptions, profile details, and supporting copy. |
| button | 48.5px | 100 | 1.17 | -0.06em | — | SuisseRegular | Large outlined inline phrase treatments and prominent action text. |
| nav | 18px | 100 | 1 | -0.02em | — | SuisseRegular | Header navigation and compact section-level navigation. |
| link | 15px | 100 | 1.8 | -0.02em | — | SuisseRegular | Card titles, browse actions, and secondary text links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 8, 10, 13, 15, 17, 20, 24, 70 px.
- Section rhythm 50px · element gap — · card padding 58px · max content width 1300px.

A long single-column homepage uses a centered content area capped at the measured 1300px maximum width, with full-bleed media at the opening and near the lower page. Most sections align content to the left and place horizontal card rails beneath concise headings and browse actions. Generous gaps separate distinct content bands, while cards themselves are closely grouped for browsing. The #ebebeb bands interrupt the white canvas sparingly; a black newsletter/footer closes the page. Overall density is comfortable, with more breathing room around section titles than within card details.

## Shape & elevation

- Radius: button `9999px` · card `20px` · media `20px` · badge `9999px` · nav `50%` · link `9999px` · xs `8px` · sm `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s linear` on interactive elements.

The page reads mostly flat: no measured shadows or gradients define its surfaces. Thin #000000 or #222222 outlines distinguish pill controls, profile and listing cards, and badges from the white canvas. Rounded corners soften those borders, while large photography and artwork provide depth through their own imagery rather than interface layering.

## Imagery

The hero uses a full-bleed lifestyle photograph, with the white wordmark layered prominently over the subject and pale background. Lower sections rely on varied real-world creative content: monochrome portraits, course graphics, product photography, article covers, and screenshots or examples of student and community work. Media is presented as rounded cards or tightly framed tiles; vivid colors belong to the artwork and photography, not the interface palette.

## Components

### Hero and wordmark

Full-bleed photographic opening with a huge white serif wordmark, overlaid light navigation, concise intro copy, and an outlined video link.

### Course rail

Section heading and outlined browse action above horizontally arranged course cards with artwork, title, short description, and enrollment badge.

### Creative profiles

Portrait-led horizontal cards pair rounded photography with location, creator name, and discipline.

### Outlined phrase pills

Short emphasized phrases and actions use black text inside thin, rounded outlines, creating a playful inline control treatment.

### Content and product rails

Product, community-ad, article, and website cards use compact labels and imagery in horizontal browsing collections.

### Newsletter footer

A black closing section combines a white signup heading and button with dense grouped navigation and small legal links.

### Measured component styles

- **Primary button** (“✹creative skills”): transparent background · text #000000 · border 1px solid #222222 · radius 1458px · padding 1px 8px · 100 48.6px SuisseRegular
- **Link** (“Creative Copywriter Course”): transparent background · text #222222 · radius 0px · padding 0px · 100 30px SuisseRegular
- **Card**: transparent background · text #222222 · border 1px solid #000000 · radius 20px · padding 0px 0px 233.9px 0px · 100 0px SuisseRegular
- **Badge** (“Enrollment Open”): transparent background · text #222222 · border 1px solid #000000 · radius 40px · padding 5px 20px · 400 14px SuisseRegular
- **Navigation item** (“✦Course Directory”): transparent background · text #000000 · radius 0px · padding 3.6px · 100 18px SuisseRegular

## Do

- Use the measured palette only for interface colors.
- Let photographs and creative work supply visual color.
- Set display moments in a contrasting editorial serif.
- Keep section headings concise and left aligned.
- Use thin outlines and rounded pills for informal emphasis.
- Organize repeated content into horizontally browsable rails.

## Don't

- Do not add a new bright brand accent.
- Do not apply shadows or gradients to cards.
- Do not make every section a boxed panel.
- Do not use decorative display type for dense descriptions.
- Do not separate media from the content it represents.
- Do not crowd the section transitions with extra UI.

## Agent prompt

Build a new page in the ilovecreatives style: keep the interface palette to Gallery White (#ffffff), Studio Black (#000000), Soft Ink (#222222), and Quiet Fog (#ebebeb). Use a clean sans-serif similar to SuisseRegular for navigation, copy, and controls, with a high-contrast serif similar to romana reserved for expressive display moments. Start with a confident photographic or creative-work feature, then organize content into spacious, left-aligned sections with horizontal card rails and compact browse actions. Use real imagery as the primary source of color. Make cards feel flat and editorial, using fine dark outlines, rounded corners, and no shadows or gradients. Include playful outlined phrase pills sparingly, and finish with a strong black newsletter or navigation area with white text.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed photographic hero with overlaid header, oversized wordmark, intro copy, and video link. | overlay navigation, video link | white serif wordmark, light text on media, pale gray backdrop |
| 2 | product-grid | Introductory statement followed by course heading, browse action, and a horizontal course-card rail. | browse all courses, horizontal card browsing | course artwork, enrollment badges, white canvas |
| 3 | team | Section heading and browse action above a horizontal row of portrait-led member cards. | browse creatives, profile discovery | rounded portraits, location labels, discipline captions |
| 4 | testimonials | Full-width pale gray band with prominent testimonial copy and a small course-related visual. | testimonial proof, course promotion | gray section band, large quote text |
| 5 | product-grid | Section intro, shop action, brief category note, then a horizontal product-card rail. | shop all, product discovery | product photography, compact category tags |
| 6 | content-feed | Brief section heading above a horizontal row of compact bordered event and job listings. | browse ads, scan listings | outlined listing cards, small metadata labels |
| 7 | content-feed | Editorial heading and browse action above a horizontal row of illustrated article covers. | read all, article discovery | cover thumbnails, category labels, compact headlines |
| 8 | gallery | Heading and show-all action followed by a row of framed website and student-work previews. | show all gems, visual exploration | website thumbnails, small topic tags |
| 9 | other | Narrow multi-column strip of music recommendations and job-directory links. | playlist discovery, directory navigation | inline links, outlined phrase accents |
| 10 | gallery | Full-bleed media feature with a row of small visual tiles near the lower portion. | visual browsing, media-led exploration | edge-to-edge media, thumbnail strip |
| 11 | footer | Black full-width closing section with newsletter prompt, white subscribe control, grouped navigation, and legal links. | newsletter signup, footer navigation | inverse canvas, white text, multi-column link groups |

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