---
version: alpha
name: Kinopio — Playful Spatial Canvas
colors:
  primary: '#67FFBB'
  surface: '#FFFFFF'
  on-surface: '#000000'
  tutorial: '#004021'
  collaboration: '#61182F'
  examples: '#889E9A'
  on-dark: '#FFFFFF'
typography:
  brand:
    fontFamily: baustrabe, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 54px
    fontWeight: '700'
    lineHeight: 64.8px
  descriptor:
    fontFamily: microgramma, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 20px
    fontWeight: '700'
    lineHeight: 20px
  section:
    fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 21px
    fontWeight: '700'
    lineHeight: 25.2px
  body:
    fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 15px
    fontWeight: '400'
    lineHeight: 20.25px
  subheading:
    fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 15px
    fontWeight: '700'
    lineHeight: 18px
rounded:
  control: 6px
  panel: 16px
spacing:
  panel: 30px
  mobile-gutter: 20px
components:
  primary-action:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.control}'
  tutorial-panel:
    backgroundColor: '{colors.tutorial}'
    textColor: '{colors.on-dark}'
    padding: '{spacing.panel}'
---

# Kinopio — Playful Spatial Canvas

## Overview

A small, personable software landing page built around a real spatial canvas rather than an abstract productivity promise. The black italic wordmark and compact technical descriptor introduce a collage of connected cards, retro media, doodles and pastel connector lines. Below it, mint actions lead into a forest-green tutorial block, burgundy collaboration panel, muted sage example selector, collapsed FAQ and signed founder note. The overall page is deliberately narrow and left-aligned within a centered column.

The reference was captured at 1440 × 1000 CSS pixels with device scale factor 1; mobile was inspected at 390 × 844. Captured 2026-09-25T06:05:51.223903+00:00. Tokens and dimensions are computed CSS measurements unless labeled visual estimates. Videos and moving ticker text represent a single frame; the capture does not establish every video, hover, FAQ-open or example-tab state.

## Colors

Use white as the surrounding canvas and black for ordinary copy. The primary mint #67FFBB belongs to the repeated Open Kinopio buttons, not every link. Tutorials use #004021 with white text; collaboration uses #61182F with white text. The examples container uses #889E9A with black copy. Ordinary text links retain a familiar blue underline. Pastel connectors, yellow notes and cyan tags belong to the illustrated product canvas; do not promote every illustration color into a competing page-level action color.

## Typography

Use the measured Baustrabe stack for the 54px/64.8px bold wordmark, alongside Microgramma at 20px/20px for the compact two-line descriptor. The remaining interface uses Helvetica Neue, Helvetica, Arial, sans-serif. Body text is 15px/20.25px; section headings are 21px/25.2px bold and tutorial subheadings 15px/18px bold. Keep this intentionally modest hierarchy: do not turn the marketing prose into oversized display type. At 390px the wordmark is 40px/48px and descriptor 16px/16px; body size stays 15px.

## Layout

At 1440px, the main content begins at x=362.5px and major panels are 715px wide. Introductory copy is only 440px wide; the examples panel is 520px wide, creating a stepped right edge rather than a uniform full-width stack. The tutorial and collaboration panels have 30px padding. Tutorial rows pair prose and demonstration imagery; the hero artwork retains substantial visual room before the short explanation and repeated action.

At 390px the content begins at x=20px and prose spans 350px. Tutorial content stacks with 320px inner text widths, equivalent to 15px side padding. The fixed-width desktop hierarchy compresses without scaling down the body type. Measured mobile document scroll width is 394px, a small 4px overflow; do not describe the source as perfectly overflow-free. Header retains logo and three compact actions. Feature tickers intentionally clip moving text at their edges; this is not a missing-text loading state.

## Elevation & Depth

The measured large panels and buttons have no box shadow. Rely on contrasting solid fills, 16px panel corners and the spatial depth already present in the product artwork. The canvas itself contains small beveled note cards and connector lines. Preserve their tactile visual character without adding large marketing-card shadows throughout the page.

## Shapes

Large tutorial, collaboration and example containers use 16px corner radii. Buttons use 6px radii with 5px vertical and 9px horizontal padding; the measured main action is about 111 × 30px. These are compact controls, not pill-shaped hero banners. Keep media rounded within its colored container. Doodles and irregular collage shapes are part of the product storytelling, balanced by simple rectangular page structure.

## Components

- Header: small cyan character at the far left; Pricing and Apps outlined/translucent buttons and the mint primary action at the far right. Preserve the quiet utilitarian scale.
- Hero: wordmark plus descriptor, one short category sentence, then a broad animated canvas demonstration. Follow with readable explanation, a short free-tier line and primary action.
- How To panel: three distinct rows explain cards/connections, paint selection, and boxes/lists. Pair each short text block with its corresponding real demonstration rather than a decorative generic icon.
- Collaboration panel: dark burgundy background, short white paragraphs and a large collaborative board screenshot followed by a feature ticker.
- Examples: cyan label-like choices, a media frame, and explanatory prose on sage. Only the visible default state is documented; no claim about all tab transitions.
- Closing: text-heavy FAQ with collapsed chevrons, another action, signed maker note, then a compact dark-green multi-column footer. Do not copy the source's company lists or testimonials as proof for another product.

## Do's and Don'ts

Do preserve the narrow reading column, distinct widths, ordinary blue links, bright mint action and colorful product media. Do stack tutorial pairs on small screens and retain readable 15px copy. Do let the collage demonstrate how the tool works before listing capabilities. Do provide reduced-motion and keyboard support when implementing a similar system; those states were not tested here.

Don't replace this personable visual identity with a generic full-width SaaS grid. Don't use enormous display copy, pill everything, or add glossy shadows to the flat colored panels. Don't treat the captured video frame as an interactive reconstruction, reproduce the measured mobile overflow, or infer expanded FAQ behavior from the closed screenshot.