# Danielsun · Design system migration spec

> Source: https://danielsun.space  ·  Curated by OpenDesign  ·  en

> This site is a strong example of expressive portfolio design, using massive typography and vibrant color to create a memorable, high-energy brand presence.

## 1. Identity DNA

This design system operates with the conviction of a gallery wall painted in stark monochrome, where a single, vibrant gradient command attention. It is a built environment of expressive confidence, using mass and contrast as its primary architectural materials rather than ornament or subtlety.

**One-liner:** An expressive design portfolio using bold, oversized typography and vibrant yellow gradients.
**Keywords:** bold · expressive · personable · modern · high-contrast
**Analogy:** A bold, high-contrast personal portfolio that uses massive typography and vibrant yellow gradients to create a strong, energetic presence.

## 2. Color

The palette is a study in controlled intensity, built on a foundation of absolute black and white for maximum graphic impact. Against this stark field, vibrant yellow gradients are deployed as strategic, high-energy accents that define key visual moments.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#808080` | secondary text |
| `--muted` | `#A6A6A6` | placeholder |
| `--line` | `rgba(0,0,0,0.12)` | divider |

**Color principle:** High-contrast palette dominated by stark black and white, punctuated by vibrant yellow gradients.

The principle is one of high contrast as clarity, where the absence of intermediate tones creates immediate visual hierarchy and a memorable brand signature.

## 3. Typography

Typography here is not merely informational but sculptural, used at a massive scale with extreme bold weights to become the primary visual element. The choice of a grotesque sans-serif in weight 900, often set in tight, negative-tracked all-caps, speaks with a voice of unreserved confidence.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 88px | 0.96 | 900 | -3px | Main title and section headings |
| body | 18px | 1.35 | 400 | normal | Body copy and navigation |
| subtitle | 28px | 1.3 | 400 | normal | Secondary headings and quotes |

**Type rules:**
- Use extremely bold (900) weight for large display text.
- Apply tight letter-spacing (negative) to large display sizes.
- Reserve all-caps for massive display text.

## 4. Spacing

Rhythm is established through a strict 4px base grid, providing a consistent structural cadence beneath the expressive surface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 16 / 20 / 24 / 32 / 40 / 64 / 96 px
- **Rhythm:** Base 4px grid with generous padding (32px, 40px) for sections.

## 5. Surfaces

Depth is achieved not through delicate borders but through pronounced, layered shadows that lift elements with a tangible, almost physical presence. The absence of visible borders lets bold color blocks and these shadows define form and separation.

- **Radius:** sm 14px · md 24px · lg 80px · pill 999px
- **Shadows:**
  - 0px 19px 8px 0px rgba(0, 0, 0, 0.3)
  - 0px 64px 128px 0px rgba(0, 0, 0, 0.25)
  - inset 0px 6px 6px 0px rgb(184, 184, 184)
- **Borders:** None visible

## 6. Layout

The structural skeleton favors full-width, center-aligned sections that allow massive typography to dominate the horizontal field. Vertical spacing is generous, creating a spacious, unhurried scroll that gives each section room to resonate as a distinct statement.

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

**Skeleton:** Full-width sections with center-aligned typography and generous vertical spacing.

## 7. Motion & Interaction

Motion is treated as a universal polish rather than a narrative device, applied consistently across all interactive elements to create a sense of seamless responsiveness. The philosophy is one of smooth, immediate feedback that reinforces the system's confident and meticulous character.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions for all interactive elements (all 592 elements have transition property).

- **Hover:** Subtle brightness or scale changes on interactive elements.
- **Click:** Immediate visual feedback.
- **Transition:** Consistent smooth transitions applied universally.
- **Keyboard:** Standard focus management.

## 8. Voice & Don'ts

The editorial voice mirrors the visual system: friendly, casual, and highly confident, using massive, bold statements for headlines and direct, action-oriented language for calls to action. It operates in deliberate opposition to the formal, corporate tone and muted palettes typical of traditional SaaS or portfolio sites.

- **Tone:** Friendly, casual, and highly confident.
- **Headline style:** Massive, bold, uppercase statements.
- **CTA style:** Direct and action-oriented, using bright yellow highlights.
- **Avoid:** Formal corporate language / Small, delicate typography / Muted color palettes / Rigid, grid-heavy layouts without expressive elements

### Don'ts
- ❌ Don't use small or light typography — screenshot shows massive, bold (weight 900) display text instead.
- ❌ Don't use a muted or monochrome palette — screenshot shows vibrant yellow gradients dominating the hero instead.
- ❌ Don't use standard rectangular buttons — screenshot shows rounded pill-shaped buttons instead.
- ❌ Don't use flat, 2D icons — screenshot shows glossy, 3D-styled client logos instead.
- ❌ Don't use complex multi-column grids for the hero — screenshot shows center-aligned, full-width typography instead.
- ❌ Don't use subtle, thin borders — screenshot shows strong shadows and bold color blocks instead.

It deliberately avoids the use of small or delicate typography, muted color schemes, and flat, two-dimensional iconography in favor of its own bold, expressive language.

## System Prompt (paste into AI tool)

```
This is a bold, expressive design portfolio for a SaaS and Web3 design partner. The design DNA is characterized by massive, ultra-bold typography (weight 900) in grotesque-sans categories, paired with a stark high-contrast palette of solid black (#000000) and white (#FFFFFF), punctuated by vibrant yellow gradients. The layout is spacious with generous padding and center-aligned sections. Critical don'ts: never use small or light typography; never use a muted, corporate color palette; never use flat, 2D icons for client work—always use glossy, 3D-styled elements. Avoid rigid, formal layouts in favor of expressive, full-width sections with massive text.
```
