# danielsun.space

Source: https://danielsun.space/
Captured: 2026-09-20
Tags: portfolio, landing, light, both, editorial, swiss, playful, warm, confident, human, optimistic
Colors: #fcfcfb, #fbfdc4, #cfcfce, #514b3a, #b3b3b3, #151007, #8d8d8d, #342f25
Type (h1): LT Superior Serif Regular · 64px/72px · 400 · tracking -3px — "Hey! I'm Daniel Sun, a designer who brings trusted clarity into your web and bra"
Type (body): EB Garamond · 20px/24px · 400 · tracking 0.1px — "6+ years designing for tech founders. Seed to Series C, across fintech, dev tool"
Type (button): sans-serif · 12px/normal · 400 — "Start a project with me"
Button: "Start a project with me" — fill #000000, text #ffffff, radius 10px, border 0px, padding 0px 10px, height 40px, type 12px/400
Radii: 12px (29), 7px (23), 10px (4), 8px (1), 16px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/danielsun-space/hero.webp?v=a4888273
- Page crop (mid-1): https://media.lvly.design/library/danielsun-space/mid-1.webp?v=bf9c10ce
- Page crop (mid-2): https://media.lvly.design/library/danielsun-space/mid-2.webp?v=2ac0ff28
- Hero (mobile): https://media.lvly.design/library/danielsun-space/mobile-hero.webp?v=d5311231
- Full page (desktop): https://media.lvly.design/library/danielsun-space/full.jpg?v=306af6c2
- Full page (mobile): https://media.lvly.design/library/danielsun-space/mobile-full.jpg?v=75d772dc
- Clip preview (mp4): https://media.lvly.design/library/danielsun-space/video-tlk293.preview.mp4?v=0892b386

A solo designer's homepage that dresses a strict Swiss grid in warm editorial serif and then lets a few glossy, almost skeuomorphic objects sit on top of it. The ground is a near-white #fcfcfb printed with a faint graph-paper weave, and the layout's own column rules are left visible as hairlines with small crop-mark ticks at their intersections, so the page reads like a spec sheet the designer never bothered to hide. All the saturation is a single soft yellow radial wash (#fbfdc4) bleeding down from the top edge — no hero image, no photography, just light. Against that, a 64/72px LT Superior Serif headline with an unusually tight -3px track carries the whole introduction, EB Garamond italic handles the supporting line, and sans type appears only at 12px inside controls. The work itself supplies every other color: a two-column masonry of project cards, each tagged by an overlapping row of pill chips, then a hairline-ruled logo table, a 2x2 of hairline service quadrants with 3D emoji-style icons, and a closing full-bleed sunflower field under a centered serif line. It works because the restraint is structural and the warmth is decorative — the grid never bends, so the glossy black buttons, the cartoon icons and the flowers read as personality rather than noise.

## Steal-worthy details

- The layout grid is the decoration — a faint graph-paper texture on the #fcfcfb ground, 1px #cfcfce column rules left visible, and small square crop-mark ticks drawn at every rule intersection, so the page shows its own construction instead of a background image
- The only saturated color above the fold is a soft yellow radial wash (#fbfdc4) bleeding down from the top edge into white — a pure gradient standing in for a hero image, with nothing sitting on top of it
- Two serifs, one sans, strictly by role: display serif at 64px/72px weight 400 with a very tight -3px track; EB Garamond 20px/24px italic for the caption line under the fold; sans only at 12px inside buttons and chips, where it reads as UI rather than as voice
- The primary CTA is a glossy beveled black pill — 40px tall, 10px radius, white 12px label, an inner top highlight and a soft drop shadow — one deliberately skeuomorphic object against otherwise flat type, with a small play triangle as its trailing glyph
- The header has no nav bar at all: a segmented pill of two labeled tabs with sun and moon glyphs sits far left, the name is optically centered as plain text, and a second dark pill sits far right — three zones on one hairline, no fill, no border
- Project cards are labeled by a chip row that overlaps the bottom edge of the media rather than a caption beneath it — one light chip for the client name, then dark 7px-radius chips for each discipline, all in 12px sans
- The client logo wall is a ruled table, not a strip: 5x3 hairline cells with one centered mark per cell, so the grid handles the rhythm and no logo needs individual optical spacing
- Services are four hairline quadrants with no cards and no shadows — a 3D emoji-style icon, a serif heading at reading size, and three lines of small body copy, the dividers doing all the containment work

## Style recipe

Build on a warm near-white ground (#fcfcfb, page background #ffffff) and print a faint graph-paper weave across it at very low contrast. Draw the layout grid and leave it visible: 1px #cfcfce rules marking the content column and the major horizontal bands, with 4-5px square crop-mark ticks at each intersection. Ink is #151007; secondary text is a warm brown-gray (#514b3a, #342f25) and muted meta is #8d8d8d. Use exactly one accent, a pale yellow (#fbfdc4), and spend it on a single soft radial wash bleeding from the top edge of the first screen — never on text, never on a fill elsewhere.

Type: a high-contrast display serif at 60-68px / 1.12 line-height, weight 400, letter-spacing -3px (about -0.047em); a second old-style serif (EB Garamond) at 20px / 24px, +0.1px tracking, set italic for captions and eyebrow lines; a neutral sans at 12px / 400 used only inside buttons, chips and tabs. Never set a heading in the sans and never set UI in the serif.

Objects: radius scale 7px for chips and small controls, 10px for buttons, 12px for cards, 16px only for a full-bleed panel. Primary button is solid #000000 with #ffffff 12px text, 40px tall, 10px radius, 0px border, given a subtle inner top highlight and a soft drop shadow so it reads as a physical pill; secondary controls are the same shape with a white ground and a hairline. Media cards get a 12px radius, a hairline, and a label row of pills overlapping their bottom edge — one light pill for the name, dark pills for the attributes.

Structure: a two-column masonry of media cards of unequal height; a logo or spec grid built as hairline table cells rather than a spaced row; feature sections as 2x2 hairline quadrants with a small illustrated icon, a serif heading and three lines of body, no card and no shadow. Pair the flat grid with two or three tactile artifacts — glossy pills, 3D isometric or emoji-style icons, a hand-drawn signature — and close the page on a centered serif line above a full-bleed illustration that runs to both edges and off the bottom. Vertical rhythm is generous: 120-160px between bands, hairlines rather than whitespace where two bands meet. Motion is minimal — hover states on the pills and cards only, nothing that moves on scroll.