humanerd.kr Design System
생성일: 2026-05-20 Status: implementing Author: Drewgent (humanered content design guide)
1. Design Philosophy
“Reference-style + Editorial clarity”
설명 필요 없이 눈에 들어오는 구조. Non-expert audience 대상 — 아이디어 전달, 방법 가이드 수준. 기술적 깊이 배제.
핵심 3가지 원칙:
- Scan-first, read-second — 글 읽기 전에 구조가 보임
- Warmth over chrome — polished marketing 아니라 workshop/museum 느낌
- Clear boundaries — 각 콘텐츠의 시작/끝이 한눈에 보임
2. Color Palette
Light Mode (Primary)
:root {
--humanerd-ink: #161614; /* 거의 검정, warm black — 제목, 중요 텍스트 */
--humanerd-muted: #6b6860; /* 중간 회색 — 설명, 부연 텍스트 */
--humanerd-line: #dedbd5; /* 구분선, border */
--humanerd-paper: #fbfaf7; /* 페이지 배경 — warm off-white */
--humanerd-wash: #f1eee7; /* 카드 배경 — paper보다 살짝 진한 */
--humanerd-accent: #7b5f3d; /* amber/brown — 링크, 클릭 요소 */
--humanerd-accent-soft: #e3d7c6; /* accent soft — hover state, subtle highlight */
}Dark Mode
body[data-theme="dark"] {
--humanerd-ink: #f0efe9; /* 밝은 text */
--humanerd-muted: #9a9590; /* muted text */
--humanerd-line: #2e2e2a; /* 구분선 */
--humanerd-paper: #161618; /* dark background */
--humanerd-wash: #1e1e1a; /* 카드 배경 */
--humanerd-accent: #c4956a; /* lighter amber for dark bg */
--humanerd-accent-soft: #3d3328; /* subtle highlight */
}Usage Guide
| Color | Usage |
|---|---|
--humanerd-ink | h1, h2, page titles, strong text |
--humanerd-muted | body text, descriptions, captions |
--humanerd-line | borders, dividers between sections |
--humanerd-paper | <body> background |
--humanerd-wash | card backgrounds, callout boxes |
--humanerd-accent | links, buttons, interactive elements |
--humanerd-accent-soft | hover backgrounds, soft highlights |
3. Typography
Font Stack
--headerFont: 'Schibsted Grotesk', 'Helvetica Neue', sans-serif;
--bodyFont: 'Source Sans 3', 'Helvetica Neue', sans-serif;
--codeFont: 'IBM Plex Mono', 'Menlo', monospace;Scale
| Element | Size | Weight | Line-height | Letter-spacing |
|---|---|---|---|---|
| Page title (h1) | clamp(2.4rem, 5vw, 4.5rem) | 700 | 1 | -0.035em |
| Section title (h2) | 0.85rem (uppercase) | 600 | 1 | 0.12em |
| Card title (h3) | 1.35rem | 600 | 1.2 | -0.01em |
| Body text | 1.02rem | 400 | 1.65 | 0 |
| Caption | 0.9rem | 400 | 1.5 | 0 |
Rules
- h1: clamp 기반 responsive, heavy letter-spacing negative (-0.035em ~ -0.04em)
- h2: UPPERCASE, small text (0.85rem), wide letter-spacing (0.12em) — section 구분용
- h3: card 제목용, medium weight
- Body: maximum width 65ch ( READING line-length ), line-height 1.65
4. Layout
Page Structure
[Page Title] ← h1, large, negative letter-spacing
[Description] ← muted, max-width 48rem
[Content Area]
[Section: What I Build] ← h2 uppercase + top border
[Card Grid] ← 2-column grid on desktop, 1-col mobile
[Section: Featured] ← h2 uppercase + top border
[Card Grid]
[Footer: Contact / Links]
Grid System
/* 2-column card grid */
.landing-page ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
}
/* Mobile: 1 column */
@media (max-width: 800px) {
.landing-page ul {
grid-template-columns: 1fr;
}
}Spacing
--spacing-section: 4rem; /* section 간격 */
--spacing-card: 1rem; /* card 내부 패딩 */
--spacing-border-top: 1px solid var(--humanerd-line);Card Design
.card {
padding: 1rem;
border: 1px solid var(--humanerd-line);
background: var(--humanerd-wash); /* 55% wash + transparent */
border-radius: 8px;
transition: border-color 0.2s ease;
}
.card:hover {
border-color: var(--humanerd-accent);
}5. Navigation & Structure
Section Index Pages
Index page의 구조:
# Section Name ← h1, page title
[Optional description]
## What I Build ← h2, uppercase, border-top
- card list
## Featured ← h2, uppercase, border-top
- featured card list
## Latest ← h2, uppercase, border-top
- recent items
Breadcrumb (implicit)
경우에 따라:
← index | section
Visual Cue for Sections
h2: uppercase + top border = section boundary signal- 카드 grid: conteúdo agrupado
- 각 section 사이에
--spacing-section(4rem)
6. Article Page
Structure
[Article Title] ← h1
[Metadata: date, reading time]
[Content]
[Heading hierarchy: h2, h3 only]
[Paragraph: body text]
[Code blocks: syntax highlighted]
[Lists: clean bullets]
[Related] ← h2, uppercase
- related content links
Article Typography
.article h1 {
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: -0.03em;
margin-bottom: 0.5rem;
}
.article h2 {
margin-top: 2.5rem;
padding-top: 1rem;
border-top: 1px solid var(--humanerd-line);
}
.article p {
max-width: 65ch;
margin-bottom: 1.25rem;
}7. Components
Callout Boxes
.callout {
padding: 1rem;
background: var(--humanerd-wash);
border-left: 3px solid var(--humanerd-accent);
border-radius: 0 8px 8px 0;
margin: 1.5rem 0;
}Buttons/Links
a.internal,
a.external {
background: transparent; /* no underline box */
color: var(--humanerd-accent);
padding: 0;
border-radius: 0;
text-decoration: underline;
text-underline-offset: 2px;
}
a:hover {
color: var(--humanerd-ink);
}Syntax Highlighting
Quartz default github-light/dark theme 유지.
8. Dark Mode
Dark mode는 system preference 따름 (Quartz 기본).
manual override 버튼 있음 (page header의 다크 모드 토글).
Quartz dark mode 색상 오버라이드:
body[data-theme="dark"] {
/* override quartz defaults with humanerd palette */
}9. Index Page (/)
/content/index.md 구조
# humanerd
AI agent builder, automation architect, and product-minded developer.
I build practical agent systems, knowledge workflows, and small services
that turn repeated work into durable infrastructure. This site is my
public notebook: services people can use, project writeups, operating
ideas, and the Drewgent lab behind them.
## What I Build
- **Service** 이름 — 설명
- **Service** 이름 — 설명
## Featured
- **Drewgent** — 설명
- **SEO Article Harvester** — 설명
- **notion2web** — 설명
## Latest
- link to recent content
## Work With Me
contact info10. About Page (/about)
# About
[ personal story — not technical bio ]
## What I Do
[ 직무/역량 ]
## How I Work
[ 작업 방식 — 에이전트 활용, iterative process ]
## Contact
[ email, links ]11. Implementation Files
| File | Purpose |
|---|---|
quartz/styles/custom.scss | Main design overrides |
quartz.config.ts | Font, color palette overrides |
content/index.md | Landing page content |
content/about.md | About page content |
12. Content Writing Guide
Voice
- Non-expert audience에게 설명하는 톤
- 기술적 깊이 배제 — 아이디어 전달, 방법 가이드 수준
- “I built X because Y” — personal, not corporate
Structure
- 每个 article: title + description + body
- 설명 먼저 — 무엇을 왜 하는지
- step-by-step보다 overview 중심
Formatting
- h2: section 구분용 (UPPERCASE 처리됨)
- h3: card 제목, 상세 섹션
- lists: bullet points
- code: minimal, 필요한 경우만
13. Design Principles Summary
- Clear section boundaries — h2 + border-top
- Card-based content grouping — 2-col grid on desktop
- Warm paper palette — off-white (#fbfaf7), not cold gray
- Strong typographic hierarchy — scan-friendly
- Accent on interactivity — amber links (#7b5f3d)
- Mobile responsive — 1-col on narrow screens
- Non-expert friendly — simple language, no jargon
Related
- SELF_MODEL — Drewgent identity (design reflects agent)
- INTEGRATION_PROTOCOL — integration workflow
- drewgent-architecture-dataflow — architecture reference
Generated by Drewgent — 2026-05-20