Tokora Studio

What it is

The home page of a tool that builds design systems: type scales, palettes, components, then export to React, Vue, Figma and AI agents. Twelve blocks on a single page — hero, six product cards, a six-step journey, a component library, a connection diagram, five use cases, benefits, pricing, an FAQ, a call to action, a footer.

It's the most product-like template in the library, and the most animated. Four sections stay pinned to the screen while you scroll: the hero, the journey, the library and the connection diagram. A fifth drags a horizontal carousel with the vertical scroll.

The original is a React application with a 14 MB bundle, plus 834 kB of CSS. All that code is gone. What's left is the images, the composition, the copy — and the animation settings, which were read out of the original stylesheet rather than eyeballed.

What you change first

The colours — five lines, but three blues

Right at the top of assets/css/style.css:

--blue:        #0a4fdf;  /* solid buttons, links, accents — 5.99:1 on white */
--blue-hover:  #134cc8;  /* hover — 6.87:1 */
--blue-deep:   #0b3a9d;  /* blue text on a grey background — 9.35:1 */
--blue-onblue: #ffffff;  /* text on the blue panel — 6.16:1 on --blue */
--ink:         #151515;  /* headings */
--body:        #242424;  /* body text */

There are three blues, not one. The solid blue passes on contrast against white, but it disappears as soon as you lay it on the large blue panel in the “components” section — hence the fourth shade. If you change --blue, change all four, and check all four ratios again.

Dark mode

It's a second set of the same tokens, thirty lines further down. Nothing else needs touching: no layout rule is duplicated. The toggle is in the rail, remembered, and prefers-color-scheme decides the first visit.

The pacing of the pinned sections

A pinned section is a height and nothing else: --progress runs from 0 to 1 over the height minus one viewport. The hero is 175dvh, the journey 600dvh, the library 260dvh, the diagram 520dvh. Shortening speeds the animation up, lengthening slows it down.

The name

Search for “Tokora” in index.html. No CSS class carries the brand name: a find-and-replace can't break anything.

The eighteen effects, and how they're built

All taken from the original stylesheet — 834 kB, including 28 @keyframes blocks — then measured in the browser. Tokora's signature curve is cubic-bezier(.22, 1, .36, 1), its reference duration 0.92 s.

What you should know

• No external requests. Checked at all three widths: 0 requests outside the folder. The original loads 15.2 MB from two domains before showing its first heading.
• 426 kB on the first visit. The two videos (0.5 MB) only leave on click, the mega menu's four screenshots only when it opens.
• Without JavaScript, nothing is hidden. The hidden state only exists under html.js. Remove the two <script>: all 32 headings stay visible, the journey's panels stack, the carousel can be swiped, the FAQ opens.
• Zero inline styles. The ten polar positions of the hero's logos, which would naturally be styleattributes, are in the stylesheet — one rule per tool. The site's strict security policy requires it, and it reads better.
• IntersectionObserver, never animation-timeline. The original uses both; the second only exists in Chrome.
• Accessibility: skip link, mega menu and drawer states announced, carousel position through role="status", visible focus, decorations hidden from screen readers, and a prefers-reduced-motion that also resets the delays to zero.
• Responsive checked at 390, 1440 and 2560 px, on load and after scrolling all the way down, with no horizontal overflow.

What isn't perfect

Better said here than left for you to find out.