Theme

Sound

Jump to a component

Core · Foundations

Text

Text sets words in Sakuga's type scale: a variant names the style, tone changes only its colour.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

Text 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

Text 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: Words on a board or in a component, set in Sakuga's type scale: titles, body, the caption line that explains, a field's name, an eyebrow.
Not for: A subtitle line over videoCaption
An action inside a line of textTextLink
A character or a place named inside proseMention
A proposed change in the words, the old struck and the new underlinedRevision
The heading that opens a shelfSectionHeader

Guidelines

title-1 to title-4 (Funnel Display, 30 to 17 px), body (14/20), label (14/20 semibold), caption (13/18, the quiet line that explains), small (12/16), micro (12/16 bold, a field's name) and eyebrow (10.5/14 capitals, what kind of thing it is).
tone: primary, secondary, muted, accent, and on-media or on-media-muted over a picture. Bold words inside body, caption and small read in the strong colour.
With no variant it only sets a tone, inside other text. numeric lines figures up (timecodes, seconds).
mark highlights the words a check flagged inside a sentence (the part of a prompt the story contradicts), or the words a person selected. Writing read by Maki takes a kind: mark="stated" (said in the text: a quiet fill), mark="inferred" (read between the lines: a dotted underline); a conflict keeps the plain mark.
as picks the element; titles default to headings, body and caption to paragraphs, the rest to spans.
Never set type by hand on a board or in a component: if a size is missing from the scale, it is missing from Sakuga.
display (64 px) is a name that is the whole page, as a character's; lead (18/28) is the paragraph that introduces it. One of each per page at most.

TextExample.jsxReact

import { Text } from '@anicanon/sakuga/ui';

export default function TextExample() {
  return (
    <>
      <Text variant="eyebrow">Script</Text>
      <Text variant="title-2">#5 · Red Line · Sé station</Text>
      <Text variant="body">
        Kiko steps out of the smoke and stops between them.
      </Text>
      <Text variant="label">Take 3</Text>
      <Text variant="caption">
        {'Arrived 4 min ago · '}
        <b>to review</b>
      </Text>
      <Text variant="micro">Notes</Text>
      <Text variant="small" numeric>
        0+00 – 5+00 · 120 frames
      </Text>
      <Text variant="caption" tone="accent">
        Waits for you
      </Text>
    </>
  );
}

Props`TextProps`

variant

TextVariant

display: a name that is the page (64 px); lead: the paragraph that introduces it (18/28).

tone

numeric

boolean

Tabular figures.

mark

boolean | 'stated' | 'inferred'

Highlights the words: what a check flagged or a selection (true); what writing states or implies ('stated', 'inferred').

as

ElementType

id

string

children

ReactNode

className

string

Types

type TextVariant = 'display' | 'title-1' | 'title-2' | 'title-3' | 'title-4' | 'lead' | 'body' | 'label' | 'caption' | 'small' | 'micro' | 'eyebrow';

TextExample.swiftiOS · coming soon

TextExample.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

txt-primaryText: titles, body and labels.

text-primaryneutral-925#0b0a10

text-primaryneutral-0#ffffff

txt-secondaryText: captions.

text-secondaryneutral-800#2e2d36

text-secondaryneutral-200#dcdcde

txt-mutedText: small lines, micro labels and eyebrows.

text-mutedneutral-600#5c5b67

text-mutedneutral-400#a3a3a7

txt-strongText: bold words inside body, captions and small lines.

text-primaryneutral-925#0b0a10

text-primaryneutral-0#ffffff

txt-accentText: the accent tone, for a number or a mention.

text-accentcamellia-700#b42354

text-accentcamellia-400#f4779f

txt-on-mediaText: over a picture or the dark stage.

text-on-medianeutral-0#ffffff

txt-on-media-mutedText: a quiet line over a picture or the dark stage.

text-on-media-mutedneutral-400#a3a3a7

Space and shape

txt-mark-padding-x

inset-2xs

2px

txt-mark-radius

radius-xs

4px

txt-mark-inferred-underline-offset

underline-offset

3px

Type

txt-title-1-font

text-title-1

700 30px/36px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

txt-title-1-letter-spacing

its own value

calc(-1 * -.01em)

txt-title-2-font

text-title-2

700 24px/30px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

txt-title-3-font

text-title-3

700 20px/26px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

txt-title-4-font

text-title-4

700 17px/22px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

txt-body-font

text-body

400 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

txt-label-font

text-label

600 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

txt-caption-font

text-caption

500 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

txt-small-font

text-small

500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

txt-micro-font

text-micro

700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

txt-eyebrow-font

text-eyebrow

700 11px/14px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

txt-eyebrow-letter-spacing

tracking-caps

.06em

txt-body-b-font-weight

weight-strong

600

txt-display-font

text-display

700 64px/64px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

txt-display-letter-spacing

its own value

calc(-1 * -.01em)

txt-lead-font

text-lead

400 18px/28px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif