Skip to content
Get started

Changelog

The latest updates to the Sphere Kit design system.

  1. Sphere Kit

    Rules, words and the first patterns

    The system now says how to use it: rules on most component pages, three foundations about use, and the seven patterns Sphere Space is made of.

    Added

    • Do and don't on 42 component pages, folded up, each rule drawn with the real component.
    • Three foundations: Icons, Accessibility with this theme's measured contrast in light and dark, and Writing with Sphere's own word list.
    • Seven patterns: Task status, Task row, Cycle header, Thread comment, Reply composer, Suggestion card and Inbox item. · Task status, Task row, Cycle header, Thread comment, Reply composer, Suggestion card, Inbox item
    • pnpm check reads the theme and the patterns and fails on a contrast pair under its ratio, a colour outside the palette or an unlisted pattern.
    • pnpm pull-base brings the base into a client copy without touching its client layer.

    Fixed

    • Two chart colours and a badge edge in dark named their colour in place. They now point to the palette.
  2. Sphere Kit

    Sphere Kit

    The base becomes Studio Sphere's own system: Sphere Sans, the studio's warm palette and the details from Sphere Space, in a docs site framed like a drawing.

    Added

    • Sphere Sans for text and controls, Sphere Sans Display for headlines, JetBrains Mono for code.
    • The Sphere details: a lit gradient hairline on the primary button and on badges, the segmented control from Sphere Space, the studio's elevation ladder on menus and dialogs.
    • Badge takes a tone (neutral, red, orange, amber, yellow, green, cyan, blue, purple), a size (xs, sm, default, lg), a square shape, a leading dot and a tooltip. · Badge
    • A component gallery at /components, every component drawn as a quiet sketch.

    Changed

    • Warm monochrome theme: ink and paper, creme field edges at 3:1, orange only for focus, links and the one thing that needs a person.
    • Buttons are capsules, icon buttons circles, as on studiosphere.co and in the iPhone app. Fields keep 10px corners, cards and popups 14px, dialogs 20px.
    • Docs shell: the page as a white sheet in a framed column, each block on a hairline, every showcase with a ring of dots in its margin.
  3. Sphere Kit

    Sphere Kit 0.1.0

    The base: every shadcn/ui component in the Nova style, documented with live examples and matched by the Figma library.

    Added

    • All 63 shadcn/ui components with their examples, variants and API.
    • Foundations pages for colour, type, radius, surfaces and motion.
    • A shadcn registry, so any project installs a component with one command.