haoqi-design
Playful tactile dimensionality meets clinical blueprint precision. Soft, luminous 3D inflatable forms and sky-blue volumetric lighting float behind crisp black sans display type and technical monospace crosshairs.
Visit siteColour
Background#fbfaf4
Text#000000
Accent#c0fe04
Surface#fbfaf4
Muted#363630
Typefaces
- Display
- tiktok
- Body
- tronica-mono
- Mono
- tronica-mono
- Source
- self_hosted
- Scale
- 12 · 14 · 16 · 30 · 60 · 81
Layout
- Grid
- —
- Container
- —
- Spacing base
- 4px
- Radius
- 0px
Capture
- Category
- portfolio
- Sections
- 1
- Captured
- 2026-08-31
- Rhythm
- light
Type rules
- hero headlines set in bold uppercase sans at high scale
- supporting narrative and metadata set strictly in monospace
- interface controls formatted with bracketed hotkeys
Colour rules
- near-white base layered with luminous sky-blue gradients and soft volumetric light
- sharp high-contrast black typography over translucent 3D renders
Voice rules
- pair first-person engineering statements with technical monospace labels
- include live telemetry metadata such as local time, weather, and viewport coordinates
Holds it together
- overlay delicate technical crosshairs and coordinate markers across the viewport grid
- render centerpiece typography as interactive, glossy 3D inflatable objects
- set all system metadata, time, weather, and navigation cues in precise monospace uppercase
Contrast
text on background20.1:1 AAA
muted text on background11.6:1 AAA
text on surface20.1:1 AAA
accent on background1.1:1 fail
background on accent1.1:1 fail
Type, measured
- Body
- 16px / 1.5
- Measure
- 43 characters
- Display
- 98px / 1
- Tracking
- 0em display
- Scale ratio
- 1.57
Voice
- Tone
- precise, craft-focused, curious
- Sentences
- short
- Person
- first
- Vocabulary
- technical
- Calls to action
- create, contact
Built with
- Builder
- —
- Framework
- next
- Motion
- lenis
- WebGL
- yes
- Nav
- sticky_top_bar, 1 items, sticky
- Length
- 1 screens
Sections in page order
1- 00
hero
Luminous sky-blue composition blending playful 3D inflatable typography with precise technical grid markings and crisp monospace metadata.
- Mood
- playful + dreamy
- Layout
- 1 col · asymmetric · balanced
