Noko — confetti-accented team pricing page

---
version: alpha
name: Noko — confetti-accented team pricing page
colors:
  surface: '#FFFFFF'
  ink: '#000000'
  accent: '#FF0050'
  primary: '#000000'
typography:
  primary:
    fontFamily: Fraunces
    fontSize: 66.56px
    fontWeight: 655
    lineHeight: 73.216px
    letterSpacing: -2.6624px
  body:
    fontFamily: Satoshi
    fontSize: 25.6px
    fontWeight: 430
    lineHeight: 40.96px
  control:
    fontFamily: Satoshi
    fontSize: 22px
    fontWeight: 400
    lineHeight: 24px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 5px
---

## Overview

A white pricing page with a large editorial trial headline, three team-plan cards, a confetti-framed featured tier, a separate solo-plan row and testimonial evidence.

Source: https://nokotime.com/plans/. Captured 2026-10-08T06:11:40.314919+00:00. This is an observed reference, not an official brand specification.

## Colors

Observed palette roles: surface: #FFFFFF; ink: #000000; accent: #FF0050; primary: #000000. These values come from computed source styles or inspected flat screenshot surfaces. Keep accent colors tied to their documented roles rather than tinting every text element.

## Typography

The primary sampled text uses Fraunces at 66.56px / 73.216px, weight 655, with a desktop width of 912.00px. The matching mobile sample uses 39px / 42.9px across 330.50px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Keep the serif introductory headline and supporting paragraph on a centered text rail. Below, lay out Team, Organization and Enterprise cards in a three-column row. Give Organization a taller pastel-confetti frame and a hand-drawn popularity badge; keep other cards quieter. Place Essential and Solo plans in a separate two-card row, then questions/contact, shared features, integrations, press quotes, testimonials and a final action.

Full desktop page at 1440px width, document height 5303px. Mobile evidence is a 390×844px opening viewport unless otherwise stated.

Responsive evidence: At 390px the 66.56px headline becomes 39px and wraps over several lines. The opening reveals a full-width Team card below the introduction rather than the desktop three-column row. The plan title changes from 30.4px to 19.5px. Lower mobile plan cards and contact interactions were not visually tested.

## Elevation & Depth

Use rounded white cards and diffuse neutral shadows; reserve the patterned border for the featured Organization card. Hot-pink pill buttons repeat a clear action vocabulary, while green check marks distinguish included features. Exact shadow blur, hover elevation and animation timing were not measured.

## Shapes

The sampled control has 5px corner radius and 2px 10px padding. These values belong to that control, not every surface. Additional spacing or breakpoint values would be implementation estimates, not measurements from this capture.

## Components

The visible plan prices and user limits are source content at capture time. Trial links lead to plan-specific registrations; only the distinct Team signup form was captured, avoiding trivial plan variants. Demo/email links, purchases and trial activation were not used.

## Do's and Don'ts

- Do preserve the documented hierarchy, content order, and observed responsive changes.
- Do keep source labels and attribution with their associated controls, diagrams and quotations.
- Do treat prices, metrics and marketing claims as dated source content rather than verified outcomes.
- Don't invent interaction states, validation results, successful submissions or additional breakpoints.
- Don't copy low-contrast or undersized text blindly; improve readability when adapting the pattern.