# Godly · Design system migration spec

> Source: https://godly.website  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of how extreme restraint in UI design can elevate the perceived quality and focus of curated content, making it a perfect reference for editorial and gallery layouts.

## 1. Identity DNA

The system operates like a pristine gallery space, where every element of the interface recedes to serve the curated content. Its strict monochromatic palette and generous white space create a neutral, expansive frame, making the diverse colors of each showcased design the sole point of visual interest.

**One-liner:** A minimal, high-end curation gallery designed to showcase web design inspiration.
**Keywords:** inspiration · curation · minimalism · web design · gallery
**Analogy:** A pristine, expansive gallery space where the artwork is the only thing that matters.

## 2. Color

The color system is defined by a strict, high-contrast monochromatic palette of pure black and white. This deliberate absence of chromatic UI accent ensures the interface acts as a neutral stage for the content it presents.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--line` | `rgba(0, 0, 0, 0.05)` | divider |

**Color principle:** Strict monochromatic palette that acts as a neutral frame for the diverse colors of the curated content.

The principle is clear: the UI chrome is invisible, allowing the curation itself to be the only source of color and visual complexity.

## 3. Typography

Typography is handled exclusively through the humanist sans-serif Inter, establishing a consistent, clean voice. Headlines are set semi-bold at weight 500, while body copy maintains a relaxed line height for optimal readability.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -2px | Main hero headline |
| h2 | 32px | 1.2 | 500 | -0.64px | Section headings |
| body | 16px | 1.5 | 400 | -0.32px | Standard body text |
| caption | 14px | 1.4 | 400 | -0.28px | Subtitles and descriptions |

**Type rules:**
- All text uses Inter font-family with slight negative letter-spacing.
- Headlines use font-weight 500 for a semi-bold appearance.
- Body text maintains a relaxed 1.5 line height for readability.

## 4. Spacing

Generous white space and consistent padding establish a clean, breathable rhythm throughout the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous white space and consistent padding create a clean, breathable rhythm.

## 5. Surfaces

Depth is suggested through subtle, low-opacity shadows that lift surfaces just enough to separate them from the background. Borders are kept to a near-invisible 1px solid line, providing minimal structural definition without visual weight.

- **Radius:** sm 6px · md 12px · lg 24px · pill 9999px
- **Shadows:**
  - 0px 10px 15px -3px rgba(0, 0, 0, 0.1)
  - 0px 4px 6px -4px rgba(0, 0, 0, 0.1)
- **Borders:** 1px solid rgba(0, 0, 0, 0.05)

## 6. Layout

The layout skeleton begins with a central, single-column hero section for initial focus. It then transitions into a dense, symmetrical masonry grid, prioritizing visual exploration and efficient use of space for the content cards.

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

**Skeleton:** A central, single-column layout for the hero section, transitioning into a dense, symmetrical masonry grid of content cards.

## 7. Motion & Interaction

Motion is applied with deliberate restraint, focusing purely on functional feedback. Subtle opacity fades and smooth background-color transitions at 150ms provide a calm, premium interaction feel without distracting from the content.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle opacity fades on hover
  - Smooth background-color transitions for interactive elements
  - Subtle scale transforms on buttons and cards

- **Hover:** Subtle changes in opacity or background-color with a 150ms transition.
- **Click:** Immediate visual feedback with a slight scale transform.
- **Transition:** All interactive elements use a consistent 150ms cubic-bezier(0.4, 0, 0.2, 1) easing for smooth transitions.
- **Keyboard:** Standard focus outlines, likely matching the subtle border-radius and color scheme.

## 8. Voice & Don'ts

The editorial voice is confident, concise, and aspirational. It favors short, punchy headlines and direct calls to action, avoiding complex jargon and dense paragraphs in primary interface areas.

- **Tone:** Confident, concise, and aspirational.
- **Headline style:** Short, punchy, and highly legible statements that emphasize quality and inspiration.
- **CTA style:** Direct and action-oriented, using simple verbs and symbols like 'Subscribe +'.
- **Avoid:** Excessive exclamation points / Complex technical jargon / Long, dense paragraphs in primary areas

### Don'ts
- ❌ Don't use drop shadows on cards — screenshot shows completely flat, borderless image cards.
- ❌ Don't use serif fonts for headlines — screenshot shows a clean, humanist sans-serif throughout.
- ❌ Don't use a complex, multi-color UI chrome — screenshot shows a strictly monochromatic black and white interface.
- ❌ Don't use sharp, 90-degree corners on primary buttons — screenshot shows fully rounded, pill-shaped buttons.
- ❌ Don't use excessive body padding or tight line spacing — screenshot shows generous white space and a relaxed 1.5 line height.
- ❌ Don't use flashy gradients or decorative backgrounds — screenshot shows a solid white background that lets the content breathe.

The system deliberately forgoes any chromatic accent, decorative gradients, or sharp corners in its primary UI, cementing its role as a purely functional frame.

## System Prompt (paste into AI tool)

```
You are designing a premium, minimalist web design inspiration gallery. The aesthetic is defined by a strict black-and-white color palette (#FFFFFF background, #000000 text) that acts as a neutral frame for curated content. The typography is exclusively a humanist sans-serif with tight, negative letter-spacing (-0.32px) and a moderate font-weight of 400 for body and 500 for headlines. The layout relies heavily on a symmetrical masonry grid with generous white space. Critical constraints: Do not use serif fonts. Do not apply drop shadows or borders to the main content cards. Do not introduce any chromatic accent colors into the UI chrome. Use pill-shaped buttons with solid fills for primary actions and subtle, borderless elements for secondary interactions.
```
