Theme
Sound
Jump to a component
AniCanonKit · Characters
LookPlate
One look as a 2:3 plate on white, with its occasion. States: ready, wearing, showing, review, new, drawing, add. Built only from core components and tokens; it lives in AniCanonKit, not the core.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Coming soon
LookPlate for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.
Android
Coming soon
LookPlate for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.
- Use it for
- One look as a 2:3 plate on white with its occasion, in each of its states: ready, wearing, drawing, waiting for review, or the plate that adds one.
- Not for
- Which occasions each character has a look forCoverageTable
- A plain picture in a frameThumb
- The character as a wholeCharacterCard
- Choosing who wears a lookCastAvatar
import { LookPlate } from '@anicanon/sakuga/anicanonkit';
export default function LookPlateExample() {
return (
<>
<LookPlate label="casual" occasion="Everyday" state="wearing" />
<LookPlate label="Plaid" occasion="Everyday" state="drawing" />
<LookPlate label="Uniform" occasion="Uniform" state="review" />
<LookPlate label="New look" occasion="Any occasion" state="add" />
</>
);
}PropsLookPlateProps
labelrequiredstringoccasionstringimagestringstate'ready' | 'wearing' | 'showing' | 'review' | 'new' | 'drawing' | 'add'hrefstringWhere it leads; without it, a button that runs onClick.
onClickMouseEventHandlerclassNamestringEach token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.
Colour
look-plate-bgKit LookPlate: white behind portraits and sheets, both themes.neutral-0#ffffffneutral-0#fffffflook-plate-borderKit LookPlate: edge.border-hairlineshade-a08rgba(11,10,16,0.08)border-hairlinewhite-a06rgba(255,255,255,0.06)look-plate-currentKit LookPlate: the look shown or worn.accentcamellia-600#c2335faccentcamellia-400#f4779flook-plate-add-borderKit LookPlate: add tile edge.border-placeholdershade-a24rgba(11,10,16,0.24)border-placeholderwhite-a22rgba(255,255,255,0.22)look-plate-tag-soft-bgKit LookPlate: the soft tag (Review). The Light accent tint in both themes, because the plate is white in both.camellia-600-a10rgba(194,51,95,0.1)camellia-600-a10rgba(194,51,95,0.1)look-plate-tag-soft-fgKit LookPlate: the soft tag's words. The Light accent text in both themes, on the white plate.camellia-700#b42354camellia-700#b42354Space and shape
look-plate-gapgap-sm6px
look-plate-frame-aspect-ratioratio-portrait2/3
look-plate-frame-radiusradius-md12px
look-plate-frame-inset-ring-widthline-hairline1px
look-plate-frame-img-sheet-opacityopacity-disabled0.35
look-plate-frame-current-ring-widthline-strong2px
look-plate-frame-hover-inset-ring-widthline-hairline1px
look-plate-frame-hover-outer-ring-widthring-outercalc(2px + 2px)
look-plate-frame-current-hover-ring-widthline-strong2px
look-plate-small-margin-topits own value
calc(-1 * 4px)
look-plate-tag-insetinset-xs4px
look-plate-tag-heightits own value
20px
look-plate-tag-padding-xinset-sm8px
look-plate-tag-radiusradius-full9999px
look-plate-add-frame-inset-ring-widthline-strong2px
look-plate-frame-focus-outline-offsetfocus-ring-offset3px
look-plate-add-icon-sizeicon-size-lg24px
look-plate-drawing-loader-sizeicon-size-lg24px
look-plate-frame-active-scalescale-press.97
look-plate-forced-edge-widthline-hairline1px
look-plate-forced-current-widthline-strong2px
Type
look-plate-font-familyfont-sansFunnel Sans
look-plate-b-fonttext-caption-strong600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
look-plate-small-fonttext-small500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
look-plate-tag-fonttext-micro700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
Motion
look-plate-frame-durationmotion-fast160ms
look-plate-frame-easingease-standardcubic-bezier(0.2, 0, 0, 1)
look-plate-frame-img-develop-animationmotion-developsk-develop 560ms cubic-bezier(0, 0, 0, 1)
look-plate-frame-active-durationmotion-instant100ms
Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.
- Result
- No issues found, in light or in dark.
- By design
- A link with
href, else a button that runsonClick(never a link to #), that Tab reaches and Enter follows, named bylabeland described by its tag (Review, New), itsoccasionand "Drawing" while it draws; Wearing and Showing plates are also announced as "current". - Not tested
- The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.