hellodani.co

A solo designer's portfolio that gets its whole personality from two decisions: a Libre Baskerville display serif set at a single 400 weight over Inter body copy, and enormous flat flower blobs in sky blue and signal red bleeding off both edges of a cream #f6f5f1 page. The hero is dead-center and narrow — a hand-drawn red wordmark between two lowercase nav links, a small rainbow doodle, a 60px/70px three-line serif headline, four lines of 18px Inter, a dotted rule, and one tiny black pill — and the flowers do all the visual work by being cropped rather than contained, so the viewport reads as a frame around the type instead of a banner. Below the fold the page turns into a soft bento of pale gray tubs at 16px radius, each holding tilted, overlapping product screenshots in white frames with real drop shadows, paired with solid-color square tiles carrying a single flower glyph. Nothing shouts except color: the type never goes bold, the chrome is dotted hairlines, and the only saturated surfaces are the flowers, the tiles and one full-bleed red contact panel whose white headline runs edge to edge. It works because the illustration is childlike and the typography is not — the serif keeps it credible while the flowers keep it warm.

Build on a warm off-white ground (#f6f5f1) with near-black ink; reserve pure white for photo frames and small inner cards only. Set every heading in a transitional serif (Libre Baskerville or similar) at weight 400 — 60px/70px/-0.8px display, 40/52/-0.6px section, 24/36/-0.4px sub — and every other string in Inter 18px/25.2px at -0.6px, also 400. Never use a bold weight; if something needs emphasis, make it larger or put it on color. Pick exactly three saturated hues — a signal red (#fd1e1f), a sky blue (#84def9) and one supporting accent (hot pink or marigold) — plus a gray-tint container fill one step darker than the ground (#f0efea). Deploy the red on the wordmark, all line doodles and a single full-bleed closing panel; deploy the blue and the accent as flat geometric shapes only. Draw two or three oversized organic blob shapes (a five-petal flower silhouette with soft, uneven curves) and position them half off the left and right edges of the first screen at roughly 60% of viewport height, behind centered text — cropping is mandatory, a fully visible blob reads as clip art. Commission or sketch a wordmark and three or four single-stroke doodles by hand in the red, ~40px, and use them as section markers where a lesser site would put an eyebrow rule. Radii: 2px for the smallest chips, 8px for photo frames, 16px for content containers, 24px for pills and hero panels, 40px for the largest blocks. Borders are dotted 1px hairlines in a 20% ink gray — use them for every divider and every list-row underline, and never a solid rule. Shadows exist, but only on photographic content: a soft, wide, low-opacity drop shadow under each white-framed screenshot, with 3-8 degrees of rotation and deliberate overlap so a group of three reads as a scattered stack. Buttons are black pills, 12px label, 24px radius, ~44px tall, white text, no border — keep them physically small so the type dominates. Lay out the hero centered and narrow (~560px measure); switch to a loose two-column bento below it, alternating wide media tubs with small solid-color square tiles carrying one flat glyph, and let a full-width strip with copy left and a pill right interrupt the grid once. Section rhythm is generous: ~160px of vertical air between blocks, ~24px inside a tub. Motion is restrained — a light scale or lift on card hover, a slow drift on the blobs, nothing that competes with the shapes. Close on a saturated panel whose headline is set so large it nearly overflows, and consider a repeating wallpaper of the same flat glyphs as the footer, with one small serif line centered on top.