DT.
DT.
dimitrists97@gmail.com
Case study · 2026All work

Kryora

A Greek-first B2B site for whole-body cryotherapy chambers.

Kryora: Greek home page hero, whole-body cryotherapy at −110 °C, beside an eCham flow chamber in a dimly lit spa
Imagery: kryora.de (AI renders)

Kryora is a Greek-first B2B site for ProseQ whole-body cryotherapy chambers, a Greek-market rebuild of kryora.de. It is a front-end preview waiting for the client’s sign-off, kept out of search engines.

Role
Solo: direction, design, build
Year
2026
Status
Preview · awaiting client sign-off
Stack
Next.js 16 · next-intl (EL/EN) · Tailwind v4 · CSS scroll-driven animation · Vitest

Context

The buyers are Greek businesses making a capital purchase: hotels, resorts and villas, sports clubs and physio practices, even yachts. The chambers run at −110 °C for three-minute sessions, in six eCham models and a five-in-one vita cabin.

I set the direction, designed and built it solo over four days in September 2026, in Next.js 16 with next-intl, Tailwind v4 and no animation library.

Problem

A buyer has three questions before a call: is this credible and safe, will it fit my space and my power supply, and what does the payback look like. The site’s job is to answer them plainly and turn the interest into a qualified enquiry, without promising returns.

−110 °C, counted in CSS.

Approach

  1. A direction grounded in references, critiqued into rules

    The direction came from Refero references for the mood, the hero and the navigation, and a design critique became audit rules the build follows: no section eyebrows or numbering, one label per call to action, nothing laid over images. On 25 September the palette moved from a cold cinematic look to Obsidian & Champagne: warm near-black, cream actions and one champagne accent.

  2. Headings in Commissioner, from a Greek type designer

    The default display face had no Greek glyphs at all. Commissioner, from a Greek type designer, sets both scripts with the same character; Inter carries the body text.

  3. Greek uppercase and numbers without hydration drift

    Greek capitals drop the tonos but keep the dialytika, so headings are uppercased on the server only, with toLocaleUpperCase('el'), never in the browser. Prices use hand-rolled formatters, because Intl.NumberFormat can differ between the server’s and the browser’s ICU data and break hydration.

  4. CSS-first motion; GSAP left out

    GSAP was rejected for its weight, its main-thread work and the layout shift its pin spacers cause. The −110 °C countdown animates a registered integer property through a CSS counter, gated on support and on reduced motion; browsers without scroll-driven animation get static layouts.

  5. A three-question model finder

    Venue type, sessions a day and power supply (230 V, 400 V or unsure) return the smallest model that fits, with a note when it needs three-phase power or the supply should be checked. Physio practices with 400 V get at least the clinic-grade model.

  6. Search foundations, kept out of search

    Greek lives at the root and English under /en, with locale detection off so an English browser isn’t redirected away from Greek. Subpages have Greek slugs, per-page canonicals, hreflang and Open Graph, structured data without offers, and a sitemap. They are foundations: the preview is noindexed on three layers until launch.

Uppercase, without the tonos.

Challenges

The first deploy returned 404 on every route: creating the Vercel project from the command line set its framework preset to Other, so nothing Next-shaped was built until the preset was pinned. On iOS, WebKit interpolated the countdown’s integer fractionally and it showed 0 until the value was rounded.

axe could not parse oklch colors, so its contrast checks came back incomplete while a zero-violation gate still passed; I sampled contrast from rendered pixels instead. And the six Greek nav labels need a full 1024 pixels, so below that the menu button takes over.

Two smaller surprises: Lightning CSS splits color-mix into an @supports fallback, and a pinned horizontal pan broke only with motion switched on.

Outcome

The preview is live and noindexed, with 22 Vitest tests and lint, typecheck, tests and build all passing. It is waiting on the client’s sign-off and a ten-item backlog.

The contact form sends nothing yet: there is no backend behind it.