ZenHe Color Resources · Website v1
Style & motion spec
Concept — Colour you can hold. A short colour-bar opening, then full-screen HD product photos in ZenHe colours, as on leading peer sites. The rest of the page stays light like zenhe.com: white and mist grounds, teal only for accents and the contact band.
Colour · light, as on zenhe.com
White#FFFFFF · main ground
Mist#F2F5F3 · hero, alt bands
Mist 2#EAF0ED · creative, quality
ZenHe Teal#0C747F · accents, CTA
Teal band#0A6C76 → #15878E · contact only
Logo Mint#7CC4BF · details on photos
Charcoal#15191B · headings, text
Slate#4A5658 · body muted
Dye spectrum · hero only
冰山白湖水珠光蓝中国红橄榄绿枫叶红夜幕黑
Type · Google Fonts, free for commercial use
Colour, engineered
DISPLAY · Instrument Sans 600 · 112 / 0.92 · −4.5% (mobile 56)
Six material families.
H2 · 56 / 1.02 · −3.5% (mobile 38) · accent word in ZenHe Teal, same typeface
Body copy sits at 17 / 1.6 on desktop and 15 / 1.55 on mobile for comfortable reading of technical detail.
EYEBROW · JETBRAINS MONO 12 · +14% · CAPS
Request a Solution
All products
Secondary
Motion tokens
Reveal cubic-bezier(.16,.84,.24,1) · 1.2 s
Morph cubic-bezier(.7,0,.2,1) · 0.9 s
Hover cubic-bezier(.2,.8,.2,1) · 0.4 s
Stagger 120 ms between lines and cards. Scroll reveals travel 46 px. All motion switches off under “reduce motion”; the hero then shows one still frame.
Motion map · section by section, with the WordPress / Elementor build
SECTIONWHAT MOVESBUILD IN ELEMENTOR
Intro + heroOpening (about 3 s): the logo mark spins in while a 0–100 counter runs, then six brand-colour bars (冰山白 → ZenHe teal) rise and lift away to reveal the hero. Hero: full-screen HD photos with a dark overlay, changing every 6.5 s with a wipe and slow zoom; headline lines rise, a company-snapshot card fades in.The intro is pure CSS in an HTML widget and plays once per visit (session cookie). The hero is Elementor Slides or a background video; headline, buttons and snapshot card are Elementor text.
Brand stripTwo endless logo marquees, opposite directions, pause on hover.Logo images in a Loop Carousel or a small CSS marquee class; logos swapped from Media Library.
Who we areStatement text fills ink as you scroll; video card opens from a clipped frame with slow parallax.Text Editor + CSS scroll timeline (GSAP ScrollTrigger fallback). Video = YouTube embed in lightbox, 720p/1080p.
ProductsSix tilted panels; hover or tap widens one and reveals copy.Loop Grid bound to a “Product family” post type, so the client adds products in the admin.
Creative CentreHorizontal rail with drag/scroll snap; light sheen passes over each card.Loop Carousel + hover CSS class.
ApplicationsList rows expand; matching image cross-fades and settles from 108%.Nested Tabs (vertical) restyled; each tab holds image + text.
Labs · FootprintBento tiles rise in sequence, photos zoom slowly; base markers pulse and dashed routes flow from HQ.Grid container + Motion Effects entrance; plot is an SVG in HTML widget, labels editable.
CertificationsFanned certificates straighten and lift on hover.Image Gallery with custom class; files open in a lightbox.
ContactField focus turns white with teal edge; button arrow turns 45°.Elementor Pro Form → email alert + entries in WordPress; floating WhatsApp button.