Kairo: Brand and Website for a Design and AI Studio (Concept)

Concept project. Kairo is a fictional studio. I created the brand and built the site to show my brand, web design and front-end work.

Create a brand and website for a studio offering two services, websites that bring in work and AI that takes repetitive work off a team's plate, to owners of small businesses and executives at mid-size firms. It had to feel premium and genuinely modern, without letting the motion get in the way of reading or understanding.

Kairo comes from kairos, Greek for "the right moment": the point where preparation meets opportunity. It's short, ownable and suits a studio that helps businesses act at the right time.

Wordmark. Lowercase "kairo" in Geist, where the dot of the i glows aqua. It's placed using the typeface's own measurements, so the moment is built into the name.

Symbol: "Eclipse". A dark sphere with light breaking over its rim and peaking in a single glowing point, the moment as a sunrise. On page load the light sweeps up the rim and blooms into the point.

Palette: "Abyss". Deep-water darks with bioluminescent aqua and lantern amber. Colour carries meaning: aqua marks AI and anything you can interact with, and amber marks time and results.

Live WebGL hero. Glowing contour lines are drawn in real time on the visitor's graphics card. They bend toward the cursor, warm to amber near it, and straighten from noise into signal as you scroll.

"Watch one job disappear". A scroll-driven scene of a quote request handled from start to finish. It arrives at 9:02, AI drafts it from a price list, a person approves it, and it's sent at 9:06.

Time-savings calculator. Live sliders estimate the hours and money a team could get back, with the assumptions stated openly.

Two-pillar structure. The page is organised so a first-time visitor understands the offer within one scroll: websites, AI, and the strategy that ties them together.

Trust built in. The trust strip and FAQ answer the concerns small-business buyers raise most often: accuracy, data security and keeping a human in the loop. The FAQ uses structured data so search and AI answer engines can cite it.

Motion pauses when it's off screen, and the shader renders below native resolution to stay light.

Fully responsive, keyboard accessible, and every animation respects the reduced-motion setting.

No text starts invisible or blurred, and there's one consistent call to action.

The direction moved through several rounds: from a light editorial concept to a dark, immersive one, and through type, colour, naming and symbol explorations, each tested live on the real page rather than in static mock-ups.

Stack: Next.js, React, TypeScript, GSAP, WebGL.