danielsun.space

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.

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.