Skip to content
Browse
Library

Daniel Sun. One yellow beam, one obsidian name, all the breathing room in the world.

  • Studio
  • Light theme
  • 9 colors
  • 5 typefaces

Daniel Sun's portfolio is a typographic monolith: an almost entirely achromatic canvas where a single yellow light beam cuts diagonally across the hero, and the designer's name is set at 246px in an ultra-condensed 900-weight display face that nearly spans the viewport. The system is a designer's gallery — white paper, concrete gray, obsidian type, with one solar accent that doubles as the only chromatic element. Reddit Sans Condensed 900 carries every load-bearing headline at a near-architectural scale, Inter Display 500 handles secondary headings and body, and Caveat 700 injects handwritten intimacy for personal asides like 'From 2020 til today.' Surfaces are flat, shadows are almost absent, and the navigation lives inside a single dark pill capsule that floats at the top of every page. Everything is generous, quiet, and typographically assertive — the page reads as a single confident statement rather than a grid of components.

Visit danielsun.space
Screenshot of Daniel Sun
Captured from danielsun.space on October 11, 2026

Daniel Sun design system

Daniel Sun

Brand1

  • The system's only chromatic color — hero gradient beam, handwritten underline accent, and the pill-shaped highlight button inside the dark nav capsule. This is the single note of warmth in an otherwise achromatic composition; its presence transforms monochrome blocks into a sunlit moment

Neutrals8

  • Primary text, display headlines, nav capsule background, and dominant typographic mass. Sets the highest-contrast tone for the condensed display name and grounds the floating nav pill

  • Body text, secondary metadata, and muted UI labels. The mid-neutral that bridges the obsidian headlines and the lighter ash tones

  • Subdued heading and label color. Slightly cooler than Ash; used for section labels that need to recede behind the primary type

  • Muted helper text, tertiary body copy, and the soft end of the text scale. Sits beneath Graphite for non-essential information

  • Subtle shadow tint and the softest hairline border. Carries the single shadow pattern that gives portfolio cards their barely-there lift

  • Drop shadow and elevation wash. The companion to Silver for the card shadow rgba(0,0,0,0.12) — never seen directly, only felt as depth

  • Page canvas and the lightest card/section background. Warmer than pure white, creates the gallery-wall feel beneath the hero

  • Card surfaces, portfolio thumbnails, and the base of the white canvas. Provides the surface that the yellow beam and obsidian type play against

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Obsidian on Solar Beam

14.77 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.