Theme
Sound
Jump to a component
AniCanonKit · Writing
ManuscriptSection
ManuscriptSection is one numbered section of a scene note or an imported script: #number, title (or a slugline with slug), the prose, the word count.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Web only
ManuscriptSection is made for the web, and isn’t part of Sakuga for iOS yet.
Android
Web only
ManuscriptSection is made for the web, and isn’t part of Sakuga for Android yet.
- Use it for
- One numbered section of a scene note or an imported script: its number, title or slugline, the prose and the word count, with what was found in it in the margin.
- Not for
- One block of a screenplay inside itScreenplayLine
- The whole page with its tools and statusManuscript
- Something found in the wordsProposalCard
- A shelf's headingSectionHeader
Guidelines
- What was found in it sits beside it in
slot="margin"asProposalCards, so every proposal stays next to the words it came from. - A hover card or selection toolbar goes in
slot="overlay". currentraises the section being written.
import { ManuscriptSection } from '@anicanon/sakuga/anicanonkit';
export default function ManuscriptSectionExample() {
return (
<ManuscriptSection number={1} title="The roof" words={34}>
After the fire, Toddy wires a second watch for Lisa.
</ManuscriptSection>
);
}PropsManuscriptSectionProps
numberrequirednumberchildrenrequiredReactNodetitlestringslugbooleanwordsnumbercurrentbooleanThe section being written.
marginReactNodeWhat sits beside the section (as slot="margin").
overlayReactNodeA hover card or toolbar (as slot="overlay").
classNamestringEach 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
manuscript-numberManuscriptSection: the #number.text-accentcamellia-700#b42354text-accentcamellia-400#f4779fmanuscript-textManuscriptSection: title and prose.text-primaryneutral-925#0b0a10text-primaryneutral-0#ffffffmanuscript-metaManuscriptSection: word count.text-mutedneutral-600#5c5b67text-mutedneutral-400#a3a3a7msec-current-bgManuscriptSection: the section being written.bg-surface-raisedneutral-100#ececf0bg-surface-raisedneutral-875#1a1a21Space and shape
manuscript-section-gapgap-2xl24px
manuscript-section-words-max-widthits own value
620px
manuscript-section-words-gapgap-lg12px
manuscript-section-no-widthits own value
28px
manuscript-section-body-padding-leftinset-md12px
manuscript-section-body-border-left-widthline-strong2px
manuscript-section-body-h3-margin-bottomgap-sm6px
manuscript-section-words-margin-topgap-sm6px
manuscript-section-margin-widthits own value
248px
manuscript-section-margin-gapgap-md8px
manuscript-section-current-margin-yits own value
calc(-1 * 12px)
manuscript-section-current-margin-xits own value
calc(-1 * 12px)
manuscript-section-current-padding-yinset-md12px
manuscript-section-current-padding-xinset-md12px
manuscript-section-current-radiusradius-md12px
msec-forced-current-widthline-strong2px
Type
manuscript-section-no-fonttext-title-2700 24px/30px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
manuscript-section-body-h3-fonttext-title-4700 17px/22px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
manuscript-section-body-h3-slug-fonttext-caption-strong600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
manuscript-section-body-h3-slug-letter-spacingtracking-caps.06em
manuscript-section-prose-fonttext-body-lg400 15px/24px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
manuscript-section-words-fonttext-small500 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
- Not focusable; read as "#" and its number, the title as a level-3 heading, the prose and its word count ("240 words"), and the section being written (
current) is marked "current". The margin's proposals follow in reading order. - 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.