Bento Portfolio - defuss-shadcn

Aiko Tanaka, product designer
One grid of named areas (the page's own CSS): four columns wide, two at tablet width, one on a phone - a container query, so the card's device toolbar shows all three. Text Rotate in the intro, a corner-squircle portrait that opens an About dialog, Availability with a Progress of the quarter's slots and a Hire me dialog (Input, Select, Textarea), a pattern-grid tile with a pinging Indicator dot and the time in Tokyo (Intl.DateTimeFormat), a Portfolio Grid (bento) whose cases open the Media Gallery's viewer (commandfor + command="show-modal"), Skill Matrix (tags), three quotes picked by radios (:has()), labelled links with Copy (Clipboard API), an exclusive Accordion of notes and a Now list. data-df-stagger zooms the tiles in one by one.
<style>
  #pf-bento {
    --background: oklch(0.955 0.004 260);
    --foreground: oklch(0.2 0.01 260);
    --card: oklch(1 0 0);
    --card-foreground: var(--foreground);
    --muted: oklch(0.95 0.004 260);
    --muted-foreground: oklch(0.5 0.01 260);
    --border: oklch(0.91 0.005 260);
    --input: var(--border);
    --primary: oklch(0.66 0.19 42);
    --primary-foreground: oklch(0.99 0 0);
    --secondary: oklch(0.95 0.004 260);
    --secondary-foreground: var(--foreground);
    --accent: oklch(0.95 0.03 60);
    --accent-foreground: var(--foreground);
    --ring: var(--primary);
    container: pf-bento / inline-size;
    box-sizing: border-box;
    width: 100%;
    padding: clamp(1rem, 3vw, 2rem);
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
  }
  .dark #pf-bento {
    --background: oklch(0.13 0 0);
    --foreground: oklch(0.96 0 0);
    --card: oklch(0.19 0.004 260);
    --muted: oklch(0.24 0.004 260);
    --secondary: oklch(0.24 0.004 260);
    --muted-foreground: oklch(0.7 0.01 260);
    --border: oklch(0.27 0.006 260);
    --primary: oklch(0.72 0.17 45);
    --primary-foreground: oklch(0.17 0.02 45);
    --accent: oklch(0.27 0.03 60);
  }
  #pf-bento .pf-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(11rem, auto);
    grid-template-areas:
      'intro intro photo avail'
      'intro intro photo place'
      'work work stat tools'
      'work work quote links'
      'write write now now';
    gap: 0.875rem;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }
  #pf-bento .pf-tile {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 1rem);
    background: var(--card);
    overflow: hidden;
  }
  #pf-bento .pf-intro {
    grid-area: intro;
    justify-content: space-between;
    padding: clamp(1.5rem, 3cqi, 2.5rem);
  }
  #pf-bento .pf-photo {
    grid-area: photo;
    padding: 0;
  }
  #pf-bento .pf-avail {
    grid-area: avail;
  }
  #pf-bento .pf-place {
    grid-area: place;
    justify-content: flex-end;
    --shape-ink: color-mix(in oklch, var(--foreground) 11%, transparent);
    --shape-pattern: 24px;
    background-color: color-mix(in oklch, var(--card) 85%, oklch(0.8 0.08 200));
    position: relative;
  }
  #pf-bento .pf-work {
    grid-area: work;
  }
  #pf-bento .pf-stat {
    grid-area: stat;
    justify-content: space-between;
    border-color: transparent;
    background: var(--primary);
    color: var(--primary-foreground);
  }
  #pf-bento .pf-tools {
    grid-area: tools;
  }
  #pf-bento .pf-quote {
    grid-area: quote;
    justify-content: space-between;
    border-color: transparent;
    background: var(--foreground);
    color: var(--background);
  }
  #pf-bento .pf-links {
    grid-area: links;
    justify-content: space-between;
    background: var(--accent);
    border-color: transparent;
  }
  #pf-bento .pf-muted {
    margin: 0;
    color: var(--muted-foreground);
  }
  #pf-bento .pf-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
  #pf-bento .pf-stat .pf-label,
  #pf-bento .pf-quote .pf-label {
    color: inherit;
    opacity: 0.75;
  }
  #pf-bento .pf-title {
    margin: 0;
    font-size: clamp(2rem, 1rem + 3.2cqi, 3.75rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.045em;
  }
  #pf-bento .pf-title .text-rotate {
    display: block;
    color: var(--primary);
  }
  #pf-bento .pf-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 16rem;
    object-fit: cover;
  }
  #pf-bento .pf-big {
    margin: 0;
    font-size: clamp(3rem, 2rem + 3cqi, 4.5rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.05em;
  }
  #pf-bento .pf-pin {
    position: absolute;
    inset-block-start: 1.25rem;
    inset-inline-end: 1.25rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--card);
    box-shadow: var(--shadow-md);
  }
  #pf-bento .pf-quote blockquote {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.35;
    text-wrap: balance;
  }
  #pf-bento .pf-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #pf-bento .pf-work .mk-portfolio-grid {
    flex: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(9.5rem, 1fr);
  }
  #pf-bento .mk-availability {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }
  /* the portrait opens About, the work opens the case viewer: buttons that look like what they hold */
  #pf-bento .pf-photo button,
  #pf-bento button.mk-portfolio-grid-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: zoom-in;
  }
  #pf-bento .pf-photo button {
    cursor: pointer;
  }
  #pf-bento .pf-photo-tag {
    position: absolute;
    inset: auto 0.875rem 0.875rem auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: oklch(0.15 0 0 / 0.6);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background 0.2s;
  }
  #pf-bento .pf-photo-tag svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  #pf-bento .pf-photo button:hover .pf-photo-tag {
    background: var(--primary);
    color: var(--primary-foreground);
  }
  #pf-bento :is(.pf-photo button, button.mk-portfolio-grid-link):focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: -3px;
  }
  #pf-bento .pf-photo img {
    transition: scale 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  #pf-bento .pf-photo button:hover img {
    scale: 1.04;
  }
  /* availability: how full the next quarter is */
  #pf-bento .pf-slots {
    display: grid;
    gap: 0.4rem;
    margin-block-start: auto;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
  }
  #pf-bento .pf-slots p {
    margin: 0;
  }
  /* the clock in Tokyo */
  #pf-bento .pf-clock {
    margin: 0;
    font-size: clamp(2rem, 1.25rem + 2cqi, 2.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
  }
  #pf-bento .pf-clock-note {
    margin: 0;
    font-weight: 600;
  }
  /* the quote tile: three quotes in one cell, radios pick one (:has()) */
  #pf-bento .pf-quotes {
    display: grid;
    margin-block-start: auto;
  }
  #pf-bento .pf-quotes figure {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    translate: 0 0.5rem;
    transition:
      opacity 0.35s,
      translate 0.35s,
      visibility 0.35s;
  }
  #pf-bento .pf-quote:has([value='0']:checked) .pf-quotes figure:nth-child(1),
  #pf-bento .pf-quote:has([value='1']:checked) .pf-quotes figure:nth-child(2),
  #pf-bento .pf-quote:has([value='2']:checked) .pf-quotes figure:nth-child(3) {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }
  #pf-bento .pf-quotes figcaption {
    margin-block-start: 0.75rem;
    font-size: 0.875rem;
    opacity: 0.75;
  }
  #pf-bento .pf-dots {
    display: flex;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    border: 0;
  }
  #pf-bento .pf-dots input {
    appearance: none;
    width: 0.55rem;
    height: 0.55rem;
    margin: 0;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.35;
    cursor: pointer;
    transition:
      width 0.3s,
      opacity 0.3s;
  }
  #pf-bento .pf-dots input:checked {
    width: 1.5rem;
    opacity: 1;
  }
  #pf-bento .pf-dots input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }
  /* the links: labelled, and the address to copy */
  #pf-bento .pf-links .btn {
    background: var(--card);
  }
  #pf-bento .pf-mail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    user-select: all;
  }
  /* writing and now */
  #pf-bento .pf-write {
    grid-area: write;
  }
  #pf-bento .pf-write .accordion-trigger span {
    display: grid;
    gap: 0.15rem;
  }
  #pf-bento .pf-write .accordion-trigger small {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 500;
  }
  #pf-bento .pf-write .accordion-content p {
    margin: 0;
    color: var(--muted-foreground);
  }
  #pf-bento .pf-now {
    grid-area: now;
    background: color-mix(in oklch, var(--card) 88%, var(--primary));
  }
  #pf-bento .pf-now dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem 1rem;
    margin: 0;
  }
  #pf-bento .pf-now dt {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 600;
  }
  #pf-bento .pf-now dt svg {
    width: 1rem;
    height: 1rem;
  }
  #pf-bento .pf-now dd {
    margin: 0;
    font-weight: 600;
  }
  /* the dialogs: the case viewer (Media Gallery's), About and Hire me */
  #pf-bento .pf-viewer .mk-media-gallery-track p {
    max-width: 42rem;
    margin-inline: auto;
    line-height: 1.5;
  }
  #pf-bento .pf-viewer::backdrop {
    background: oklch(0.08 0.01 260 / 0.94);
    backdrop-filter: blur(10px);
  }
  #pf-bento .pf-viewer strong {
    color: #fff;
  }
  #pf-bento .pf-viewer-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  #pf-bento .pf-viewer-step {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: oklch(1 0 0 / 0.15);
    color: #fff;
    cursor: pointer;
  }
  #pf-bento .pf-viewer-step:hover {
    background: oklch(1 0 0 / 0.28);
  }
  #pf-bento .pf-viewer-step:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
  #pf-bento .pf-dialog {
    width: min(94vw, 34rem);
    max-height: min(92dvh, 52rem);
    margin: auto;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 1rem);
    background: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-2xl);
  }
  #pf-bento .pf-dialog::backdrop {
    background: oklch(0.15 0 0 / 0.5);
    backdrop-filter: blur(6px);
  }
  #pf-bento .pf-dialog-body {
    display: grid;
    gap: 1rem;
    padding: 1.75rem;
  }
  #pf-bento .pf-dialog h2 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
  }
  #pf-bento .pf-dialog .pf-dialog-x {
    position: absolute;
    z-index: 1;
    background: var(--card);
    inset: 0.75rem 0.75rem auto auto;
  }
  #pf-bento .pf-about {
    width: min(94vw, 56rem);
  }
  #pf-bento .pf-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
  #pf-bento .pf-about-grid > img {
    width: 100%;
    height: 100%;
    min-height: 18rem;
    object-fit: cover;
  }
  #pf-bento .pf-about p {
    margin: 0;
    line-height: 1.6;
  }
  #pf-bento .pf-about ol {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #pf-bento .pf-about li {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.75rem;
    font-size: 0.9375rem;
  }
  #pf-bento .pf-about li span {
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
  }
  #pf-bento .pf-row {
    display: grid;
    gap: 0.4rem;
  }
  #pf-bento .pf-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  #pf-bento .pf-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  #pf-bento .pf-hire:not([data-sent]) .pf-hire-done,
  #pf-bento .pf-hire[data-sent] form {
    display: none;
  }
  #pf-bento .pf-hire-done {
    justify-items: center;
    text-align: center;
  }
  #pf-bento .pf-hire-done > svg {
    width: 3rem;
    height: 3rem;
    padding: 0.6rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
  }
  #pf-bento .pf-hire-done p {
    margin: 0;
    color: var(--muted-foreground);
  }
  @container pf-bento (max-width: 40rem) {
    #pf-bento .pf-about-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    #pf-bento .pf-about-grid > img {
      min-height: 0;
      aspect-ratio: 16 / 10;
    }
    #pf-bento .pf-pair {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #pf-bento :is(.pf-quotes figure, .pf-dots input, .pf-photo img, .pf-photo-tag) {
      transition: none;
    }
  }
  @container pf-bento (max-width: 62rem) {
    #pf-bento .pf-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas:
        'intro intro'
        'photo avail'
        'photo place'
        'work work'
        'stat tools'
        'quote links'
        'write now';
    }
  }
  @container pf-bento (max-width: 34rem) {
    #pf-bento .pf-grid {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: 'intro' 'photo' 'avail' 'place' 'work' 'stat' 'tools' 'quote' 'links' 'write' 'now';
    }
  }
  /* light or dark: the Swap writes the page's dark class - every look has a light and a dark palette */
  #pf-bento .site-mode {
    flex: none;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
  }
  #pf-bento .site-mode:hover {
    background: var(--accent);
    color: var(--accent-foreground);
  }
  #pf-bento [hidden] {
    display: none !important;
  }
  /* the Site Header: one more tile - the portrait as a squircle, the sections, About, Hire me and the mode */
  #pf-bento .mk-header {
    max-width: 80rem;
    margin: 0 auto 0.875rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 1rem);
    background: var(--card);
    color: var(--card-foreground);
  }
  #pf-bento .mk-header-inner {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    max-width: none;
    min-height: 4.5rem;
    padding: 0.75rem 1rem 0.75rem 0.75rem;
  }
  #pf-bento .mk-header-brand {
    gap: 0.75rem;
    color: inherit;
  }
  #pf-bento .mk-header-brand img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
  }
  #pf-bento :is(.mk-header-name, .mk-footer-brand-name) {
    color: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  #pf-bento .mk-header-nav {
    display: flex;
    margin-inline-start: auto;
  }
  #pf-bento .nav-menu-link {
    border-radius: 999px;
    font-size: 0.9375rem;
  }
  #pf-bento .nav-menu-link[aria-current] {
    background: var(--accent);
    color: var(--accent-foreground);
  }
  #pf-bento .mk-header-actions .btn {
    border-radius: 999px;
  }
  /* a case and a note: the same tiles, arranged for reading */
  #pf-bento .pf-case {
    grid-template-areas:
      'head head head metric'
      'cover cover cover cover'
      'facts brief brief shot'
      'result work work shot'
      'prev prev next next';
  }
  #pf-bento .pf-case-head {
    grid-area: head;
    padding: clamp(1.5rem, 3cqi, 2.5rem);
  }
  #pf-bento .pf-case-lede {
    max-width: 46rem;
    font-size: 1.125rem;
    line-height: 1.5;
  }
  #pf-bento .pf-case-metric {
    grid-area: metric;
  }
  #pf-bento :is(.pf-case-cover, .pf-case-shot) {
    margin: 0;
    padding: 0;
  }
  #pf-bento .pf-case-cover {
    grid-area: cover;
  }
  #pf-bento .pf-case-shot {
    grid-area: shot;
  }
  #pf-bento :is(.pf-case-cover, .pf-case-shot) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #pf-bento .pf-case-cover img {
    aspect-ratio: 16 / 7;
  }
  #pf-bento .pf-case-facts {
    grid-area: facts;
    display: grid;
    align-content: start;
    gap: 0.15rem;
    margin: 0;
  }
  #pf-bento .pf-case-facts dt {
    margin-block-start: 0.6rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  #pf-bento .pf-case-facts dt:first-child {
    margin-block-start: 0;
  }
  #pf-bento .pf-case-facts dd {
    margin: 0;
    font-weight: 600;
  }
  #pf-bento .pf-case-brief {
    grid-area: brief;
  }
  #pf-bento .pf-case-work {
    grid-area: work;
  }
  #pf-bento .pf-case-result {
    grid-area: result;
    background: var(--accent);
    border-color: transparent;
  }
  #pf-bento :is(.pf-case-brief, .pf-case-work, .pf-case-result) p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    text-wrap: pretty;
  }
  #pf-bento .pf-case-step {
    justify-content: space-between;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s;
  }
  #pf-bento .pf-case-step:is(:hover, :focus-visible) {
    border-color: var(--primary);
  }
  #pf-bento .pf-case-step + .pf-case-step {
    grid-area: next;
    align-items: flex-end;
    text-align: end;
  }
  #pf-bento .pf-case-step:first-of-type {
    grid-area: prev;
  }
  #pf-bento .pf-case-step .pf-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  #pf-bento .pf-case-step strong {
    font-size: clamp(1.25rem, 1rem + 1cqi, 1.75rem);
    letter-spacing: -0.03em;
  }
  #pf-bento :is(.pf-case-step, .pf-back) svg {
    width: 1rem;
    height: 1rem;
  }
  #pf-bento .pf-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
  }
  #pf-bento .pf-back:is(:hover, :focus-visible) {
    color: var(--primary);
  }
  #pf-bento .pf-note {
    grid-template-areas: 'note note note list';
  }
  #pf-bento :is(.pf-case, .pf-note) {
    grid-auto-rows: auto;
  }
  #pf-bento .nav-menu-link {
    line-height: 1.25rem;
  }
  #pf-bento .pf-note-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 40rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--border);
  }
  #pf-bento .pf-note-pager a {
    display: grid;
    gap: 0.25rem;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
  }
  #pf-bento .pf-note-pager a + a {
    justify-items: end;
    text-align: end;
  }
  #pf-bento .pf-note-pager a:is(:hover, :focus-visible) span {
    color: var(--primary);
  }
  #pf-bento .pf-note-pager small {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  #pf-bento .pf-note-pager svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  #pf-bento .pf-note-text {
    grid-area: note;
    padding: clamp(1.5rem, 4cqi, 3rem);
  }
  #pf-bento .pf-note-body {
    max-width: 40rem;
    margin-block-start: 0.75rem;
  }
  #pf-bento .pf-note-body p {
    margin: 0 0 1.1rem;
    font-size: 1.125rem;
    line-height: 1.7;
    text-wrap: pretty;
  }
  #pf-bento .pf-note-list {
    grid-area: list;
    align-self: start;
    background: var(--accent);
    border-color: transparent;
  }
  #pf-bento .pf-note-list ul {
    display: grid;
    gap: 0.25rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
  }
  #pf-bento .pf-note-list a {
    display: grid;
    gap: 0.1rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-lg);
    color: inherit;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
  }
  #pf-bento .pf-note-list a:is(:hover, :focus-visible) {
    background: var(--card);
  }
  #pf-bento .pf-note-list a[aria-current] {
    background: var(--card);
    box-shadow: inset 3px 0 0 var(--primary);
  }
  #pf-bento .pf-note-list small {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 500;
  }
  /* the links into a case and a note: in the viewer's light text, in the accordion's accent */
  #pf-bento .pf-viewer a {
    color: #fff;
    font-weight: 600;
    text-underline-offset: 0.25em;
  }
  #pf-bento .pf-write .accordion-content a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
  }
  #pf-bento .pf-write .accordion-content a:is(:hover, :focus-visible) {
    text-decoration: underline;
  }
  /* the Site Footer: the last tile - the cases, the notes, elsewhere, the studio */
  #pf-bento .mk-footer {
    max-width: 80rem;
    margin: 0.875rem auto 0;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 1rem);
    background: var(--card);
    color: var(--card-foreground);
  }
  #pf-bento .mk-footer-inner {
    max-width: none;
    padding: clamp(1.5rem, 3cqi, 2.25rem);
  }
  #pf-bento .mk-footer-heading {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  #pf-bento .mk-footer-list {
    gap: 0.5rem;
    font-size: 0.9375rem;
  }
  #pf-bento .mk-footer-list a:is(:hover, :focus-visible) {
    color: var(--primary);
    text-decoration: none;
  }
  #pf-bento .mk-footer address {
    color: var(--muted-foreground);
    font-size: 0.9375rem;
    font-style: normal;
    line-height: 1.6;
  }
  #pf-bento .mk-footer-rule {
    margin: 0;
  }
  #pf-bento .mk-footer-brand {
    color: inherit;
  }
  @container pf-bento (max-width: 62rem) {
    #pf-bento .pf-case {
      grid-template-areas:
        'head head'
        'metric shot'
        'cover cover'
        'facts shot'
        'brief brief'
        'work work'
        'result result'
        'prev next';
    }
    #pf-bento .pf-note {
      grid-template-areas: 'note note' 'list list';
    }
  }
  @container pf-bento (max-width: 34rem) {
    #pf-bento .pf-case {
      grid-template-areas: 'head' 'metric' 'cover' 'facts' 'brief' 'shot' 'work' 'result' 'prev' 'next';
    }
    #pf-bento .pf-note {
      grid-template-areas: 'note' 'list';
    }
    #pf-bento .mk-header-nav {
      order: 3;
      width: 100%;
      margin-inline-start: 0;
    }
    #pf-bento .mk-header-actions {
      margin-inline-start: auto;
    }
    #pf-bento .pf-case-shot img {
      aspect-ratio: 4 / 3;
    }
  }
  /* -- modes: each look in light and dark, derived from the palettes above (the other mode of each look) -- */
  :root:not(.dark) #pf-bento {
    --primary-foreground: oklch(0.17 0.03 42);
    --accent: oklch(0.91 0.03 60);
  }
  .dark #pf-bento {
    --accent: oklch(0.24 0.03 60);
  }
  /* -- modes: end -- */
</style>
<div id="pf-bento">
  <header class="mk-header">
    <div class="mk-header-inner">
      <a class="mk-header-brand" href="#/" data-router-link
        ><img class="corner-squircle" src="https://picsum.photos/id/832/96/96" alt="" /><span class="mk-header-name"
          >Aiko Tanaka</span
        ></a
      >
      <nav class="mk-header-nav" aria-label="Main">
        <ul class="nav-menu-list">
          <li class="nav-menu-item"><a class="nav-menu-link" href="#/work" data-router-link>Work</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#/writing" data-router-link>Writing</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#/contact" data-router-link>Contact</a></li>
          <li class="nav-menu-item"
            ><button class="nav-menu-link" type="button" commandfor="pf-bento-about" command="show-modal"
              >About</button
            ></li
          >
        </ul>
      </nav>
      <div class="mk-header-actions">
        <button class="btn" data-size="sm" type="button" commandfor="pf-bento-hire-dialog" command="show-modal"
          >Hire me</button
        >
        <label class="swap site-mode" data-variant="rotate" data-size="sm">
          <input type="checkbox" data-site-mode aria-label="Dark mode" />
          <span class="swap-on" aria-hidden="true"><i data-lucide="moon"></i></span>
          <span class="swap-off" aria-hidden="true"><i data-lucide="sun"></i></span>
        </label>
      </div>
    </div>
  </header>
  <ul
    class="pf-grid"
    data-pf-view="home"
    data-df-stagger
    style="--df-motion-stagger-step: 70ms"
    aria-label="Aiko Tanaka"
  >
    <li class="pf-tile pf-intro" data-df-entrance="zoom">
      <p class="pf-label">Product designer · Tokyo</p>
      <h1 class="pf-title">
        Aiko Tanaka designs checkouts
        <span class="text-rotate"
          ><span><span>people finish.</span><span>that convert.</span><span>that feel calm.</span></span></span
        >
      </h1>
      <p class="pf-muted" style="max-width: 34rem"
        >Eight years at product companies in Tokyo and Amsterdam - payments, onboarding and the forms nobody else
        wants.</p
      >
    </li>
    <li class="pf-tile pf-photo corner-squircle" data-df-entrance="zoom">
      <button type="button" commandfor="pf-bento-about" command="show-modal">
        <img src="https://picsum.photos/id/832/600/900" alt="Aiko Tanaka reading in a pale blue blouse" />
        <span class="pf-photo-tag">About me <i data-lucide="arrow-up-right"></i></span>
      </button>
    </li>
    <li class="pf-tile pf-avail" data-df-entrance="zoom">
      <aside class="mk-availability" aria-labelledby="pf-bento-hire">
        <p class="mk-availability-status"
          ><span class="indicator-dot" data-variant="success" data-animate="ping" aria-hidden="true"></span>
          Available</p
        >
        <p class="mk-availability-title" id="pf-bento-hire">Freelance from January</p>
        <div class="mk-availability-actions">
          <button class="btn" data-size="sm" type="button" commandfor="pf-bento-hire-dialog" command="show-modal"
            >Hire me</button
          >
        </div>
      </aside>
      <div class="pf-slots">
        <p id="pf-bento-slots">Q1 2027 - 2 of 3 project slots booked</p>
        <progress class="progress" value="2" max="3" aria-labelledby="pf-bento-slots">2 of 3</progress>
      </div>
    </li>
    <li class="pf-tile pf-place pattern-grid" data-df-entrance="zoom">
      <span class="pf-pin" aria-hidden="true"
        ><span class="indicator-dot" data-variant="warning" data-animate="ping"></span
      ></span>
      <p class="pf-label">Based in Tokyo · GMT+9</p>
      <p class="pf-clock"><time data-pf-clock>--:--</time></p>
      <p class="pf-clock-note" data-pf-clock-note aria-live="polite">Remote friendly</p>
    </li>
    <li class="pf-tile pf-work" data-df-entrance="zoom" data-pf-section="work">
      <p class="pf-label">Selected work</p>
      <ul class="mk-portfolio-grid">
        <li class="mk-portfolio-grid-item" data-span="wide">
          <button
            class="mk-portfolio-grid-link"
            type="button"
            commandfor="pf-bento-viewer"
            command="show-modal"
            data-slide="0"
          >
            <img
              class="mk-portfolio-grid-media"
              src="https://picsum.photos/id/1060/900/500"
              alt="Coffee dripping through a pour-over filter in a café"
            />
            <span class="mk-portfolio-grid-caption">
              <strong class="mk-portfolio-grid-title">Kumo checkout</strong>
              <span class="mk-portfolio-grid-meta">+18% completed orders</span>
            </span>
          </button>
        </li>
        <li class="mk-portfolio-grid-item">
          <button
            class="mk-portfolio-grid-link"
            type="button"
            commandfor="pf-bento-viewer"
            command="show-modal"
            data-slide="1"
          >
            <img
              class="mk-portfolio-grid-media"
              src="https://picsum.photos/id/180/600/600"
              alt="A laptop beside an open notebook with wireframe sketches"
            />
            <span class="mk-portfolio-grid-caption">
              <strong class="mk-portfolio-grid-title">Fleet dashboard</strong>
              <span class="mk-portfolio-grid-meta">B2B · 2024</span>
            </span>
          </button>
        </li>
        <li class="mk-portfolio-grid-item">
          <button
            class="mk-portfolio-grid-link"
            type="button"
            commandfor="pf-bento-viewer"
            command="show-modal"
            data-slide="2"
          >
            <img
              class="mk-portfolio-grid-media"
              src="https://picsum.photos/id/367/600/600"
              alt="A hand holding an e-reader outdoors"
            />
            <span class="mk-portfolio-grid-caption">
              <strong class="mk-portfolio-grid-title">Hana onboarding</strong>
              <span class="mk-portfolio-grid-meta">App · 2023</span>
            </span>
          </button>
        </li>
      </ul>
    </li>
    <li class="pf-tile pf-stat" data-df-entrance="zoom">
      <p class="pf-label">Shipped</p>
      <div>
        <p class="pf-big">40+</p>
        <p style="margin: 0.5rem 0 0">products, and 3 design systems built from scratch</p>
      </div>
    </li>
    <li class="pf-tile pf-tools" data-df-entrance="zoom">
      <div class="mk-skill-matrix" data-variant="tags">
        <section class="mk-skill-matrix-group" aria-labelledby="pf-bento-tools">
          <h2 class="mk-skill-matrix-title" id="pf-bento-tools"><i data-lucide="wrench"></i> Tools</h2>
          <ul class="mk-skill-matrix-list">
            <li class="mk-skill-matrix-skill"><span class="mk-skill-matrix-name">Figma</span></li>
            <li class="mk-skill-matrix-skill"><span class="mk-skill-matrix-name">Framer</span></li>
            <li class="mk-skill-matrix-skill"><span class="mk-skill-matrix-name">Maze</span></li>
            <li class="mk-skill-matrix-skill"><span class="mk-skill-matrix-name">HTML &amp; CSS</span></li>
          </ul>
        </section>
        <section class="mk-skill-matrix-group" aria-labelledby="pf-bento-methods">
          <h2 class="mk-skill-matrix-title" id="pf-bento-methods"><i data-lucide="flask-conical"></i> Methods</h2>
          <ul class="mk-skill-matrix-list">
            <li class="mk-skill-matrix-skill"><span class="mk-skill-matrix-name">Usability tests</span></li>
            <li class="mk-skill-matrix-skill"><span class="mk-skill-matrix-name">A/B tests</span></li>
          </ul>
        </section>
      </div>
    </li>
    <li class="pf-tile pf-quote" data-df-entrance="zoom">
      <p class="pf-label">Kind words</p>
      <div class="pf-quotes">
        <figure>
          <blockquote>"Aiko found the three fields our checkout did not need."</blockquote>
          <figcaption>Head of product, Kumo</figcaption>
        </figure>
        <figure>
          <blockquote>"Our drivers stopped calling the office. That was the whole brief."</blockquote>
          <figcaption>Operations lead, Fleetline</figcaption>
        </figure>
        <figure>
          <blockquote>"She tests on Monday, and on Friday the numbers say she was right."</blockquote>
          <figcaption>CEO, Hana Books</figcaption>
        </figure>
      </div>
      <fieldset class="pf-dots" aria-label="Quotes">
        <input type="radio" name="pf-bento-quote" value="0" aria-label="Quote 1 of 3" checked />
        <input type="radio" name="pf-bento-quote" value="1" aria-label="Quote 2 of 3" />
        <input type="radio" name="pf-bento-quote" value="2" aria-label="Quote 3 of 3" />
      </fieldset>
    </li>
    <li class="pf-tile pf-links" data-df-entrance="zoom" data-pf-section="contact">
      <div>
        <p class="pf-label">Elsewhere</p>
        <p style="margin: 0.5rem 0 0; font-weight: 600">Say hi - I answer within a day.</p>
      </div>
      <p class="pf-mail" style="margin: 0">
        <span>aiko@example.com</span>
        <button class="btn" data-variant="ghost" data-size="sm" type="button" data-pf-copy="aiko@example.com"
          ><i data-lucide="copy"></i> <span data-pf-copy-label aria-live="polite">Copy</span></button
        >
      </p>
      <ul>
        <li
          ><a
            class="btn"
            data-variant="outline"
            data-size="sm"
            href="https://dribbble.com/"
            target="_blank"
            rel="noopener"
            ><i data-lucide="palette"></i> Dribbble</a
          ></li
        >
        <li
          ><a class="btn" data-variant="outline" data-size="sm" href="https://read.cv/" target="_blank" rel="noopener"
            ><i data-lucide="file-text"></i> Read.cv</a
          ></li
        >
        <li
          ><a class="btn" data-variant="outline" data-size="sm" href="mailto:aiko@example.com"
            ><i data-lucide="mail"></i> Email</a
          ></li
        >
      </ul>
    </li>
    <li class="pf-tile pf-write" data-df-entrance="zoom" data-pf-section="writing">
      <p class="pf-label">Writing</p>
      <div class="accordion">
        <details class="accordion-item" name="pf-bento-notes" open>
          <summary class="accordion-trigger">
            <span><small>Mar 2026</small>Three fields your checkout does not need</span>
            <svg
              class="accordion-chevron"
              aria-hidden="true"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="m6 9 6 6 6-6" />
            </svg>
          </summary>
          <div class="accordion-content"
            ><p
              >Company name, a second address line and "confirm email" - what happened to orders when Kumo dropped each
              one.</p
            ><p><a href="#/writing/three-fields" data-router-link>Read the note →</a></p></div
          >
        </details>
        <details class="accordion-item" name="pf-bento-notes">
          <summary class="accordion-trigger">
            <span><small>Jan 2026</small>Error messages that say what to do</span>
            <svg
              class="accordion-chevron"
              aria-hidden="true"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="m6 9 6 6 6-6" />
            </svg>
          </summary>
          <div class="accordion-content"
            ><p
              >Twelve real messages from a payments form, rewritten so that each one names the fix and keeps what was
              typed.</p
            ><p><a href="#/writing/error-messages" data-router-link>Read the note →</a></p></div
          >
        </details>
        <details class="accordion-item" name="pf-bento-notes">
          <summary class="accordion-trigger">
            <span><small>Oct 2025</small>Designing for one thumb on a train</span>
            <svg
              class="accordion-chevron"
              aria-hidden="true"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="m6 9 6 6 6-6" />
            </svg>
          </summary>
          <div class="accordion-content"
            ><p
              >Notes from riding the Yamanote line with prototypes: where the buttons go when the other hand holds a
              strap.</p
            ><p><a href="#/writing/one-thumb" data-router-link>Read the note →</a></p></div
          >
        </details>
      </div>
    </li>
    <li class="pf-tile pf-now" data-df-entrance="zoom">
      <p class="pf-label">Now</p>
      <dl>
        <dt><i data-lucide="pen-tool"></i> Designing</dt>
        <dd>Ticket machines for a regional rail line - touch, cash and a queue behind you</dd>
        <dt><i data-lucide="book-open"></i> Reading</dt>
        <dd>The Design of Everyday Things, for the third time</dd>
        <dt><i data-lucide="languages"></i> Learning</dt>
        <dd>Korean - slowly, with a lot of flash cards</dd>
        <dt><i data-lucide="map-pin"></i> Next talk</dt>
        <dd>Forms Day, Amsterdam, 14 May 2027</dd>
      </dl>
    </li>
  </ul>
  <article class="pf-grid pf-case" data-pf-view="work" aria-labelledby="pf-bento-case-title" hidden>
    <div class="pf-tile pf-case-head">
      <a class="pf-back" href="#/work" data-router-link><i data-lucide="arrow-left"></i> Selected work</a>
      <h1 class="pf-title" id="pf-bento-case-title" data-case="title">Kumo checkout</h1>
      <p class="pf-muted pf-case-lede" data-case="summary"
        >A coffee subscription lost a third of its buyers at the address step. Three fields went, one page went, and the
        order button stopped moving.</p
      >
    </div>
    <div class="pf-tile pf-stat pf-case-metric">
      <p class="pf-label">Result</p>
      <div>
        <p class="pf-big" data-case="metric">+18%</p>
        <p style="margin: 0.5rem 0 0" data-case="metricLabel">completed orders in eight weeks</p>
      </div>
    </div>
    <figure class="pf-tile pf-case-cover">
      <img
        data-case-img="0"
        data-w="1600"
        data-h="700"
        src="https://picsum.photos/id/1060/1600/700"
        alt="Coffee dripping through a pour-over filter in a café"
      />
    </figure>
    <dl class="pf-tile pf-case-facts">
      <dt>Client</dt>
      <dd data-case="client">Kumo, a coffee subscription</dd>
      <dt>Role</dt>
      <dd data-case="role">Lead designer</dd>
      <dt>Year</dt>
      <dd data-case="year">2025</dd>
      <dt>Tools</dt>
      <dd data-case="tools">Figma, Maze, A/B tests</dd>
    </dl>
    <section class="pf-tile pf-case-brief" aria-labelledby="pf-bento-brief">
      <h2 class="pf-label" id="pf-bento-brief">The problem</h2>
      <p data-case="brief"
        >Kumo sells coffee by subscription. A third of the people who chose a coffee never finished the order, and most
        of them left on the same page: the address form, asked for before the price was clear.</p
      >
    </section>
    <figure class="pf-tile pf-case-shot">
      <img
        data-case-img="1"
        data-w="700"
        data-h="900"
        src="https://picsum.photos/id/30/700/900"
        alt="A red mug of coffee on a wooden table"
      />
    </figure>
    <section class="pf-tile pf-case-work" aria-labelledby="pf-bento-work">
      <h2 class="pf-label" id="pf-bento-work">What I did</h2>
      <p data-case="work"
        >I watched forty recordings of real checkouts and tested three versions with twelve customers a week. Company
        name, the second address line and confirm email went; the address moved after the price; the order button
        stopped jumping when the postcode was looked up.</p
      >
    </section>
    <section class="pf-tile pf-case-result" aria-labelledby="pf-bento-result">
      <h2 class="pf-label" id="pf-bento-result">What changed</h2>
      <p data-case="result"
        >Completed orders rose by 18 percent in eight weeks, and support emails about wrong addresses fell by half. The
        new form became the pattern for every form in the shop.</p
      >
    </section>
    <a class="pf-tile pf-case-step" href="#/work/hana-onboarding" data-router-link data-case-link="prev"
      ><span class="pf-label"><i data-lucide="arrow-left"></i> Previous case</span
      ><strong data-case-title="prev">Hana onboarding</strong></a
    >
    <a class="pf-tile pf-case-step" href="#/work/fleet-dashboard" data-router-link data-case-link="next"
      ><span class="pf-label">Next case <i data-lucide="arrow-right"></i></span
      ><strong data-case-title="next">Fleet dashboard</strong></a
    >
  </article>
  <article class="pf-grid pf-note" data-pf-view="writing" aria-labelledby="pf-bento-note-title" hidden>
    <div class="pf-tile pf-note-text">
      <a class="pf-back" href="#/writing" data-router-link><i data-lucide="arrow-left"></i> Writing</a>
      <p class="pf-label" data-case="date">March 2026</p>
      <h1 class="pf-title" id="pf-bento-note-title" data-case="title">Three fields your checkout does not need</h1>
      <div class="pf-note-body" data-case-paras="body">
        <p
          >Every field in a checkout is a question, and every question is a chance to leave. When Kumo asked me why
          their buyers gave up, the answer was waiting in the address form: three fields almost nobody needed.</p
        >
      </div>
      <nav class="pf-note-pager" aria-label="More notes">
        <a href="#/writing/one-thumb" data-router-link data-case-link="prev"
          ><small><i data-lucide="arrow-left"></i> Previous</small
          ><span data-case-title="prev">Designing for one thumb on a train</span></a
        >
        <a href="#/writing/error-messages" data-router-link data-case-link="next"
          ><small>Next <i data-lucide="arrow-right"></i></small
          ><span data-case-title="next">Error messages that say what to do</span></a
        >
      </nav>
    </div>
    <nav class="pf-tile pf-note-list" aria-labelledby="pf-bento-notes-title">
      <p class="pf-label" id="pf-bento-notes-title">All notes</p>
      <ul data-case-list>
        <li
          ><a href="#/writing/three-fields" data-router-link aria-current="page"
            ><small>Mar 2026</small>Three fields your checkout does not need</a
          ></li
        >
        <li
          ><a href="#/writing/error-messages" data-router-link
            ><small>Jan 2026</small>Error messages that say what to do</a
          ></li
        >
        <li
          ><a href="#/writing/one-thumb" data-router-link
            ><small>Oct 2025</small>Designing for one thumb on a train</a
          ></li
        >
      </ul>
      <button class="btn" data-variant="outline" type="button" commandfor="pf-bento-hire-dialog" command="show-modal"
        >Work with me</button
      >
    </nav>
  </article>
  <footer class="mk-footer">
    <div class="mk-footer-inner">
      <nav class="mk-footer-nav" aria-label="Footer">
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">Work</h3>
          <ul class="mk-footer-list">
            <li><a href="#/work/kumo-checkout" data-router-link>Kumo checkout</a></li>
            <li><a href="#/work/fleet-dashboard" data-router-link>Fleet dashboard</a></li>
            <li><a href="#/work/hana-onboarding" data-router-link>Hana onboarding</a></li>
          </ul>
        </div>
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">Writing</h3>
          <ul class="mk-footer-list">
            <li><a href="#/writing/three-fields" data-router-link>Three fields your checkout does not need</a></li>
            <li><a href="#/writing/error-messages" data-router-link>Error messages that say what to do</a></li>
            <li><a href="#/writing/one-thumb" data-router-link>Designing for one thumb on a train</a></li>
          </ul>
        </div>
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">Elsewhere</h3>
          <ul class="mk-footer-list">
            <li><a href="https://dribbble.com/" target="_blank" rel="noopener">Dribbble</a></li>
            <li><a href="https://read.cv/" target="_blank" rel="noopener">Read.cv</a></li>
            <li><a href="mailto:aiko@example.com">aiko@example.com</a></li>
          </ul>
        </div>
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">Studio</h3>
          <address>Aiko Tanaka Design<br />Shibuya, Tokyo<br />Freelance from January</address>
        </div>
      </nav>
      <hr class="separator mk-footer-rule" />
      <div class="mk-footer-bottom">
        <a class="mk-footer-brand" href="#/" data-router-link><span class="mk-footer-brand-name">Aiko Tanaka</span></a>
        <div class="mk-footer-meta">
          <p class="mk-footer-copy">© 2026 Aiko Tanaka · Product design, Tokyo</p>
        </div>
      </div>
    </div>
  </footer>
  <dialog class="mk-media-gallery-viewer pf-viewer" id="pf-bento-viewer" aria-label="Selected work">
    <div class="mk-media-gallery-viewer-inner">
      <ul class="mk-media-gallery-track" tabindex="0" aria-label="Case studies - scroll sideways">
        <li
          ><img
            src="https://picsum.photos/id/1060/1400/778"
            alt="Coffee dripping through a pour-over filter in a café"
          /><p
            ><strong>Kumo checkout</strong> · Lead designer, 2025 · +18% completed orders · 1 / 3<br />A coffee
            subscription lost a third of its buyers at the address step. Three fields went, one page went, and the order
            button stopped moving. <a href="#/work/kumo-checkout" data-router-link>Read the case →</a></p
          ></li
        >
        <li
          ><img
            src="https://picsum.photos/id/180/1400/1400"
            alt="A laptop beside an open notebook with wireframe sketches"
          /><p
            ><strong>Fleet dashboard</strong> · Product designer, 2024 · B2B · 2024 · 2 / 3<br />One screen for two
            hundred delivery vans: the late ones first, the fine ones folded away, every number one click from its
            route. <a href="#/work/fleet-dashboard" data-router-link>Read the case →</a></p
          ></li
        >
        <li
          ><img src="https://picsum.photos/id/367/1400/1400" alt="A hand holding an e-reader outdoors" /><p
            ><strong>Hana onboarding</strong> · Product designer, 2023 · App · 2023 · 3 / 3<br />A reading app asked
            eleven questions before the first page. Now it asks one, and learns the rest from what people read.
            <a href="#/work/hana-onboarding" data-router-link>Read the case →</a></p
          ></li
        >
      </ul>
      <div class="pf-viewer-steps">
        <button class="pf-viewer-step" type="button" data-viewer-step="-1" aria-label="Previous case"
          ><i data-lucide="arrow-left"></i
        ></button>
        <p class="mk-media-gallery-hint">Swipe, scroll or use ← → · Esc closes</p>
        <button class="pf-viewer-step" type="button" data-viewer-step="1" aria-label="Next case"
          ><i data-lucide="arrow-right"></i
        ></button>
      </div>
      <form method="dialog"
        ><button class="mk-media-gallery-close" aria-label="Close"><i data-lucide="x"></i></button
      ></form>
    </div>
  </dialog>
  <dialog class="pf-dialog pf-about" id="pf-bento-about" aria-labelledby="pf-bento-about-title">
    <div class="pf-about-grid">
      <img src="https://picsum.photos/id/832/800/1000" alt="Aiko Tanaka reading in a pale blue blouse" />
      <div class="pf-dialog-body">
        <button
          class="btn pf-dialog-x"
          data-variant="ghost"
          data-size="icon"
          type="button"
          commandfor="pf-bento-about"
          command="close"
          aria-label="Close"
          ><i data-lucide="x"></i
        ></button>
        <p class="pf-label">About</p>
        <h2 id="pf-bento-about-title">Hi, I'm Aiko.</h2>
        <p
          >I design the parts of a product where people hand over money or their time: checkouts, sign-ups and the forms
          in between. I test early, write the copy myself and hand over components, not pictures.</p
        >
        <ol aria-label="Experience">
          <li><span>2025 - now</span>Freelance, Tokyo</li>
          <li><span>2021 - 2025</span>Lead designer, Kumo, Amsterdam</li>
          <li><span>2019 - 2021</span>Product designer, Hana Books, Tokyo</li>
          <li><span>2017 - 2019</span>UX designer, Fleetline, Osaka</li>
        </ol>
        <p class="pf-muted">Japanese, English, a little Dutch and Korean.</p>
        <div class="pf-actions">
          <button class="btn" type="button" commandfor="pf-bento-hire-dialog" command="show-modal">Hire me</button>
        </div>
      </div>
    </div>
  </dialog>
  <dialog class="pf-dialog pf-hire" id="pf-bento-hire-dialog" aria-labelledby="pf-bento-hire-title">
    <form class="pf-dialog-body" data-pf-hire>
      <button
        class="btn pf-dialog-x"
        data-variant="ghost"
        data-size="icon"
        type="button"
        commandfor="pf-bento-hire-dialog"
        command="close"
        aria-label="Close"
        ><i data-lucide="x"></i
      ></button>
      <h2 id="pf-bento-hire-title">Start a project</h2>
      <p class="pf-muted" style="margin-top: -0.5rem">Freelance from January - two slots are left this quarter.</p>
      <div class="pf-pair">
        <div class="pf-row">
          <label class="label" for="pf-bento-name">Name</label>
          <input class="input" id="pf-bento-name" name="name" autocomplete="name" required />
        </div>
        <div class="pf-row">
          <label class="label" for="pf-bento-mail">Email</label>
          <input class="input" id="pf-bento-mail" name="email" type="email" autocomplete="email" required />
        </div>
      </div>
      <div class="pf-pair">
        <div class="pf-row">
          <label class="label" for="pf-bento-kind">Project</label>
          <select class="select" id="pf-bento-kind" name="kind">
            <option>Checkout &amp; payments</option>
            <option>Onboarding</option>
            <option>A design system</option>
            <option>Something else</option>
          </select>
        </div>
        <div class="pf-row">
          <label class="label" for="pf-bento-start">Start</label>
          <select class="select" id="pf-bento-start" name="start">
            <option>January 2027</option>
            <option>February 2027</option>
            <option>March 2027</option>
            <option>Later</option>
          </select>
        </div>
      </div>
      <div class="pf-row">
        <label class="label" for="pf-bento-text">What should change?</label>
        <textarea class="textarea" id="pf-bento-text" name="message" rows="4" required></textarea>
      </div>
      <div class="pf-actions">
        <button class="btn" data-variant="ghost" type="button" commandfor="pf-bento-hire-dialog" command="close"
          >Cancel</button
        >
        <button class="btn" type="submit"><i data-lucide="send"></i> Send</button>
      </div>
    </form>
    <div class="pf-dialog-body pf-hire-done" tabindex="-1">
      <i data-lucide="check"></i>
      <h2>Thank you<span data-pf-hire-name></span>!</h2>
      <p>I answer within a day, Tokyo time - so it may be overnight for you.</p>
      <button class="btn" type="button" commandfor="pf-bento-hire-dialog" command="close">Close</button>
    </div>
  </dialog>
  <!-- the cases and notes the routes name, in order -->
  <script type="application/json" id="pf-bento-pages">
    {
      "work": {
        "kumo-checkout": {
          "title": "Kumo checkout",
          "client": "Kumo, a coffee subscription",
          "role": "Lead designer",
          "year": "2025",
          "tools": "Figma, Maze, A/B tests",
          "metric": "+18%",
          "metricLabel": "completed orders in eight weeks",
          "summary": "A coffee subscription lost a third of its buyers at the address step. Three fields went, one page went, and the order button stopped moving.",
          "brief": "Kumo sells coffee by subscription. A third of the people who chose a coffee never finished the order, and most of them left on the same page: the address form, asked for before the price was clear.",
          "work": "I watched forty recordings of real checkouts and tested three versions with twelve customers a week. Company name, the second address line and confirm email went; the address moved after the price; the order button stopped jumping when the postcode was looked up.",
          "result": "Completed orders rose by 18 percent in eight weeks, and support emails about wrong addresses fell by half. The new form became the pattern for every form in the shop.",
          "images": [
            [1060, "Coffee dripping through a pour-over filter in a café"],
            [30, "A red mug of coffee on a wooden table"]
          ]
        },
        "fleet-dashboard": {
          "title": "Fleet dashboard",
          "client": "Fleetline, a delivery company",
          "role": "Product designer",
          "year": "2024",
          "tools": "Figma, HTML and CSS prototypes",
          "metric": "-60%",
          "metricLabel": "calls from drivers to the office",
          "summary": "One screen for two hundred delivery vans: the late ones first, the fine ones folded away, every number one click from its route.",
          "brief": "Fleetline's dispatchers watched two hundred vans on four screens and still learned about late deliveries from angry phone calls. They needed to see trouble before the drivers called.",
          "work": "We sat with the dispatchers for two weeks and wrote down every question they asked a driver. The dashboard answers those questions in order: late vans at the top, the reason beside each one, and the vans that are fine folded into a single line.",
          "result": "Calls from drivers to the office fell by 60 percent. The dispatchers now plan the next day from the same screen, and the four extra monitors went to the warehouse.",
          "images": [
            [180, "A laptop beside an open notebook with wireframe sketches"],
            [183, "An old camper van parked on a street"]
          ]
        },
        "hana-onboarding": {
          "title": "Hana onboarding",
          "client": "Hana Books, a reading app",
          "role": "Product designer",
          "year": "2023",
          "tools": "Figma, Maze, interviews",
          "metric": "11 → 1",
          "metricLabel": "questions before the first page",
          "summary": "A reading app asked eleven questions before the first page. Now it asks one, and learns the rest from what people read.",
          "brief": "Hana asked new readers eleven questions about their taste before showing a single book. Half of them gave up on the way, and the other half answered at random to get through.",
          "work": "We replaced the quiz with one question - what did you last enjoy reading? - and a first chapter chosen from the answer. Every later recommendation comes from what people actually finish, and the old questions moved to a settings page nobody missed.",
          "result": "Twice as many new readers reached their first page, and they read 40 percent more in the first month. The single question is now the app's best-known screen.",
          "images": [
            [367, "A hand holding an e-reader outdoors"],
            [1073, "Open books laid out page by page"]
          ]
        }
      },
      "writing": {
        "three-fields": {
          "title": "Three fields your checkout does not need",
          "date": "March 2026",
          "body": [
            "Every field in a checkout is a question, and every question is a chance to leave. When Kumo asked me why their buyers gave up, the answer was waiting in the address form: three fields almost nobody needed.",
            "Company name was filled in by fewer than two percent of buyers - and half of them typed their own name into it. We moved it behind a link for the people who order for an office.",
            "The second address line confused more people than it helped; they put the street number there, or the postcode, or nothing. One longer line that accepts everything works for every address we tested.",
            "Confirm email caught almost no typos and annoyed everyone. A short check after the order - is this your address? - catches more mistakes and costs nobody a sale. Together, the three changes were worth 18 percent more completed orders."
          ]
        },
        "error-messages": {
          "title": "Error messages that say what to do",
          "date": "January 2026",
          "body": [
            "An error message has one job: to get the person to the next step. Most of the twelve messages I collected from one payments form failed at it - they named what went wrong in the system's words and left the fix to the reader.",
            "Invalid input became: use the long number on the front of your card. Transaction declined became: your bank said no - try another card, or call the number on the back of yours. Each rewrite names the fix first.",
            "Two rules did most of the work. Never clear what someone typed, even when it is wrong - they want to correct it, not type it again. And show the message where the problem is, not at the top of a long form.",
            "The rewritten form had a third fewer abandoned payments. Nobody praises an error message, but people notice when one helps them finish."
          ]
        },
        "one-thumb": {
          "title": "Designing for one thumb on a train",
          "date": "October 2025",
          "body": [
            "For two weeks I tested prototypes on the Yamanote line at rush hour - one hand on a strap, one thumb on the phone, the train swaying every few seconds. It is the most honest usability lab I know.",
            "Buttons at the top of the screen are out of reach; buttons at the very bottom get pressed by accident when the train brakes. The safe band is the lower middle, a little to the side of the hand that holds the phone.",
            "Precise taps fail too. A train lurches at the wrong moment, so every action we kept had a large target and an undo, and nothing important happened on a single tap without a way back.",
            "What works on a train works everywhere: in a kitchen, carrying a child, walking in the rain. Designing for the worst grip turned out to be designing for most of the day."
          ]
        }
      }
    }
  </script>
</div>
<script type="module">
  // df$ comes with the component bundle - a full-screen page loads it after this module
  addEventListener('DOMContentLoaded', () => {
    // light or dark: the switch writes the page's dark class (every look has both palettes); it follows the class when
    // something else sets it (the docs card follows the site's mode)
    const siteMode = df$('#pf-bento [data-site-mode]');
    const syncMode = () => siteMode.prop('checked', document.documentElement.classList.contains('dark'));
    siteMode.on('change', () => {
      document.documentElement.classList.toggle('dark', siteMode.prop('checked'));
      document.dispatchEvent(new CustomEvent('defuss-theme-change'));
    });
    new MutationObserver(syncMode).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    syncMode();

    // the time in Tokyo, and what that means for an answer
    const clock = new Intl.DateTimeFormat('en-GB', { timeZone: 'Asia/Tokyo', hour: '2-digit', minute: '2-digit' });
    const hourIn = new Intl.DateTimeFormat('en-GB', { timeZone: 'Asia/Tokyo', hour: 'numeric', hourCycle: 'h23' });
    const tick = () => {
      const now = new Date();
      const hour = Number(hourIn.format(now));
      df$('#pf-bento [data-pf-clock]').text(clock.format(now)).attr('datetime', now.toISOString());
      const note =
        hour >= 9 && hour < 18
          ? 'At her desk - answers today'
          : hour >= 18 && hour < 23
            ? 'Evening in Tokyo - answers tomorrow'
            : 'Asleep in Tokyo - answers in the morning';
      df$('#pf-bento [data-pf-clock-note]').text(note);
    };
    tick();
    setInterval(tick, 30_000);

    // the case viewer: the button's command opens it, the click scrolls it to that case
    const track = df$('#pf-bento-viewer .mk-media-gallery-track');
    const still = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
    df$('#pf-bento [data-slide]').on('click', (event) => {
      const n = Number(event.currentTarget.dataset.slide);
      setTimeout(() => track.children().get(n)?.scrollIntoView({ block: 'nearest', inline: 'start' }));
    });
    df$('#pf-bento-viewer [data-viewer-step]').on('click', (event) => {
      const el = track.get(0);
      el.scrollBy({
        left: Number(event.currentTarget.dataset.viewerStep) * el.clientWidth,
        behavior: still() ? 'instant' : 'smooth',
      });
    });

    // copy the address; the label says whether it worked
    df$('#pf-bento [data-pf-copy]').on('click', async (event) => {
      const button = event.currentTarget;
      const label = df$(button).find('[data-pf-copy-label]');
      try {
        await navigator.clipboard.writeText(button.dataset.pfCopy);
        label.text('Copied');
      } catch {
        getSelection()?.selectAllChildren(button.previousElementSibling);
        label.text('Selected - press ⌘C');
      }
      setTimeout(() => label.text('Copy'), 2500);
    });

    // Hire me: sending shows the thank-you (a demo - nothing leaves the page); closing resets it
    const hire = df$('#pf-bento-hire-dialog');
    df$('#pf-bento [data-pf-hire]').on('submit', (event) => {
      event.preventDefault();
      const name = String(new FormData(event.currentTarget).get('name') ?? '')
        .trim()
        .split(/\s+/)[0];
      df$('#pf-bento [data-pf-hire-name]').text(name ? ', ' + name : '');
      hire.attr('data-sent', '');
      hire.find('.pf-hire-done').get(0).focus();
    });
    hire.on('close', () => {
      hire.attr('data-sent', null);
      hire.find('form').get(0).reset();
    });
  });
</script>
<script type="module">
  // routing: defuss-dom-router owns the address - the bento, its tiles, a page per case and per note
  import { createRouter } from 'https://cdn.jsdelivr.net/npm/defuss-dom-router@0.1.1/dist/index.js';

  addEventListener('DOMContentLoaded', async () => {
    const ROOT = '#pf-bento';
    const site = df$(ROOT).get(0);
    // each kind of page is a view filled from the data block, at #/<kind>/<slug>
    const PAGES = JSON.parse(df$('#pf-bento-pages').text());
    const SECTIONS = ['work', 'writing', 'contact'];
    const routes = [
      { id: 'home', path: '/' },
      { id: 'page', path: '/:kind/:slug' },
      { id: 'section', path: '/:section' },
      { id: 'missing', path: '*' },
    ];
    // a page from the data block: its texts, its paragraphs, its pictures, the pages before and after it
    const fill = (kind, slug) => {
      const items = PAGES[kind];
      const order = Object.keys(items);
      const item = items[slug];
      const at = order.indexOf(slug);
      const near = { prev: order[(at + order.length - 1) % order.length], next: order[(at + 1) % order.length] };
      const view = df$(ROOT + ' [data-pf-view="' + kind + '"]');
      view.find('[data-case]').each((_i, el) => {
        df$(el).text(item[el.dataset.case]);
      });
      view.find('[data-case-paras]').each((_i, box) => {
        const body = df$(box).html('');
        for (const text of item[box.dataset.caseParas]) body.append(df$('<p></p>').text(text));
      });
      view.find('[data-case-img]').each((_i, img) => {
        const [id, alt] = item.images[Number(img.dataset.caseImg)];
        df$(img)
          .attr('src', 'https://picsum.photos/id/' + id + '/' + img.dataset.w + '/' + img.dataset.h)
          .attr('alt', alt);
      });
      view.find('[data-case-list] a').each((_i, link) => {
        df$(link).attr('aria-current', link.getAttribute('href') === '#/' + kind + '/' + slug ? 'page' : null);
      });
      for (const [rel, to] of Object.entries(near)) {
        view.find('[data-case-link="' + rel + '"]').attr('href', '#/' + kind + '/' + to);
        view.find('[data-case-title="' + rel + '"]').text(items[to].title);
      }
    };
    const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
    let shown = null;
    let last = null;
    // one view shown (a dialog that led there closes), the header marks where the reader is; a section route scrolls
    // to its tile, a new page opens at its top
    const show = (to) => {
      const { kind, slug, section } = to.params;
      const page = to.routeId === 'page' && Object.hasOwn(PAGES, kind) && Object.hasOwn(PAGES[kind], slug);
      const at = to.routeId === 'section' && SECTIONS.includes(section) ? section : null;
      const name = page ? kind : 'home';
      if (page) fill(kind, slug);
      df$(ROOT + ' dialog[open]').each((_i, dialog) => {
        dialog.close();
      });
      df$(ROOT + ' [data-pf-view]').each((_i, view) => {
        view.hidden = view.dataset.pfView !== name;
      });
      const here = page ? '#/' + kind : at ? '#/' + at : null;
      df$(ROOT + ' .mk-header-nav a').each((_i, link) => {
        df$(link).attr('aria-current', link.getAttribute('href') === here ? 'page' : null);
      });
      // the page opens where its address says - at once, once its pictures have laid it out; a click glides there
      const target = at ? df$(ROOT + ' [data-pf-section="' + at + '"]').get(0) : shown ? site : null;
      const behavior = shown === name && !still ? 'smooth' : 'instant';
      const go = () => target?.scrollIntoView({ behavior, block: 'start' });
      if (!shown && document.readyState !== 'complete') addEventListener('load', go, { once: true });
      else go();
      shown = name;
      last = to;
    };
    // a link to where the reader already is leaves the address as it is - it still scrolls there
    df$(site).on('click', (event) => {
      const link = event.target.closest('a[data-router-link]');
      if (link && last && link.getAttribute('href') === (location.hash || '#/')) show(last);
    });
    // the page scrolls itself (to a tile) - the router's own scroll would stop that glide
    const router = createRouter({
      mode: 'hash',
      scroll: 'manual',
      routes,
      prepare: ({ to }) => ({ commit: () => show(to) }),
    });
    router.attachLinks(site);
    if ((await router.start()).status === 'rejected') {
      // no address the router may own - a docs preview is an about:srcdoc frame: the same routes match its hash
      const preview = createRouter({ mode: 'hash', routes, baseUrl: 'https://preview.invalid/' });
      const follow = () => show(preview.resolve(location.hash.startsWith('#/') ? location.hash : '#/'));
      addEventListener('hashchange', follow);
      follow();
    }
  });
</script>
Built from Text Rotate, Availability, Indicator, Portfolio Grid (bento), Skill Matrix (tags), Progress, Accordion and two Dialogs with Input, Select and Textarea. The cases open in the Media Gallery's viewer. The tile grid is the page's own CSS - named areas that a container query rearranges. corner-squircle and pattern-grid are Shapes utilities; Motion's stagger zooms the tiles in.
Comments, ideas or improvements? Edit this page's source on GitHub