---
version: alpha
name: "Koto"
description: "Cinematic dark canvas, proprietary condensed grotesque at light weight, and a studied monochromatic restraint punctuated by a single chartreuse-yellow logomark — Koto presents global brand-building work the way a film studio presents a reel."

colors:
  # Surface / canvas
  background: "#141414"           # near-black page canvas — the overwhelming default
  surface: "#1c1c1c"              # slightly lifted dark card / project tile
  surface-mid: "#989898"          # mid-grey — used for muted UI elements and section dividers
  surface-light: "#cccccc"        # --color-light-grey — lightest neutral surface

  # Ink / text
  ink: "#ffffff"                  # primary text on dark canvas
  ink-muted: "#989898"            # secondary text, captions, metadata
  ink-dark: "#141414"             # text on light surfaces

  # Brand accent
  primary: "#ffe800"              # chartreuse yellow — the single brand accent, logo and rare highlights
  on-primary: "#000000"           # black text on yellow

  # State / interaction
  text-hover: "#cccccc"           # was oklab(0.999994… / 0.05) — Google format requires hex; approximation of white at ~5% opacity over #141414
  border: "#989898"               # mid-grey rule — project separators, tab underlines
  border-subtle: "#2a2a2a"        # was oklab(0.999994… / 0.1) — very dark near-invisible rule

  # Focus
  focus-ring: "#ffe800"           # yellow focus ring echoes brand accent

  # Shadow tint
  shadow-soft: "#000000"          # true black shadow — flat system has minimal elevation

typography:
  display-hero:
    fontFamily: "GT Kotoheim Condensed, ui-sans-serif, system-ui, sans-serif"
    fontSize: 53px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: -0.53px
    fontFeature: "\"salt\""
  display:
    fontFamily: "GT Kotoheim Condensed, ui-sans-serif, system-ui, sans-serif"
    fontSize: 42px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: -0.42px
    fontFeature: "\"salt\""
  heading-section:
    fontFamily: "GT Kotoheim Condensed, ui-sans-serif, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 300
    lineHeight: 1.15
    letterSpacing: 0px
    fontFeature: "\"salt\""
  heading-sub:
    fontFamily: "GT Kotoheim, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 350
    lineHeight: 1.25
    letterSpacing: 0px
    fontFeature: "\"salt\""
  body-large:
    fontFamily: "GT Kotoheim, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 350
    lineHeight: 1.25
    letterSpacing: 0px
    fontFeature: "\"salt\""
  body:
    fontFamily: "GT Kotoheim, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 350
    lineHeight: 1.25
    letterSpacing: 0.3px
    fontFeature: "\"salt\""
  nav-link:
    fontFamily: "GT Kotoheim, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 350
    lineHeight: 1.54
    letterSpacing: 0.1px
    fontFeature: "\"salt\""
  button-ui:
    fontFamily: "GT Kotoheim, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 350
    lineHeight: 1.0
    letterSpacing: 0px
    fontFeature: "\"salt\""
  label-mono:
    fontFamily: "GT Kotoheim Mono, ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
    fontFeature: "\"salt\""
  caption:
    fontFamily: "GT Kotoheim Mono, ui-monospace, monospace"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.2px
    fontFeature: "\"salt\""

spacing:
  xs: 4px
  sm: 9px
  md: 13px
  lg: 18px
  xl: 27px
  2xl: 40px
  3xl: 53px
  4xl: 80px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 7px
  lg: 10px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 9px 18px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 9px 18px

  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 9px 18px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 9px 18px

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px
  button-ghost-hover:
    textColor: "{colors.ink}"
    textDecoration: underline

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.surface-mid}"

  project-tile:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.none}"
    overflow: hidden
  project-tile-hover:
    opacity: 0.85
    transition: 0.167s linear

  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderBottom: 1px solid {colors.border-subtle}
    padding: 18px 27px

  badge:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 2px 6px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    padding: 9px 13px
  input-focus:
    borderColor: "{colors.ink}"
    outlineColor: "{colors.focus-ring}"
    outlineWidth: 2px

  tag:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    padding: 4px 9px
  tag-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.primary}"
---

# Koto Design System

## Overview

Koto's website is a darkroom for brand work. The near-black {colors.background} canvas — almost indistinguishable from the blackness between cinema frames — functions not as a background but as the primary material. Work sits inside it rather than on top of it: project thumbnails emerge from the dark like photographs in developer fluid, their images carrying all the chromatic weight the UI deliberately withholds. The sole departure from this monochrome discipline is the {colors.primary} chartreuse yellow reserved exclusively for the Koto logomark and the rarest of interactive accents, giving it the concentrated power of a single colour in an otherwise desaturated film.

The typographic system is a proprietary triple: GT Kotoheim Condensed handles every display and editorial moment in light (300) weight with micro-negative tracking; GT Kotoheim Regular handles all prose and UI at a barely-there weight 350; GT Kotoheim Mono supplies labels, timestamps, and indexical captions in uppercase. Together they read as a single extended typeface family — technically diverse but visually unified, every line of text an advertisement for Koto's own font foundry work. The compressed proportions let long names and long taglines sit on one line without crowding, a practical decision that doubles as a demonstration of craft.

Motion is calibrated at 167ms linear throughout, making every transition feel brisk and professional rather than decorative. Hover states shift colours across the entire page canvas, not just the targeted element — a design-studio signature move that says "we think in systems, not components." The result is a portfolio site that behaves less like a website and more like a curated exhibition space: authoritative, quiet, and confident enough to let the work lead.

**Key Characteristics:**
- Near-black {colors.background} #141414 canvas occupies the full viewport — the colour itself is the design statement
- Proprietary GT Kotoheim Condensed at weight 300 for all display text — typographic confidence that avoids bravado
- Single brand accent: {colors.primary} chartreuse yellow used only for the logomark and the most intentional interactive moments
- {typography.display-hero} condensed face at 53px / 1.0 lineheight achieves filmic column presence at any width
- GT Kotoheim Mono in small-caps uppercase carries all indexical metadata — client names, project numbers, timestamps
- `"salt"` OpenType feature active on all type — stylistic alternates baked into every text element
- Links animate via `underline-link-out-transform` keyframe at 200ms — a custom underline reveal, not a browser default
- Cards and project tiles use `0.167s linear` colour transitions — uniform tempo creates calm coherence
- Border radius stays at 2–7px for most interactive elements, 9999px for pill-shaped tags — nearly binary
- Breakpoints at 601 / 768 / 1024 / 1280 / 1510px — generous five-step ladder for a globally viewed portfolio
- Shadows are near-absent — depth comes from image contrast against the dark canvas, not elevation
- Mid-grey {colors.surface-mid} #989898 replaces pastel neutrals as the secondary text colour, maintaining monochromatic palette discipline

## Colors

### Primary
- **Near-Black** (`{colors.background}`): The main page canvas. Appears at approximately 1,104 instances in the extracted DOM — this is not a background colour, it is the site.
- **Ink White** (`{colors.ink}`): Primary text. All headings, body, and nav labels render white on the dark canvas.
- **Mid-Grey** (`{colors.ink-muted}`): Secondary text, captions, metadata, and nav items in their resting state.

### Brand Accent
- **Chartreuse Yellow** (`{colors.primary}`): Used only for the Koto logomark and occasional interactive focus rings. At 1 instance in the full colour palette, it is intentionally rationed. On-colour text uses `{colors.on-primary}` pure black for maximum contrast.

### State Colors
- **Text Hover** (`{colors.text-hover}`): Approximation of white at very low opacity over the dark canvas — used on link underline states and subtle border separators.
- **Border Rule** (`{colors.border}`): Mid-grey divider used for project separators, tab underlines, and input outlines.
- **Border Subtle** (`{colors.border-subtle}`): Near-invisible hairline rule for the navigation bar bottom edge.

### Focus
- **Focus Ring** (`{colors.focus-ring}`): The yellow brand accent reappears as a 2px focus ring — the only other use of the chartreuse beyond the logomark.

### Semantic
No semantic success/warning/error/info colours are declared in the public-facing site. The system is a client-facing portfolio, not a product with transactional states.

## Typography

### Font Family
- **Display**: `GT Kotoheim Condensed`, with fallback: `ui-sans-serif, system-ui, sans-serif` — a custom condensed grotesque with stylistic alternates (`"salt"` feature). No Google Fonts equivalent; closest publicly available match is **Barlow Condensed**.
- **Body / UI**: `GT Kotoheim` (regular width), weight 350 — an unusual fractional weight between Light and Regular, smoothly interpolated via the variable axis. Fallback: `ui-sans-serif, system-ui, sans-serif`.
- **Mono / Label**: `GT Kotoheim Mono` — used for all indexical captions, timestamps, and labels. Rendered in uppercase. Fallback: `ui-monospace, monospace`.
- **OpenType Features**: `"salt"` (stylistic alternates) is active on every text element without exception — the typeface's alternate letterforms are treated as canonical to Koto's voice.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Homepage headline, hero project titles at 53px / weight 300 |
| `display` | Section-level headings, large project names at 42px |
| `heading-section` | Sub-page headings, case study chapter titles at 36px |
| `heading-sub` | Body-width headings, secondary content titles at 18px |
| `body-large` | Lead paragraphs, editorial summaries at 18px |
| `body` | Standard prose, descriptions, contact copy at 16px |
| `nav-link` | Navigation items, link rows at 16px with slight tracking |
| `button-ui` | Button labels, CTA text at 16px |
| `label-mono` | Client names, project categories, dates — uppercase mono at 13px |
| `caption` | Indexical metadata, timestamps, image credits — uppercase mono at 10px |

### Principles
- Condensed proportions at light weight: the opposite of the design-studio norm (heavy, wide, commanding). Koto's type says confidence through restraint.
- All weights are sub-400: 300 for display, 350 for body/UI, 400 for mono captions. The system never goes bold except in the rarest of link states.
- `"salt"` alternates are always on — this is not an option but a brand constant. Any implementation that omits `font-feature-settings: "salt"` deviates from the visual identity.
- Condensed and regular widths serve a clear division of labour: Condensed = editorial / structural; Regular = prose / interactive.
- Mono = indexical: anything that functions as a label, index, or timestamp gets the mono face in uppercase.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit is approximately 9px — a subtle departure from the standard 8px grid, derived from Koto's 1/9rem modular scale at 16px root.

Whitespace is generous by design: projects breathe against the dark canvas, with the emptiness between thumbnails as important as the thumbnails themselves.

### Grid & Container
- Max content width: 1510px (the widest breakpoint)
- Full-bleed image grid for project tiles — images touch the edge of their containers
- Typography sits in a measured left column with generous right margin at large sizes
- Navigation: single-line horizontal strip at top, position sticky, minimal padding

### Whitespace Philosophy
- Negative space is the primary design element — empty canvas between projects is not wasted space but intentional dark matter.
- Content does not rush to fill the viewport. Sections open with room, allowing project work to command attention individually.
- Spacing is consistent across breakpoints: the 9px base unit scales proportionally rather than jumping between fixed values.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for all project tiles and cards |
| Subtle (Level 1) | Image contrast against {colors.background} | Project thumbnails gain visual lift from image brightness vs. dark canvas |
| Nav (Level 2) | Sticky positioning, 1px border-bottom {colors.border-subtle} | Navigation bar separation from content |
| Focus Ring | 2px solid {colors.focus-ring} | Interactive element keyboard focus |

**Shadow Philosophy**: Koto's site is essentially shadowless. Depth is achieved entirely through the contrast between the dark {colors.background} canvas and the luminosity of project imagery. This is a deliberate craft choice — shadows would compete with the atmosphere of the work. The single shadow found in the extracted DOM is `rgba(0,0,0,0)` — a zero-opacity placeholder, confirming the flat intent. The navigation bar uses a hairline {colors.border-subtle} bottom edge rather than a box-shadow drop.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Project tiles, card containers, all full-bleed image frames |
| `xs` | 2px | Buttons, primary interactive elements |
| `sm` | 4px | Dialog overlays, modal containers |
| `md` | 7px | Hover state chips, tooltip containers |
| `lg` | 10px | Larger panel containers |
| `pill` | 9999px | Filter tags, taxonomy chips |

The system is nearly binary in practice: `{rounded.none}` for anything structural and image-adjacent, `{rounded.xs}` for interactive elements, `{rounded.pill}` for tag-shaped UI. The range of 2–10px exists for edge cases but the visual register is either "hard edge" or "pill."

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — {colors.primary} yellow fill, {colors.on-primary} black text, 2px radius. The rarest button, used only for primary CTAs. Its yellow directly deploys the brand accent.
- **`button-secondary`** — transparent fill, 1px {colors.border} grey outline, {colors.ink} white text. The standard interactive button across the site.
- **`button-ghost`** — no fill, no border. {colors.ink-muted} grey text that gains underline on hover. Used for nav links and inline text actions.

### Cards

Project tiles are frameless: no border-radius, no shadow, no card chrome. The thumbnail image bleeds edge-to-edge within its column, and hover dims to ~85% opacity at `0.167s linear`. Client name and project category sit below in `{typography.label-mono}` uppercase.

### Inputs

Text inputs use `{colors.surface}` background, 1px `{colors.border}` outline, and 2px `{colors.focus-ring}` yellow ring on focus. Corner radius is `{rounded.xs}` — consistent with the minimal button shaping. Used primarily in the contact form.

### Badges / Tags

Tags and filter chips use `{rounded.pill}` shape with 1px `{colors.border}` grey outline in resting state. Active state fills with `{colors.primary}` yellow and switches text to `{colors.on-primary}` black. Used in the project taxonomy / filter interface.

### Navigation

Single-line horizontal nav pinned to the top of the viewport. Contains logo (yellow mark + "Koto" wordmark), primary links in `{typography.nav-link}`, and a time indicator (current time) on the far right rendered in `{typography.caption}` mono. Transitions opacity at `0.5s cubic-bezier(0.4, 0, 0.2, 1)` on scroll engagement. No hamburger or drawer on mobile — links collapse to a condensed horizontal strip.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the unbroken canvas across every section — never introduce a white or light-grey page background.
- Apply `font-feature-settings: "salt"` to every text element without exception — it is a brand constant, not an option.
- Reserve `{colors.primary}` for the logomark, the primary CTA button fill, and the focus ring — treat it as a precious material.
- Use `{typography.label-mono}` in uppercase for all client names, project categories, and indexical metadata.
- Set `0.167s linear` on all `color`, `background-color`, and `border-color` transitions — uniform tempo is part of the system's calm identity.
- Let project imagery carry chromatic complexity — keep UI chrome in the mid-grey to near-black range so work stands out.
- Apply `{rounded.none}` to any element directly adjacent to or containing imagery — hard edges preserve the cinematic framing.
- Use negative space deliberately: empty dark canvas between project tiles is intentional, not layout overflow.

### Don't
- Don't introduce gradients as background treatments — the only gradient in the system is a dark-to-transparent image overlay for legibility, not a decorative element.
- Don't use `{colors.primary}` yellow as a text colour on the dark canvas — it is an accent for fills and rings, not for running copy.
- Don't add mid-range border-radius (12–48px) — the system's tension lives in the binary between hard `{rounded.none}` and soft `{rounded.pill}`.
- Don't add semantic colours (green for success, red for error) to the portfolio-facing UI — the system has no transactional states.
- Don't use font weight above 400 in the type system — the GT Kotoheim family's identity lives in its sub-regular weights.
- Don't add box-shadows for elevation — use image contrast against the {colors.background} canvas instead.
- Don't skip the `"salt"` OpenType feature on any text node — its omission visibly breaks the typeface's designed character.
- Don't use `{colors.surface-mid}` grey #989898 as a background for panels or cards — it belongs strictly to secondary text and divider rules.

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <601px | Single-column project grid, navigation collapses to minimal horizontal strip, display type steps down to ~36px |
| Mobile | 601–768px | Single-column layout, full-bleed imagery, reduced header padding |
| Tablet | 768–1024px | Two-column project grid begins, navigation fully horizontal, type scale partially restored |
| Desktop | 1024–1280px | Standard two-to-three column grid, full navigation, display at 42–53px |
| Large Desktop | >1280px | Full 1510px max-width container, widest grid columns, generous inter-project spacing |

### Touch Targets

All interactive navigation links and project tiles are generously sized for touch — minimum tap area aligns with the full project thumbnail height. Filter tags at `{rounded.pill}` have adequate vertical padding (4px top/bottom) for comfortable finger interaction.

### Collapsing Strategy

- Project grid collapses from three columns to two to one as viewport narrows
- Navigation remains horizontal across all breakpoints — no hamburger menu — relying on condensed type to fit links on one line
- Display type steps from 53px → 42px → 36px as breakpoints descend
- The dark {colors.background} canvas and full-bleed image treatment are maintained at every viewport size — the atmosphere does not degrade

### Image Behavior

All project thumbnails are full-bleed within their column container, using `object-fit: cover`. Images are served via Sanity CDN with Next.js Image optimisation (`_next/image`). On mobile, single-column images stretch to full viewport width, giving each project cinematic presence even on small screens.

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#141414)
- Text: `{colors.ink}` (#ffffff)
- Brand accent: `{colors.primary}` (#ffe800)
- Secondary text: `{colors.ink-muted}` (#989898)
- Border: `{colors.border}` (#989898)
- CTA fill: `{colors.primary}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

- "Build a project tile card using `background-color: {colors.background}`, no border-radius, full-bleed image, and a metadata row below in `font-family: GT Kotoheim Mono, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: -0.2px; color: {colors.ink-muted}`. On hover, transition `opacity` to 0.85 at `0.167s linear`."

- "Build a hero section with `background: {colors.background}`, a large heading using `font-family: GT Kotoheim Condensed, sans-serif; font-size: 53px; font-weight: 300; line-height: 1.0; letter-spacing: -0.53px; font-feature-settings: 'salt'; color: {colors.ink}`, and a subhead at 42px / weight 300 in the same face."

- "Build a primary CTA button: `background-color: {colors.primary}; color: {colors.on-primary}; font-family: GT Kotoheim, sans-serif; font-size: 16px; font-weight: 350; font-feature-settings: 'salt'; border-radius: 2px; padding: 9px 18px; border: none; transition: background-color 0.167s linear`. On hover, shift to `background-color: {colors.ink}; color: {colors.ink-dark}`."

- "Build a site navigation bar: `position: sticky; top: 0; background: {colors.background}; border-bottom: 1px solid {colors.border-subtle}; display: flex; align-items: center; justify-content: space-between; padding: 18px 27px`. Logo on left, nav links in `font-family: GT Kotoheim, sans-serif; font-size: 16px; font-weight: 350; font-feature-settings: 'salt'; color: {colors.ink-muted}` with hover `color: {colors.ink}` at `0.167s linear`. Current time on far right in `{typography.caption}` mono uppercase."

- "Build a filter tag chip: `background: transparent; color: {colors.ink-muted}; border: 1px solid {colors.border}; border-radius: 9999px; padding: 4px 9px; font-family: GT Kotoheim Mono, monospace; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: -0.2px`. Active state: `background: {colors.primary}; color: {colors.on-primary}; border-color: {colors.primary}`."

- "Build a contact input field: `background: {colors.surface}; color: {colors.ink}; border: 1px solid {colors.border}; border-radius: 2px; padding: 9px 13px; font-family: GT Kotoheim, sans-serif; font-size: 16px; font-weight: 350; font-feature-settings: 'salt'; width: 100%`. On focus: `outline: 2px solid {colors.focus-ring}; border-color: {colors.ink}`."

### Iteration Guide

1. Start with `{colors.background}` as the full-viewport canvas. Never introduce a lighter background variant unless building a light-mode exception for print or accessibility.
2. Use `{colors.primary}` only once per major screen region — the logomark, a single CTA button, or the focus ring. It must remain rare to hold its weight.
3. Set `font-feature-settings: "salt"` on every text element globally via CSS inheritance from `:root` or `body`. Do not rely on per-element application.
4. Apply `transition: color 0.167s linear, background-color 0.167s linear, border-color 0.167s linear` to every interactive element as a base rule. The tempo is the system's pulse.
5. Use `{typography.label-mono}` + `text-transform: uppercase` for any metadata, index number, client name, or date — these labels anchor the content without competing with the display type.
6. Keep border-radius in the `{rounded.none}` to `{rounded.xs}` range for everything structural and image-adjacent. Only tags and chips reach `{rounded.pill}`.
7. Let photographic content define all colour complexity. UI chrome — borders, labels, icons, nav — stays in the monochromatic range from `{colors.background}` through `{colors.ink-muted}` to `{colors.ink}`.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Koto. Brand names and trademarks belong to their respective owners.