Skip to content

curious. design. build. delight.

Scroll to discover

  1. A design system built with agents, for agents

    Design intent becomes a contract. Every experiment makes it stronger.

  2. Privacy before image creation

    One privacy boundary, drawn once as a founding designer, then carried through a logo, a website, an operator app and a film of 81 seconds.

  3. Optimising your design system with variables

    Primitive and semantic variables as the foundation of a system a team can keep maintaining.

  4. Boosting the e-learning experience

    A search-first learning experience that finds the lesson a frontend developer needs.

  1. Tabs that look like toggles
  2. Body text colour in Dark mode
  3. UI Anatomy: Card state styles with accessibility in mind
  4. CSS Grid with Galaxy layout: now available in Figma
More articles

playground.

Product-ready design & code.

  • 63 components
  • 33 patterns
  • 545 tokens

AccordionComponent

CardComponent

Scroll StagePattern

SidebarComponent

Table of ContentsComponent

CarouselPattern

ComposerPattern

Search DialogPattern

Selection ListPattern

LightboxPattern

SortPattern

WorksheetPattern

Product designer & builder

Hi, I’m nana. A Sydney-based product designer who builds design systems humans, and agents, can read.

I started in fine art, co-founded the learning platform Frontendly.io, and now build Orbition, where every design rule is written down for humans and AI agents to follow.

articles and notes published
67
trial-to-paid lift from design at Frontendly.io
35%
hackathons built in
3

Experience

Orbition's six architecture layers, from Base to Patterns, stacked in pinkA design system built with agents, for agentsI designed and built Orbition to connect design intent, working interfaces, and agent-readable contracts. Then I used experiments to make the system more precise.Read moreNowProduct Designer & Co-founderOrbitionA design system humans and agents can readAccepted into Claude Startups by Anthropic · Oct 2026English SEQRYPTON website prototype with the headline Experience security with self-protecting information and a Contact actionDesigning SEQRYPTON with AI, from brand to productHow I connected project context, client conversations and AI-assisted production across a website, a product experience, and the story prepared for CES 2027.Read more2026Founding DesignerSEQRYPTONFrontendly course content panel in light and dark themes, with lessons grouped by CSS selector topicBoosting the e-learning experience for Frontendly.ioA search-first learning experience that helps frontend developers find the lesson they need, from user research and wireframes to the design system.Read more2023 to 2026Product Designer & Co-founderFrontendly.ioLifted trial-to-paid conversion by 35%. Design system extended to CSS-selectors.dev.Kim Eull's website home page: a loose grid of his paintings, objects and installations above the line Welcome to Kim Eull's studioCase study: Artist Kim Eull’s portfolio websiteA portfolio for the Korean artist Kim Eull, whose work crosses painting, drawing, objects and installation, so I replaced genre menus with tags and filters over one gallery grid.Read more2017 to 2023Web & Visual DesignerWonderland, freelanceHealthcare, security, and arts clients, plus print for Toy Story 4.
2017Web Developer InternSquiz
2014 to 2016Visual & Brand DesignerWorld Culture Open, then Zentillion

Learning

Oct 2026Builder, Codex & Astra Builder DayOpenAI, Sydney
Four women from OpenAI on the Women Who Code(X) panel in Sydney, the event title on the screen behind themWomen Who Code(X) With CodexA panel of women at OpenAI on careers, Codex and generative AI, then 30 minutes of Codex Sites turning my long-postponed nanaOS landing page into something real.Read moreAug 2026Women Who Code(X)OpenAI, SydneyBuilt with Opus 4.7, a global virtual Claude Code hackathon, April 21 to 28Building nanaOS With ClaudeA one-week Claude Code sprint by Anthropic and Cerebral Valley, where I built nanaOS: tokens, rules and components that humans and AI agents can both read.Read moreApr 2026Hackathon builder, Built with Opus 4.7Anthropic × Cerebral ValleyAnthropic certificate of completion for Claude Code in Action, issued to Nana Chon on 17 February 2026Claude Code in ActionAnthropic's course on building with Claude Code, completed on 17 Feb 2026. The certificate is verifiable on Skilljar.Show credentialFeb 2026Claude Code in ActionAnthropicAnthropic certificate of completion for AI Fluency: Framework & Foundations, issued to Nana ChonAI Fluency: Framework & FoundationsAnthropic's course on the AI Fluency framework for working with AI, completed on 17 Feb 2026. The certificate is verifiable on Skilljar.Show credentialFeb 2026AI Fluency: Framework & FoundationsAnthropic

Little things I love

A white bag of seasonal espresso blend coffee beans beside a sprig of yellow wattle.Flat white, always a blendMy favourite beans in Sydney are a seasonal espresso blend. Juicy and bright, and at their best poured into a flat white.A drawing by Chloe: nana in glasses and a crown under four red hearts, with a bee and a flower, and both names written across the top.My daughter’s drawingsGame of Thrones

LinkedInMediumCodePenThreadsGitHub@nanacodesign