Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Writing

ProposalCard

ProposalCard is one event, change or link found in writing, waiting for the person.

@anicanon/sakuga/anicanonkitv1.0Used onWebFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

ProposalCard is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

ProposalCard is made for the web, and isn’t part of Sakuga for Android yet.

Use it for
One event, change or link found in writing, waiting for the person beside the words it came from: stated, inferred, or a conflict with its Ask Maki.
Not for
  • Something Maki proposes inside the chatMakiCard
  • A change shown in place in the wordsRevision
  • A check pinned to a cut on a sheetSlip

Guidelines

  • stated: said in the text; accepted by default. inferred: a reading between the lines; dashed and never accepted for you. conflict: breaks the story; carries its action (Ask Maki).
  • accepted drives the toggle.
  • onAccept(accepted) makes the toggle work; it is called with the new state.
ProposalCardExample.jsxReact
import { ProposalCard } from '@anicanon/sakuga/anicanonkit';

export default function ProposalCardExample() {
  return (
    <>
      <ProposalCard
        title="Toddy wires a second watch"
        note="New event · stated"
        accepted
        visual={{ kind: 'event', type: 'clue' }}
      />
      <ProposalCard
        kind="inferred"
        title="Lisa · + Flaw"
        note="From “the wind answers too hard”"
        accepted={false}
      />
    </>
  );
}

PropsProposalCardProps

titlerequired
string
note
string
kind
'stated' | 'inferred' | 'conflict'Default 'stated'
accepted
boolean
visual
Visual
onAccept
(accepted: boolean) => void
The Accept toggle: called with the new state.
action
ReactNode
The action (as slot="action").
children
ReactNode

Types

Visual is one of 9 names.

ProposalCardExample.swiftiOS · coming soon
ProposalCardExample.ktAndroid · coming soon

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

proposal-bgProposalCard: a stated proposal.
bg-surfaceneutral-0#ffffff
bg-surfaceneutral-900#111117
proposal-borderProposalCard: outline.
border-hairlineshade-a08rgba(11,10,16,0.08)
border-hairlinewhite-a06rgba(255,255,255,0.06)
proposal-inferred-borderProposalCard: dashed outline of an inferred proposal.
border-placeholdershade-a24rgba(11,10,16,0.24)
border-placeholderwhite-a22rgba(255,255,255,0.22)
proposal-conflict-borderProposalCard: a conflict.
accentcamellia-600#c2335f
accentcamellia-400#f4779f
proposal-titleProposalCard: title.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
proposal-noteProposalCard: note.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7

Space and shape

proposal-gap
gap-xs
4px
proposal-padding-y
inset-sm
8px
proposal-padding-x
inset-sm
8px
proposal-radius
radius-sm
8px
proposal-inset-ring-width
line-hairline
1px
proposal-inferred-outline-width
line-strong
2px
proposal-inferred-outline-offset
its own value
calc(-1 * 2px)
proposal-conflict-inset-ring-width
line-strong
2px
proposal-head-gap
gap-md
8px
proposal-head-entity-visual-slot-width
its own value
16px
proposal-head-entity-visual-avatar-size
its own value
20px

Type

proposal-head-b-font
text-small-strong
600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
proposal-note-font
text-small
500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

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
Read as text: the title, "conflict" on a conflict, the note and "Inferred" on an inferred find, with the picture hidden; the action slot takes focus. With accepted set, Tab reaches the "Accept" toggle button, "pressed" when accepted, which runs onAccept.
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.