Skip to content
Polytope
Search

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

    Menu

    Foundations

    The decisions every component is built from: color, type, space, motion, icons, and charts.

    Two curves. Parts that arrive use the ease-out curve and slide in fast, then settle. Things that fall use gravity and speed up. Press Run both.
    In this chapter 7 pages

    The visual world is the 1961 mathematics exhibition by Charles and Ray Eames: white walls, black display panels, wood-type lettering, and working models in strong colors. The foundations turn that world into rules.

    FoundationThe short version
    ColorWhite ground, exhibit black, tomato for the one moving part, mustard for notes, teal for links.
    TypographyUltra for titles only, Libre Franklin for everything read, JetBrains Mono for code.
    Space and layoutA 4px base, a 36rem reading column (about 68 characters), 3px rules between regions, square corners.
    MotionThings arrive with an ease-out and fall with gravity. Reduced motion shows the end state.
    IconsA small authored set: square caps, 2.25 strokes, 24px grid.
    ChartsEight series colors in a fixed order, checked for color vision deficiency in both themes.