Sakuga 2.0 · an open-source design system · MIT licensed
Sakuga is the design system AniCanon™ is built with: a place where people watch anime episodes and shorts, read manga and make their own. There, the artwork is the product. Sakuga’s tokens and components are opening up for anyone who builds around art.
Anime is made to be looked at. An interface around it should frame the picture and then step back. Sakuga keeps the chrome to type, a few controls and one small accent, so the first thing you see is the art.
sakuga noun
In the studio, the work of drawing every frame. Among fans, the moments when the drawing itself becomes the show. This design system is named for them, and built to give them room.
Every screen is made the way an anime cut is: drawn, cleaned up, painted, then composited, the art first and Sakuga’s components laid over it as cels. The film takes one player from its first pencil line to the finished screen, then pans across the rest of the components.
Each one comes from how anime is made and watched, with the live component that keeps it.
01Frames
Artists draw an episode, a short and a manga page to different shapes, and Sakuga never crops one to fit another.
Components · MediaCard · EditorShell
02Accent
The art brings all the colour a screen needs. The interface keeps one, camellia, and saves it for state.
Tokens · accent, text-accent
03Surfaces
Like a cel under the camera, each surface is one flat colour, and any depth or light on screen comes from the drawing.
Token · bg-scrim-art
The Legacy of BloodSeason 1 · Episode 1 · 11:36
04Words
People come to watch an episode or read a page, so the interface uses those words and says plainly what each button does.
| Say | Instead of |
|---|---|
| Episode | Clip |
| Page | Artifact |
| 11:36 | 696 seconds |
| Premieres Friday · 21:00 | Releases 2026-10-23T21:00 |
| Play S1 · E1 | Start playback |
05Phones
An app should feel at home on the phone it runs on. The tokens and components stay the same; only the chrome changes.
Components · TabBar · IconButton · Sheet
iOS · Liquid Glass
Android · Material You
06Motion
Sakuga is named for drawing that moves, and the interface leaves the moving to it, answering a touch and then settling.
Tokens · motion-*, ease-*
ease-enter, leaves on ease-exit.An anime colour designer keeps a chart for every character, with a labelled box for each part and a separate set of colours for each kind of light. Sakuga’s tokens work the same way.
Light and dark work like two lighting setups, with each colour job picking a different paint in each.
A neutral ground, ink, and one camellia accent.
Funnel Display for titles, Funnel Sans for everything else.
A 4 px step, from an icon’s gap to the space between sections.
Five durations, three easings, and a fade for reduced motion.
An outline set on a 24 px grid with a 2 px stroke.
Corners follow what they hold, and anything you tap is at least 44 px.
The core holds what any product built around art needs: actions, forms, navigation, content, feedback, media and containers. AniCanon™’s Kit is built from the core for the studio’s own tools, such as Maki, the cut sheets and the story map.
Everything is MIT licensed: the tokens, the components, the icons, the Kit and these docs. Use it, change it and ship it, in open or closed products. The public repository opens soon.
To contribute, sign off each commit under the Developer Certificate of Origin with git commit -s; there’s no licence agreement to sign. Everyone taking part follows the Contributor Covenant 3.0, our code of conduct.
Sakuga will ship as one package, @anicanon/sakuga, with five entry points: the tokens, the fonts, the core components, the icons and AniCanon™’s Kit. You import only what you use. The web comes first, then Figma, iOS and Android.
Every component is live in the browser today. The code follows, web first.