Jump to a component
AniCanonKit · Maki
MakiCard
MakiCard is something Maki proposes or reports inside a turn: an issue, a story edit, a section to add, a reason to keep.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Coming soon
MakiCard 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
MakiCard 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
- Something Maki proposes or reports inside a turn: an issue, a story edit, a section to add, with what was checked and Accept as the primary.
- Not for
- Maki's words around itMakiTurn
- Something found in writing, beside the words it came fromProposalCard
- A proposed change shown in place in the wordsRevision
- A correction pinned to work on a sheetSlip
Guidelines
- Eyebrow says what kind ("Maki · Story edit");
badgemarks an issue's severity. checkstates what was verified ("The story stays consistent with this edit"). Actions go inslot="actions"; Accept is the primary.- Maki proposes; only the person's Accept writes.
mutedfor a card already decided: its pictures and icons fade, and its words drop only to the faintest text that reads.
import { Button } from '@anicanon/sakuga/ui';
import { MakiCard } from '@anicanon/sakuga/anicanonkit';
export default function MakiCardExample() {
return (
<MakiCard
eyebrow="Maki · Story edit"
title="Move it earlier in the story"
check="The story stays consistent with this edit"
>
<span slot="actions">
<Button variant="ghost" size="sm">
Reject
</Button>
<Button variant="primary" size="sm">
Accept
</Button>
</span>
</MakiCard>
);
}PropsMakiCardProps
eyebrowstringtitlestringbadge{ label: string; variant?: 'new' | 'alert'; icon?: IconName; }checkstringmutedbooleanactionsReactNodechildrenReactNodeclassNamestringAn IconName is any of the names Icon lists.
Each 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
maki-card-bgMakiCard: surface.bg-canvasneutral-50#f6f6f8bg-canvasneutral-950#07070amaki-card-borderMakiCard: outline.border-dividershade-a12rgba(11,10,16,0.12)border-dividerwhite-a12rgba(255,255,255,0.12)maki-card-eyebrowMakiCard: eyebrow.text-mutedneutral-600#5c5b67text-mutedneutral-400#a3a3a7maki-check-fgMakiCard: the check line.text-secondaryneutral-800#2e2d36text-secondaryneutral-200#dcdcdemaki-check-iconMakiCard: the check mark.text-accentcamellia-700#b42354text-accentcamellia-400#f4779fSpace and shape
maki-card-gapgap-mdmaki-card-paddinginset-mdmaki-card-radiusradius-mdmaki-card-inset-ring-widthline-hairlinemaki-card-muted-opacityopacity-mutedmaki-card-title-gapgap-mdmaki-card-check-gapgap-smmaki-card-actions-gapgap-mdType
maki-card-small-fonttext-eyebrowmaki-card-small-letter-spacingtracking-capsmaki-card-title-b-fonttext-labelmaki-card-check-fonttext-small-strongChecked 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
- Not focusable itself; "Already answered" when
muted, then the eyebrow, badge, title, body and check read as text in order, the check's icon is hidden, and the actions take focus. - 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.