Colophon
Performative transparency. Every design and engineering decision documented — so designers and developers who care to look can see the pattern, and so future-me has a record.
Teach the pattern, don't sell the fix.
Performance · Target
Lighthouse 100 across all four categories is the floor, not the ceiling. Sub-1s LCP on 4G, sub-50KB critical CSS, <150KB JS critical path, zero CLS from images or fonts. Performance budget is enforced in CI; regressions block deploy.
Design system
Each step ≈ 1.618× the prior. Body 17px → H4 28 → H3 44 → H2 72 → H1 116 → Display 188. Massive contrast between body and hero is what produces editorial confidence.
fs-eyebrow → fs-body → fs-lede → fs-h4
→ fs-h3 → fs-h2 → fs-h1 → fs-displayFibonacci: 8 / 13 / 21 / 34 / 55 / 89 / 144 px. The eye reads Fibonacci-tuned vertical rhythm as “right” without knowing why. Sections breathe to a Φ-bound cadence.
xs:8 · sm:13 · md:21 · lg:34
xl:55 · 2xl:89 · 3xl:144Asymmetric columns at the golden split — 38.2% / 61.8% rather than 50/50 or 67/33. Hero, About, Speaking, and Ask Daniel Teaser all share this proportion. Reading column max-width: 680px (Φ × 420).
Cream is the calm field. Ink is text and dark moments. Signature Blue is brand anchor and primary CTA. Signature Amber is the ownable highlight (2–5% of surface). Restraint is the rule.
Signature vocabulary
New components are designed by composing these — never inventing from scratch. Cumulative restraint is what produces a recognizable visual signature.
A 2px Amber horizontal rule used as a graphic device — section dividers, card mark, manifesto punctuation. Sometimes animated, drawing in left-to-right on scroll.
Playfair italic for the takeaway sentence at the end of a section. Pairs with roman type to create rhythm. Editorial print convention applied to web.
Outcome metrics get their own typographic treatment — massive Playfair number with the unit set in italic Amber, label set tiny in Satoshi caps below.
Cards and image containers get a thin offset rule sitting 8–13px outside the content. Editorial poster convention.
Custom cursor — small Ink dot with an Amber halo. On interactive elements, the dot expands and the halo dims. Reduces to system cursor on touch. (Deferred to v1.1.)
Motion language
Every animation belongs to one of five categories. Reduced-motion mode disables all categories except instant fades — non-negotiable per WCAG 2.1 AA.
Scroll-arrived content lands with intent. Once per element.
Multiple elements sequenced over a scroll range. Sticky pin no longer than 100% viewport.
Hover, click, focus. Magnetic pull ≤ 8px. No bounce.
Page-to-page via View Transitions API. Native fallback.
Slow background drift, marquee. Max one per page.
Stack
Full source for the brand documents that ground Ask Daniel lives in business-context/ — twenty-seven markdown files covering brand voice, services, sitemap, founder story, and the design approach docs that produced this site.
Every detail above defends a thesis. Cut anything that doesn't.
← Back to home