---
name: Danielsun
description: "This site is a strong example of expressive portfolio design, using massive typography and vibrant color to create a memorable, high-energy brand presence."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#808080"
  neutral: "#A6A6A6"
  bg-soft: "#F5F5F5"
  line: "rgba(0,0,0,0.12)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 88px
    lineHeight: 0.96
    fontWeight: 900
    letterSpacing: "-3px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.35
    fontWeight: 400
    letterSpacing: "normal"
  subtitle:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 14px
  md: 24px
  lg: 80px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

An expressive design portfolio using bold, oversized typography and vibrant yellow gradients.

*A bold, high-contrast personal portfolio that uses massive typography and vibrant yellow gradients to create a strong, energetic presence.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#808080`)** — uses `ink-soft` token
- **Muted (`#A6A6A6`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.12)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Base 4px grid with generous padding (32px, 40px) for sections.

## Elevation & Depth

- 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

## Shapes

- `sm`: 14px
- `md`: 24px
- `lg`: 80px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with dark backgrounds and bright yellow text.
- **card:** Glossy, 3D-styled circular or pill-shaped cards for client logos.
- **hero:** Full-screen hero featuring massive bold typography over a vibrant yellow diagonal gradient.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```