Skip to content
Polytope
Search

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

    Menu

    Color

    A white gallery wall, black exhibit panels, and a few strong colors that each have one job.

    In this chapter 7 pages

    Roles

    Components use semantic tokens (--ply-color-*), never primitives. Each semantic token has a light and a dark value; the page switches by itself.

    • --ply-color-bg#FFFFFF / #161615Page ground.
    • --ply-color-surface-sunken#EEF0EF / #1C1C1ARecessed areas: table stripes, inline code, input wells.
    • --ply-color-panel#141414 / #262624Exhibit panel. Code blocks, the probability machine, demo canvases.
    • --ply-color-text#141414 / #F2F2EEBody text and headings.
    • --ply-color-text-muted#4A4A47 / #B9BAB4Captions, metadata, secondary navigation.
    • --ply-color-rule-strong#141414 / #F2F2EEThe 3px exhibit rules and control borders.

    Tomato, mustard, and teal

    Each one has a single job. Using one for another job breaks the reader's ability to scan.

    • --ply-color-accent#D9412B / #F0654FFills only: the current-location point, balls, active marks.
    • --ply-color-note#E9A81CNote and highlight fill. Pair with text.
    • --ply-color-link#0F6E73 / #5CC2C7Links. Teal, semibold, and always underlined.
    • Tomato marks the current or moving thing: where you are in the navigation, the balls in the machine, a checked radio. As a fill it needs 3:1; when tomato must be read as text, use --ply-color-accent-text.
    • Mustard fills notes and highlights, always with black text on it, in both themes.
    • Teal is for links. Links are also underlined, so color is never the only signal.

    Contrast

    Every text pair passes WCAG AA (4.5:1) in both themes. The build checks this list and more with npm run check:contrast.

    TextOnLightDark
    textbg18.4:116.1:1
    text-mutedbg8.8:19.2:1
    text-subtlebg5.3:15.5:1
    linkbg6.0:18.6:1
    accent-textbg5.9:15.7:1
    panel-textpanel17.1:114.1:1
    panel-mutedpanel9.4:17.7:1
    code-commentpanel10.2:18.4:1

    Dark theme

    The dark theme is the exhibition after hours: a near-black ground, panels a step lighter than the ground, lighter tomato and teal so they keep their contrast. Mustard stays the same and keeps its black text. Dark is chosen by the reader's system setting or the toggle in the top bar; neither theme is the default for a category of page.

    Primitives

    The raw palette the roles point at. Reach for these only when building a new semantic token.

    • --ply-white#FFFFFFGallery white. The light page ground, the light chart surface, and white text on black.
    • --ply-ink-50#F6F7F6Panel chalk. Text inside black panels and code blocks.
    • --ply-ink-100#EEF0EFGallery wall. Sunken surfaces and table stripes.
    • --ply-ink-200#D9DAD6Hairline gray. Rules between table rows and list items, and chart grid lines.
    • --ply-ink-300#B9BAB4Panel gray. Muted text inside panels, and muted text in dark mode.
    • --ply-ink-400#8F8F89Quiet text in dark mode.
    • --ply-ink-500#6B6B66Quiet gray. Placeholders and the quietest labels on white, still above 4.5:1.
    • --ply-ink-600#4A4A47Caption gray. Captions, metadata, and inactive tabs; the hairline inside panels.
    • --ply-ink-700#3A3A37Rules between rows in dark mode.
    • --ply-ink-800#262624After-hours panel. Panels in dark mode, one step lighter than the ground.
    • --ply-ink-900#1C1C1ASunken surfaces and the chart surface in dark mode.
    • --ply-ink-950#141414Exhibit black. Panels, heavy rules, body text.
    • --ply-tomato-100#FBE3DEPale tomato tint. Not used by the kit; for your own tinted backgrounds.
    • --ply-tomato-400#F0654FTomato bright. The accent in dark mode and the code keyword color.
    • --ply-tomato-500#D9412BThe moving part: current location, the balls in the probability machine.
    • --ply-tomato-600#B8321FTomato ink. Tomato as text on white, and the hover fill of primary buttons.
    • --ply-mustard-100#FBEFD2Mustard soft. The quiet note fill in light mode.
    • --ply-mustard-400#F2B83AMustard light. The focus ring inside panels and in dark mode, and the code comment color.
    • --ply-mustard-500#E9A81CNotes and highlights. Always carries black text.
    • --ply-mustard-700#7A5300Deep mustard. Not used by the kit; for mustard text or marks on white.
    • --ply-teal-100#DDF1F0Pale teal tint. Not used by the kit; for your own tinted backgrounds.
    • --ply-teal-300#5CC2C7Teal light. Links in dark mode and inside panels, and the code string color.
    • --ply-teal-700#0F6E73Links on light grounds.
    • --ply-cobalt-100#E3EAF8Sequential chart ramp, step 1 (lightest).
    • --ply-cobalt-200#C2D1F0Sequential chart ramp, step 2.
    • --ply-cobalt-300#95AEE3Sequential chart ramp, step 3; also the code number color.
    • --ply-cobalt-400#6A8BD4Sequential chart ramp, step 4.
    • --ply-cobalt-500#3A62C4Cobalt. Sequential chart ramp, step 5, and the third categorical chart slot.
    • --ply-cobalt-600#2B4A99Sequential chart ramp, step 6.
    • --ply-cobalt-700#1D336BSequential chart ramp, step 7 (darkest).