Screenshot of Koto

Koto

koto.studio

The reference for global brand-agency studios — yellow logomark on near-black, four custom typefaces, live UTC clock chrome, split-screen sticky-text case study reveals.

Creative Studio Global Brand Agency strong

Design tokens

page
surface
text
textMuted
textSubtle
black
yellowBrand
oklabAlphaWhite
oklabAlphaWhite05
display
gtKotoheim
body
gtKotoheim
mono
gtKotoheimMono
condensed
gtKotoheimCondensed

Do / Don't

Reference it for

  • Near-black rgb(20, 20, 20) page with rgb(32,32,32) secondary surfaces — not pure black
  • rgb(152, 152, 152) mid-grey muted text for descriptions (593 hits — substantial)
  • OKLAB colour declarations alongside RGB — modern colour-science adoption
  • Yellow brand accent logomark (Koto's #FFE600-style)
  • Four-typeface custom system — gtKotoheim regular + Mono + Condensed (Grilli Type bespoke)
  • 5-weight typographic system (300, 350, 400, 600, 700) — most varied in library
  • 9-step type scale (9-48px) — most steps of any flagship
  • gtKotoheimMono for UTC clock + metadata — mono signals "system info"

Do not copy

  • The Koto logomark with subscript-o
  • The gtKotoheim / gtKotoheimMono / gtKotoheimCondensed bespoke typefaces (Grilli Type-owned)
  • The exact #FFE600-style yellow brand colour
  • The "We're Koto / The Creative Company" hero copy
  • The "Like me?" interactive toggle
  • The Amazon / Microsoft / Bumble case studies
  • The live UTC clock UTC+10 timezone (Sydney) unless the brand is in Sydney
  • The Grilli Type bespoke font commissioning model unless brand has comparable budget

Signature moves

split-screen sticky-text case study reveal

vertical split-screen case studies pin the left text column while the right media scrolls, each with a tiny metadata footer (project type / year / category) and Vimeo full-viewport reels

global-agency mono chrome with live UTC clock

a live UTC clock sits in top-right chrome set in the mono cut (gtKotoheimMono) to signal system info, with a six-item ALL-CAPS horizontal nav and a "::" power-user quick-menu indicator on near-black rgb(20,20,20)

bottom-left hero with empty viewport above

the hero headline anchors to the bottom-left with a massive empty viewport above it, across a 9-step type scale (9-48px) and a 5-weight system (300/350/400/600/700)

Related references

Screenshot of Huge

Huge

flagship

Creative Studio

a black-canvas, Monument-Grotesk agency site that turns brutalist restraint into confidence, sharp corners, one type family, vast empty space, then detonates a few hot-pink and acid-green colour blocks and lets Lenis-smooth scroll reveal the work.
Screenshot of Alche

Alche

strong

Creative Studio

The reference for Japanese virtual-character + immersive experience studios — Astro v5 build, neon yellow-green accent, 5-font multi-language system, KizunaAI case study.
Screenshot of Analogue

Analogue

strong

Creative Studio

a "seriously playful" brand-and-motion studio that wears its personality as type, a wonky multi-alternate ANALOGUE wordmark, emoji and icon glyphs set inline in the copy, a candy-pink accent on white, and a GSAP-driven box of tricks (mexican-wave letters, glitches, bounce, float) kept just on the right side of chaos.
Screenshot of Mccarthy Building Companies

Mccarthy Building Companies

flagship

Other

A 100+ year, employee-owned national commercial builder that projects quiet authority at scale - full-bleed video and aerial photography of real megaprojects, oversized condensed type ("SUPERIOR RESULTS", "WE CAN BUILD IT"), a single bold red accent, and clip-path scroll reveals that feel cinematic but never showy.