# Ilovecreatives · Design system migration spec

> Source: https://ilovecreatives.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a premium editorial layout that uses bold typography and generous whitespace to create a strong, community-focused brand identity.

## 1. Identity DNA

Ilovecreatives operates like a well-organized studio: the tools are visible, the work is the focus, and the space itself is designed to inspire making. Its identity is that of a modern community hub and digital trade school, built for multi-passionate creatives. The design system provides the clean, structured framework within which this community can flourish.

**One-liner:** A stylish, editorial platform serving as a digital trade school and community for creative professionals.
**Keywords:** creative · educational · community · slashies · trade school
**Analogy:** A modern, stylish community hub and digital trade school for multi-passionate creatives.

## 2. Color

The color strategy is one of deliberate restraint. A stark, high-contrast monochrome foundation of #FFFFFF and #222222 establishes a clean, editorial canvas, reserving a single muted green for specific promotional callouts.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#222222` | body text |
| `--muted` | `#757575` | placeholder |
| `--accent` | `#489442` | single accent |
| `--line` | `rgba(34,34,34,0.2)` | divider |

**Color principle:** High-contrast monochrome base with a single muted green accent for promotional banners.

This disciplined approach ensures visual clarity and directs focus, using color only as a tool for hierarchy and emphasis.

## 3. Typography

The typographic voice is defined by a bold dialogue between a high-contrast transitional serif for commanding display headlines and a light-weight humanist sans-serif for body copy. This pairing creates a sophisticated editorial rhythm, balancing dramatic scale with readable, understated detail.

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1.2px | Main hero logotype |
| heading | 30px | 1.2 | 400 | -0.36px | Section headers and large subheads |
| body | 18px | 1.4 | 100 | -0.36px | Main body text and product descriptions |
| caption | 13px | 1.4 | 100 | -0.36px | Small UI text, tags, and metadata |

**Type rules:**
- Display typography is set in a high-contrast transitional serif with tight tracking.
- Body text is set in a light-weight humanist sans-serif.
- Buttons use a pill shape with uppercase or capitalized styling.

## 4. Spacing

Spatial rhythm is governed by a consistent 4px base grid, ensuring mathematical harmony across all elements. Generous padding within large container blocks creates breathing room and a sense of deliberate composition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous padding in large container blocks.

## 5. Surfaces

Surfaces are defined by depth and crisp definition rather than decoration. Shadows are minimal and soft, while a consistent 1px solid border provides clear, tangible edges to components like cards.

- **Radius:** sm 4px · md 8px · lg 20px · pill 450px
- **Shadows:**
  - rgba(121,121,121,0.17) 2px 2px 20px 0px
- **Borders:** 1px solid #222222

## 6. Layout

The structural skeleton begins with a full-bleed photographic hero section that transitions into a disciplined, multi-column grid. This grid organizes products and community listings into clean, card-based modules for easy scanning.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero section transitioning into a structured, multi-column grid for products and community listings.

## 7. Motion & Interaction

Motion is treated as functional feedback rather than ornamentation. Subtle opacity and color transitions on hover occur within a fast 0.1s linear timeframe, ensuring interactions feel immediate and fluid.

- **Durations:** micro 100ms · small 170ms · medium 600ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Subtle opacity and color transitions on hover for buttons and links.
  - Fast 0.1s linear transitions for standard interactive elements.

- **Hover:** Background fills to solid or text color inverts for buttons.
- **Click:** Immediate feedback via state change or link navigation.
- **Transition:** Fast, linear transitions for color and background-color properties.
- **Keyboard:** Standard focus states with visible outlines or high-contrast indicators.

## 8. Voice & Don'ts

The editorial voice is playful, welcoming, and community-focused, with headlines that are conversational and slightly irreverent. This tone is matched by a visual system that avoids corporate formality and cold transactional language.

- **Tone:** Playful, welcoming, and community-focused.
- **Headline style:** Conversational, slightly irreverent, and direct.
- **CTA style:** Clear, action-oriented, and frequently pill-shaped.
- **Avoid:** Formal corporate jargon / Dense blocks of uninterrupted text without visual breaks / Cold or purely transactional language

### Don'ts
- ❌ Don't use heavy drop shadows — screenshot shows minimal, soft shadows like rgba(121,121,121,0.17) 2px 2px 20px 0px.
- ❌ Don't use bright, saturated accent colors — screenshot shows a muted, earthy green (#489442) only for specific banners.
- ❌ Don't use bold font weights for body text — screenshot shows a consistent use of font-weight: 100 for standard copy.
- ❌ Don't use sharp, square corners for cards or buttons — screenshot shows consistent use of pill shapes (radius: 450px) and large rounded corners (radius: 20px).
- ❌ Don't use complex gradients for backgrounds — screenshot shows solid white backgrounds and photographic hero overlays.
- ❌ Don't use wide, sprawling line heights — screenshot shows tight, controlled line-heights (1.2 to 1.4) for a dense, editorial feel.

The system deliberately omits heavy drop shadows, saturated neon accents, bold body text, sharp corners, and complex gradients.

## System Prompt (paste into AI tool)

```
This site is a creative community platform and digital trade school for 'slashies' (multi-passionate creatives). The visual identity is built on a clean, monochromatic base using #222222 ink on #FFFFFF backgrounds, accented by a muted #489442 green specifically for promotional banners. Typography relies on a bold, high-contrast transitional serif for massive display headlines and a light-weight humanist sans-serif (Suisse Regular at 100 weight) for body copy, creating a sophisticated editorial feel. Critical donts: avoid using saturated or neon colors, never use bold font weights for body text, and always use rounded pill shapes for primary buttons and tags. The layout combines full-bleed photographic hero sections with structured, card-based grids for products and community listings, all using tight letter-spacing and generous padding.
```