Skip to content
Polytope
Search

Finds pages and their sections, every token, every .ply class, and every Astro component.

    Menu

    Tokens

    Every design decision as a named value. Search by name, value, or purpose.

    Polytope

    --ply-size-2xl 2rem

    The type scale. Slide through the size tokens. The sample, its token name, and its value follow; titles from 2xl up switch to Ultra.

    Color roles

    TokenLightDarkPurposeUsed in
    --ply-color-bg#FFFFFF#161615Page ground.base, atlas, button, demo, form, nav, panel, search, tag, layout, utilities
    --ply-color-surface-sunken#EEF0EF#1C1C1ARecessed areas: table stripes, inline code, input wells.base, atlas, button, form, nav, note, search, table, writing
    --ply-color-panel#141414#262624Exhibit panel. Code blocks, the probability machine, demo canvases.base, atlas, button, code, demo, form, machine, panel, research, viz
    --ply-color-panel-text#F6F7F6#F6F7F6Text inside black panels and code blocks.base, atlas, button, code, demo, form, machine, panel, research, viz
    --ply-color-panel-muted#B9BAB4#B9BAB4Muted text inside panels.base, atlas, button, code
    --ply-color-panel-rule#4A4A47#4A4A47Hairlines inside panels, such as the rule under a code bar.base, button, code, demo, machine, research, viz
    --ply-color-text#141414#F2F2EEBody text and headings.base, atlas, button, form, machine, nav, note, panel, research, search, tag, viz, layout, utilities
    --ply-color-text-muted#4A4A47#B9BAB4Captions, metadata, secondary navigation.atlas, demo, form, machine, nav, panel, research, search, table, tag, viz, writing, utilities
    --ply-color-text-subtle#6B6B66#8F8F89Placeholders and the quietest labels. Still above 4.5:1 on the page ground.base, button, form, nav
    --ply-color-rule-strong#141414#F2F2EEThe 3px exhibit rules and control borders.base, atlas, demo, form, nav, research, search, table, writing, layout, modes
    --ply-color-rule#D9DAD6#3A3A37Hairlines between rows and list items.atlas, demo, form, nav, search, table, viz, writing, layout
    --ply-color-accent#D9412B#F0654FFills only: the current-location point, balls, active marks.base, atlas, form, machine, nav, research, search, tag, writing, layout, utilities
    --ply-color-accent-text#B8321F#F0654FTomato when it has to be read as text.button, form, nav, research, writing
    --ply-color-on-accent#FFFFFF#141414Text on a filled tomato control, such as a hovered button. The fill is accent-text.button
    --ply-color-link#0F6E73#5CC2C7Links. Teal, semibold, and always underlined.base, note, research
    --ply-color-link-hover#141414#F2F2EELink text on hover; the underline turns tomato.base
    --ply-color-note#E9A81C#E9A81CNote and highlight fill. Pair with text.base, atlas, code, machine, note, table, tag
    --ply-color-note-soft#FBEFD2#3A2F14The quieter note fill.note, search
    --ply-color-focus#0F6E73#F2B83AFocus ring on the page ground.base, atlas, form, search
    --ply-color-focus-on-panel#F2B83A#F2B83AFocus ring inside black panels.base
    --ply-color-selection#E9A81C#E9A81CText selection, always with black text.base
    --ply-color-code-comment#F2B83A#F2B83ACode comments, in mustard light so explanations read first.code
    --ply-color-code-keyword#F0654F#F0654FCode keywords.code
    --ply-color-code-string#5CC2C7#5CC2C7Code strings.code, panel
    --ply-color-code-number#95AEE3#95AEE3Code numbers.code

    Color primitives

    TokenLightDarkPurposeUsed in
    --ply-white#FFFFFFsameGallery white. The light page ground, the light chart surface, and white text on black.tokens only
    --ply-ink-50#F6F7F6samePanel chalk. Text inside black panels and code blocks.note
    --ply-ink-100#EEF0EFsameGallery wall. Sunken surfaces and table stripes.tokens only
    --ply-ink-200#D9DAD6sameHairline gray. Rules between table rows and list items, and chart grid lines.tokens only
    --ply-ink-300#B9BAB4samePanel gray. Muted text inside panels, and muted text in dark mode.tokens only
    --ply-ink-400#8F8F89sameQuiet text in dark mode.tokens only
    --ply-ink-500#6B6B66sameQuiet gray. Placeholders and the quietest labels on white, still above 4.5:1.tokens only
    --ply-ink-600#4A4A47sameCaption gray. Captions, metadata, and inactive tabs; the hairline inside panels.tokens only
    --ply-ink-700#3A3A37sameRules between rows in dark mode.tokens only
    --ply-ink-800#262624sameAfter-hours panel. Panels in dark mode, one step lighter than the ground.tokens only
    --ply-ink-900#1C1C1AsameSunken surfaces and the chart surface in dark mode.tokens only
    --ply-ink-950#141414sameExhibit black. Panels, heavy rules, body text.base, code, note, tag
    --ply-tomato-100#FBE3DEsamePale tomato tint. Not used by the kit; for your own tinted backgrounds.tokens only
    --ply-tomato-400#F0654FsameTomato bright. The accent in dark mode and the code keyword color.note
    --ply-tomato-500#D9412BsameThe moving part: current location, the balls in the probability machine.tokens only
    --ply-tomato-600#B8321FsameTomato ink. Tomato as text on white, and the hover fill of primary buttons.tokens only
    --ply-mustard-100#FBEFD2sameMustard soft. The quiet note fill in light mode.tokens only
    --ply-mustard-400#F2B83AsameMustard light. The focus ring inside panels and in dark mode, and the code comment color.note
    --ply-mustard-500#E9A81CsameNotes and highlights. Always carries black text.tokens only
    --ply-mustard-700#7A5300sameDeep mustard. Not used by the kit; for mustard text or marks on white.tokens only
    --ply-teal-100#DDF1F0samePale teal tint. Not used by the kit; for your own tinted backgrounds.tokens only
    --ply-teal-300#5CC2C7sameTeal light. Links in dark mode and inside panels, and the code string color.tokens only
    --ply-teal-700#0F6E73sameLinks on light grounds.tokens only
    --ply-cobalt-100#E3EAF8sameSequential chart ramp, step 1 (lightest).tokens only
    --ply-cobalt-200#C2D1F0sameSequential chart ramp, step 2.tokens only
    --ply-cobalt-300#95AEE3sameSequential chart ramp, step 3; also the code number color.tokens only
    --ply-cobalt-400#6A8BD4sameSequential chart ramp, step 4.tokens only
    --ply-cobalt-500#3A62C4sameCobalt. Sequential chart ramp, step 5, and the third categorical chart slot.tokens only
    --ply-cobalt-600#2B4A99sameSequential chart ramp, step 6.tokens only
    --ply-cobalt-700#1D336BsameSequential chart ramp, step 7 (darkest).tokens only

    Type

    TokenLightDarkPurposeUsed in
    --ply-font-display"Ultra", "Ultra Fallback", "Ultra Fallback Serif", Georgia, serifsameWood-type slab for titles, the wordmark, and big numerals. Never for running text.base, atlas, demo, nav, research, layout, utilities
    --ply-font-text"Libre Franklin Variable", "Libre Franklin Fallback", Arial, sans-serifsameEverything that gets read: body, UI, captions, tables.base, atlas, button, research, viz
    --ply-font-mono"JetBrains Mono Variable", "JetBrains Mono Fallback", Menlo, monospacesameCode, keyboard keys, and numeric parameters.base, atlas, code, demo, form, search, utilities
    --ply-size-xs0.8125remsame13px. Wall labels, tags, code bar text, and chart text.atlas, code, demo, nav, panel, search, tag, viz
    --ply-size-sm0.875remsame14px. Captions, hints, field labels, code blocks, and the on-this-page list.base, atlas, button, code, demo, form, machine, nav, panel, research, search, table, tag, viz, writing, utilities
    --ply-size-ui0.9375remsameInterface text: tabs, search, sidebar links, tables, notes, author lines.atlas, nav, note, research, search, table, layout
    --ply-size-md1remsame16px. Buttons, inputs, and checkbox and switch labels.base, button, demo, form, viz
    --ply-size-body1.0625remsame17px reading size.base
    --ply-size-body-wide1.125remsame18px. The reading size of article and docs text from 100rem, where the page is at its widest.layout
    --ply-size-lg1.25remsame20px. Ledes, blockquotes, and fourth-level headings.base, atlas, research, search, writing, layout
    --ply-size-xl1.5remsame24px. Third-level headings, the wordmark, and pager titles.base, atlas, demo, nav, research
    --ply-size-2xl2remsame32px. Section headings in Ultra.base, research
    --ply-size-3xl2.75remsame44px. History wall numerals and paper titles on narrow screens.research
    --ply-size-4xl4remsame64px. The top of the paper title range, the step below display.research
    --ply-size-displayclamp(3rem, 1.6rem + 4.4vw, 5.75rem)samePage titles. 48px on phones up to 92px on wide screens.base, layout
    --ply-weight-regular400sameRunning text, and every use of Ultra, which has one weight.nav, research, search, writing
    --ply-weight-medium500sameTabs, segmented controls, and the small label in the pager.form, nav, search
    --ply-weight-semibold600sameLinks, buttons, and the current tab.base, atlas, button, code, form, nav, research, search, tag
    --ply-weight-bold700sameHeadings in Libre Franklin, field labels, wall labels, and strong text.base, atlas, demo, form, nav, note, panel, research, search, table, tag, viz, writing, utilities
    --ply-leading-display0.98sameLine height for Ultra display titles.base, layout, utilities
    --ply-leading-tight1.2sameLine height for headings in Libre Franklin.base, research
    --ply-leading-normal1.45sameLine height for notes, captions, tables, and interface text.base, atlas, demo, form, note, panel, research, search, table, viz, writing, layout
    --ply-leading-relaxed1.6sameLine height for running text in the reading column.base, research

    Space

    TokenLightDarkPurposeUsed in
    --ply-space-00sameNo space. Not used by the kit; for resetting a gap in a scale-driven layout.tokens only
    --ply-space-10.25remsame4px. The tightest gap, inside small groups such as a swatch and its value.atlas, demo, nav, research, viz, layout
    --ply-space-20.5remsame8px. Between a label and its field, and an icon and its text.atlas, button, code, demo, form, nav, research, search, table, tag, viz, writing, layout, utilities
    --ply-space-30.75remsame12px. Between items in a cluster, and below section headings.atlas, button, code, demo, form, machine, nav, note, panel, research, search, table, viz, writing, layout, modes, utilities
    --ply-space-41remsame16px. Between paragraphs, and the side gutter on phones.atlas, button, code, demo, machine, nav, note, research, search, table, viz, writing, layout, utilities
    --ply-space-51.5remsame24px. Panel padding and the side padding of buttons.base, atlas, button, code, demo, nav, note, panel, research, writing, layout
    --ply-space-62remsame32px. Gaps between page columns and around figures.atlas, research, search, writing, layout
    --ply-space-73remsame48px. Above section headings and around the mast.base, atlas, demo, research, layout
    --ply-space-84remsame64px. Above the pager and the footnotes.base, nav, writing, layout
    --ply-space-96remsame96px. Below the main column, before the footer.layout
    --ply-space-108remsame128px. Not used by the kit; the largest step for very open layouts.tokens only

    Borders and corners

    TokenLightDarkPurposeUsed in
    --ply-border-hair1pxsame1px. Rules between table rows and list items.atlas, code, demo, nav, search, table, writing, layout
    --ply-border-control2pxsame2px. Borders of buttons, inputs, and segmented controls.atlas, button, demo, form, nav, search, table, writing, modes
    --ply-border-rule3pxsameThe exhibit rule under the top bar and between page regions.base, atlas, demo, nav, research, search, table, layout
    --ply-radius-none0samePanels, buttons, inputs, and code blocks are square.button, form
    --ply-radius-ball999pxsameOnly round things are round: balls, points, status dots.atlas, demo, form, nav, note, research, search, tag, viz, writing

    Motion

    TokenLightDarkPurposeUsed in
    --ply-duration-fast120mssameHover and color changes.base, atlas, button, form, nav, writing
    --ply-duration-base200mssameSwitches and floating cards.atlas, form, research, search
    --ply-duration-slow320mssameToast arrival.atlas, demo
    --ply-duration-drop900mssameOne ball falling through the machine.tokens only
    --ply-ease-outcubic-bezier(0.16, 1, 0.3, 1)sameDefault for UI that arrives.base, atlas, button, demo, form, nav, research, search, tag, writing
    --ply-ease-gravitycubic-bezier(0.55, 0, 1, 0.45)sameThings that fall.machine

    Layout

    TokenLightDarkPurposeUsed in
    --ply-layout-measure36remsameReading column: about 68 characters of body text at 17px. Set in rem so notes, code, and text in one column share an edge.base, atlas, code, note, research, table, writing, layout
    --ply-layout-measure-wide38remsameReading column of article and docs pages from 100rem, where their text is 18px: still about 68 characters.layout
    --ply-layout-margin14remsameThe margin after the reading column, for sidenotes and margin figures: its narrowest width. It opens when the main column has room for the measure, a 2rem gap, and this, and widens with the page to half again.writing, layout
    --ply-layout-gutterclamp(1rem, 0.2rem + 4vw, 4.5rem)samePage side margin: 16px on phones, 72px on wide screens.layout
    --ply-layout-sidebar17.5remsameWidth of the chapter sidebar of a docs page, shown from 56rem. The on-this-page list sits in it, under the current page.layout
    --ply-layout-toc15remsameWidth of the on-this-page rail of an article page, shown from 80rem.layout
    --ply-layout-max90remsameThe widest the page grows.layout

    Chart colors

    Chart tokens (--ply-viz-1 to --ply-viz-8, --ply-viz-seq-*, --ply-viz-div-*, --ply-status-*) are documented in Charts.