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.
#ffd500The 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
#000000Primary 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
#ffffffCard surfaces, portfolio thumbnails, and the base of the white canvas. Provides the surface that the yellow beam and obsidian type play against
#f5f5f5Page canvas and the lightest card/section background. Warmer than pure white, creates the gallery-wall feel beneath the hero
#808080Body text, secondary metadata, and muted UI labels. The mid-neutral that bridges the obsidian headlines and the lighter ash tones
#a6a6a6Muted helper text, tertiary body copy, and the soft end of the text scale. Sits beneath Graphite for non-essential information
#999999Subdued heading and label color. Slightly cooler than Ash; used for section labels that need to recede behind the primary type
#b8b8b8Subtle shadow tint and the softest hairline border. Carries the single shadow pattern that gives portfolio cards their barely-there lift
#cfcfcfDrop 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
246px · 900 · 1 · -6.89px trackingThe quick brown fox jumps
128px · 500 · 1.2The quick brown fox jumps
88px · 900 · 0.9 · -2.99px trackingThe quick brown fox jumps
36px · 900 · 0.96 · -2.63px trackingThe quick brown fox jumps
30px · 500 · 1.1The quick brown fox jumps
28px · 700 · 0.96The quick brown fox jumps
26px · 500 · 1.1The quick brown fox jumps
20px · 500 · 1.2 · -0.32px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
sans-serif — detected in extracted data but not described by AI
Display headlines — the name 'DANIEL SUN' at 246px and section titles like 'MY LATEST WORK' at 88px. Ultra-condensed, ultra-black; the type is the architecture. Tracking tightens as size grows (-6.9px at 246px) to keep the massive letterforms visually unified. Substitute: Bebas Neue or Anton for the condensed impact, though no free font fully matches the geometry.
Section headings and larger body text. The medium weight (not bold) is deliberate — Inter Display 500 sits between the whisper of system text and the shout of the display face, creating a quiet middle register. Used for the 26–30px subheadings and the 18–20px lead paragraphs.
Body copy, navigation labels, and inline text. The 14px body-sm and 20px subheading sizes are the everyday workhorses; the 128px outlier is a decorative/typographic moment. Consistent 500 weight keeps the text system cohesive without ever feeling bold.
Handwritten personal asides — 'From 2020 til today,' date stamps, signature-style annotations. The only script in the system; its presence signals intimacy and breaks the architectural severity of the condensed display type. Use sparingly — one or two instances per section maximum.
Smallest UI text — copyright lines, micro-labels, and inline metadata. Stays quiet and never competes with the display system.
14px14px32px110px1px4px6px8px10px12px14px16px20px24px32px40px64px80px160pxFloating pill at the top center of every page. Background #1f1f1f (near-black), radius 110px (fully rounded), padding roughly 8px vertical. Contains a small icon glyph, four text nav links (Work, Story, Process, Connect) in Inter 500 14px #ffffff, and a yellow highlight button on the right. Sits above content with no border and no shadow — its dark mass is enough to separate it from the white canvas.
Pill-shaped button embedded in the right side of the nav capsule. Background #ffd500 (Solar Beam), text in Obsidian (#000000), radius 32px, padding 8px 20px. Font is Inter 500 at 14px. The only yellow surface in the entire system — its job is to read as a switch turned on against the dark capsule.
Set in Reddit Sans Condensed 900 at 246px, line-height 1.0, letter-spacing -6.89px. Color Obsidian (#000000). Stretches nearly edge-to-edge of the viewport. This is not a headline — it is a typographic mass that functions as the page's structural element. The extreme tracking (-6.89px) is essential: at 246px, default spacing would make the letterforms feel disconnected.
A diagonal yellow gradient beam that cuts from upper-right to lower-left across the hero. Background uses a soft yellow-to-transparent gradient anchored on #ffd500. It is not a shape but a wash of light — edges feather into the white canvas with no hard border. Only one such beam exists per page; it is the solar metaphor that gives the monochrome system its warmth.
Set in Reddit Sans Condensed 900 at 88px, line-height 0.90, letter-spacing -2.99px. Centered horizontally. Color Obsidian. Used for major section openers like 'MY LATEST WORK.' The same condensed display face as the hero name, scaled down — maintains typographic continuity from page-level to section-level.
Set in Caveat 700 at 28px, line-height 0.96, letter-spacing -1.01px. Color Graphite (#808080) or Ash (#a6a6a6). Sits above section titles as a date range or personal note ('From 2020 til today'). The script weight and grey color make it feel like a handwritten margin note — it humanizes the architectural type system.
White surface (#ffffff) on the Concrete canvas (#f5f5f5). Radius 14px. Subtle shadow: rgba(0, 0, 0, 0.12) -2px 3px 3px 0px — the only shadow in the system. Padding 32-40px inside. Contains a large preview image (border-radius 14px to match), a project label, and metadata. The 14px radius is the signature curve — softer than sharp, sharper than a pill.
Set in Inter Display 500 at 18-20px, line-height 1.30. Color Graphite (#808080). Two lines maximum — functions as a subtitle to the display headline, not a paragraph. The medium weight (not regular) gives the intro enough presence to sit beneath a 246px headline without disappearing.
Screenshot or product image, radius 14px, displayed edge-to-edge within the card padding. Images are not cropped to square — they maintain their natural aspect ratio. The 14px radius mirrors the card, creating visual harmony between the frame and its contents.
#f5f5f5The base page background — a warm near-white that reads as concrete or gallery wall beneath the hero.
#ffffffCards, portfolio thumbnails, and elevated content blocks. Pure white creates the strongest contrast against the canvas.
#1f1f1fThe floating pill navigation — a near-black that anchors the top of every page and frames the yellow highlight button.
#000000The display headline color — reads as a solid mass at 246px, not merely text. The typographic surface.
The system is deliberately flat. The single shadow pattern (rgba(0,0,0,0.12) at -2px/3px) exists only to lift portfolio cards from the canvas — it is a whisper, not a declaration. No buttons, nav elements, or text blocks carry shadows. Depth is created by surface color contrast (Concrete → Paper White → Obsidian Nav) rather than drop shadows. This restraint makes the yellow beam the only dimensional element on the page.
rgba(0, 0, 0, 0.12) -2px 3px 3px 0px
Full-bleed layout with a floating centered nav capsule at the top. The hero is unconstrained — the 246px display name stretches to the viewport edges, with no max-width container. Content sections below use a 1200px max-width and center their text. Section rhythm is spacious: 80-120px vertical gaps between major sections, alternating between centered text blocks and full-width portfolio cards. The portfolio section breaks the centered text pattern by introducing a wide card that spans the full content width. Navigation is a single floating pill — no sidebar, no sticky header banner, no mega-menu. The page reads top-to-bottom as: nav → hero (name + beam) → work intro → portfolio grid → next section. The composition is asymmetric in the hero (text-left, beam-right) and centered in all subsequent sections.
Imagery is sparse and intentional. The hero features no photography — only a diagonal yellow gradient beam as an abstract light effect. Portfolio sections display product screenshots inside 14px-radius frames, presented as evidence of work rather than lifestyle context. The visual language is: no people, no environments, no mood photography. When images appear, they are tight product crops on pure surfaces — the work itself is the hero, not the designer. Icons are minimal and outline-style (the small glyph in the nav capsule). The overall density is text-dominant: typography occupies more visual space than any image.
## Quick Color Reference - Text (primary): #000000 (Obsidian) - Text (body/muted): #808080 (Graphite) - Background (canvas): #f5f5f5 (Concrete) - Surface (cards): #ffffff (Paper White) - Border/shadow: #b8b8b8 (Silver) - Accent: #ffd500 (Solar Beam) - primary action: no distinct CTA color ## Example Component Prompts **1. Hero Section:** White canvas (#f5f5f5). Diagonal yellow gradient beam (anchored on #ffd500) cutting from upper-right to lower-left. Lead paragraph: Inter Display 500, 18px, #808080, two lines max. Display name below: Reddit Sans Condensed 900 at 246px, #000000, letter-spacing -6.89px, line-height 1.0. Name stretches nearly full viewport width. **2. Section Title Block:** Centered on canvas. Handwritten timestamp above in Caveat 700, 28px, #808080, letter-spacing -1.01px. Section title below in Reddit Sans Condensed 900, 88px, #000000, letter-spacing -2.99px, line-height 0.90. Minimum 80px vertical gap above and below. **3. Portfolio Card:** White surface (#ffffff) on canvas (#f5f5f5). Border-radius 14px. Shadow: rgba(0,0,0,0.12) -2px 3px 3px 0px. Internal padding 32-40px. Preview image at top with border-radius 14px, natural aspect ratio. Project label in Inter 500, 14px, #000000. Metadata in Inter 500, 12px, #a6a6a6. **4. Floating Nav Capsule:** Horizontal pill, background #1f1f1f, border-radius 110px. Padding 8px vertical, ~40px horizontal. Contains: small outline icon (12px, #ffffff) + four nav links (Inter 500, 14px, #ffffff) + yellow highlight button on the right (#ffd500 background, #000000 text, border-radius 32px, padding 8px 20px). Positioned centered at top of page, floating above content with no shadow. **5. Body Text Block:** Max-width 1200px, centered. Inter Display 500, 20px, #808080, line-height 1.30. Two to three lines maximum. Functions as a subtitle to a display headline, not as standalone content.
The type system operates on extreme contrast: 246px condensed display against 14px Inter body. There is no middle ground at 60-80px — the jump from heading (30px) to display (88px) to display-xl (246px) is deliberately discontinuous. This is a portfolio system, not a content system: the name and section titles are the page, and everything else is footnote. Inter Display 500 is the quiet voice between the display shout and the system text whisper. Caveat 700 is the human signature — its presence signals that the designer is speaking personally, not presenting work. Never use more than two typefaces per page section: the condensed display + the handwritten annotation, or the condensed display + Inter body.
Same designer-portfolio structure: oversized condensed display type, monochrome canvas, single accent moment, and generous negative space that lets the name function as architecture.
Same flat-surface gallery aesthetic — white canvas, bold display headings at extreme scale, minimal shadows, and a single chromatic element used as punctuation rather than decoration.
Same typographic-first philosophy where a condensed display face carries the visual weight and the rest of the page is quiet monochrome; the designer's name IS the hero.
Same dark-pill navigation capsule floating over a light canvas, with a single colored highlight button embedded inside — the nav-as-object approach is a shared signature.
Use the design exports or connect Musterlab to your AI.
