# hellodani.co

Source: https://hellodani.co/
Captured: 2026-09-20
Tags: portfolio, landing, light, both, playful, editorial, organic, playful, friendly, warm, optimistic, confident
Colors: #f6f5f1, #84def9, #fd1e1f, #d7cfcc, #b0afad, #939290, #6f6f6d, #bce9f5
Type (h1): Libre Baskerville · 60px/70px · 400 · tracking -0.8px — "Visual and Product designer you can count on"
Type (h2): Libre Baskerville · 40px/52px · 400 · tracking -0.6px — "Tiny fraction of my work"
Type (h3): Libre Baskerville · 24px/36px · 400 · tracking -0.4px — "Step into my digital home"
Type (body): Inter · 18px/25.2px · 400 · tracking -0.6px — "Simplicity is my superpower. I turn complex ideas into experiences users love an"
Type (button): sans-serif · 12px/normal · 400 — "Chat with me"
Button: "Chat with me" — fill #000000, text #ffffff, radius 24px, border 0px, padding 9px 20px 10px 20px, height 44px, type 12px/400
Radii: 2px (83), 16px (72), 8px (27), 40px (12), 24px (10)

## Images

- Hero (desktop): https://media.lvly.design/library/hellodani-co/hero.webp?v=1709fca6
- Page crop (mid-1): https://media.lvly.design/library/hellodani-co/mid-1.webp?v=f84186c8
- Page crop (mid-2): https://media.lvly.design/library/hellodani-co/mid-2.webp?v=76608df5
- Hero (mobile): https://media.lvly.design/library/hellodani-co/mobile-hero.webp?v=f55954c4
- Full page (desktop): https://media.lvly.design/library/hellodani-co/full.jpg?v=ab22f8a2
- Full page (mobile): https://media.lvly.design/library/hellodani-co/mobile-full.jpg?v=e930512f
- Clip preview (mp4): https://media.lvly.design/library/hellodani-co/video-v9wy67.preview.mp4?v=e509c330

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.

## Steal-worthy details

- Serif display over sans body at one weight — Libre Baskerville 60px/70px at -0.8px tracking for h1, 40/52 at -0.6px for h2, 24/36 at -0.4px for h3, Inter 18px/25.2px at -0.6px for body. Nothing on the page is bolder than 400, so hierarchy comes entirely from size and family.
- Blob flowers cropped by the viewport, not contained — a #84def9 flower on the left and a #fd1e1f one on the right, each roughly 60% of viewport height, positioned so two petals run off the edge. Cropping is what makes them read as scale rather than as clip art.
- Hand-drawn line doodles as section markers — a single-stroke rainbow arch above the eyebrow, a little flag above the next heading, ~40px, all in the one red. They replace icons, eyebrow rules and section numbers at a fraction of the effort.
- A tiny black pill under a huge headline — 12px label, 24px radius, 9/20/10/20 padding, 44px tall, pure #000 on cream. It is the only black surface above the fold, and the size mismatch against a 60px serif is deliberate restraint rather than a weak CTA.
- Dotted hairlines instead of solid rules — a dashed 1px line the width of the copy column separates the hero paragraph from the button, and the same dash repeats as the underline on every service row. One border style does all the dividing on the page.
- Work shown in pale tubs, never as flat thumbnails — each project is a #f0efea 16px-radius container holding two or three screenshots rotated 3-8 degrees, overlapping, each with a white 8px frame and a soft drop shadow, captioned by a black name and gray tag list on one 24px line.
- Capability list as three columns of dashed rows — nine 18px Inter labels, no icons, no cards, each with a dotted bottom border and ~46px of row rhythm. It reads as a table of contents rather than a feature grid.
- One saturated panel where the headline outgrows the card — a #fd1e1f block at 24px radius with a small centered doodle, a 16px white eyebrow, and the closing line set so large in white that it nearly touches both inner edges, with plain gray text pills for the social links floating below on cream.

## Style recipe

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.