Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · AniCanon™

FragmentSoul

FragmentSoul is the Fragments currency mark: a hitodama spirit-flame in flat cel layers with a deep violet ink line.

@anicanon/sakuga/anicanonkitv1.0Used onWeb · iOS · AndroidFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

FragmentSoul 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

FragmentSoul 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
The mark every fragment amount carries: bare beside a balance figure, or seated in a medallion on its tinted disc.
Not for

Guidelines

  • Its colours are fixed artwork (spirit violet, magenta, pink, a hot core). Never recolour, outline or put it on a gradient.
  • Bare, it sits beside a balance figure. In a medallion, seat it on a disc tinted with fragments-rim.
  • The balance card is the soul-vault: fragments-vault-bg, a fragments-rim edge, a flat dot-screentone watermark, a faint large flame bleeding off one corner, and the pink fragments-eyebrow. No gradient washes.
  • dim shows a held or dormant balance.
FragmentSoulExample.jsxReact
import { FragmentSoul } from '@anicanon/sakuga/anicanonkit';

export default function FragmentSoulExample() {
  return (
    <>
      <FragmentSoul size={24} />
      <FragmentSoul size={48} />
      <FragmentSoul size={48} dim />
      <FragmentSoul size={28} />
      <div
        style={{
          font: '800 12px/16px var(--font-sans)',
          letterSpacing: '.08em',
          textTransform: 'uppercase',
          color: 'var(--fragments-eyebrow)',
        }}
      >
        Fragments
      </div>
      <div
        style={{
          font: '700 26px/30px var(--font-display)',
          color: 'var(--fragments-amount)',
        }}
      >
        9,427
      </div>
    </>
  );
}

PropsFragmentSoulProps

size
number | stringDefault 24
Pixels, or a size token such as 'var(--button-icon-size)'.
dim
boolean
className
string
FragmentSoulExample.swiftiOS · coming soon
FragmentSoulExample.ktAndroid · coming soon

It reads no tokens: its colours are fixed artwork, the same in both themes, so nothing here follows a role.

Fixed colours

#8B6CF0
#241048
#C779DF
#FF6FAE
#FFE6F2

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
Decorative: the mark is hidden from screen readers.
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.