Noko — confetti-framed team sign-up form

---
version: alpha
name: Noko — confetti-framed team sign-up form
colors:
  surface: '#FFFFFF'
  ink: '#000000'
  accent: '#FF0050'
  frame: '#FFDDE7'
  input: '#F9F5FC'
  primary: '#8C8380'
typography:
  primary:
    fontFamily: Fraunces
    fontSize: 32px
    fontWeight: 400
    lineHeight: 38.4px
    letterSpacing: -1.28px
  body:
    fontFamily: Satoshi
    fontSize: 25.6px
    fontWeight: 430
    lineHeight: 40.96px
  control:
    fontFamily: Satoshi
    fontSize: 23.04px
    fontWeight: 900
    lineHeight: 29.952px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 50px
---

## Overview

An isolated Team-plan registration form with a pastel confetti frame, serif plan badge, lavender account inputs, embedded payment fields, policy checkbox and a hot-pink trial action.

Source: https://secure.nokotime.com/signup/Team. Captured 2026-10-08T06:12:00.037714+00:00. This is an observed reference, not an official brand specification.

## Colors

Observed palette roles: surface: #FFFFFF; ink: #000000; accent: #FF0050; frame: #FFDDE7; input: #F9F5FC; primary: #8C8380. 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 32px / 38.4px, weight 400, with a desktop width of 379.69px. The matching mobile sample uses 17.0625px / 20.475px across 253.05px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Capture only .new-signup-form: the patterned rounded frame, raised plan badge and inner white form. At desktop, align bold account labels in a left column and wide lavender inputs in a right column. Group the embedded payment fields below, followed by an unchecked terms agreement, centered pink action and trial-billing explanation. Exclude the separate OAuth region outside this element.

Exact source selector: `.new-signup-form`. The desktop screenshot contains only this element; its own mobile element was also captured.

Responsive evidence: The decorated form measures 912px wide on desktop and 330.5px at a 390px viewport. The plan badge reduces from 32px to 17.0625px. Labels move above the account fields and payment fields stack. The complete mobile form was captured; source terms text becomes only 8.19px, an observed readability weakness that should not be copied into a new implementation.

## Elevation & Depth

The confetti pattern sits on a pale pink rounded shell, with a white inset form and lavender input fills. The serif plan label overlaps the frame visually. Form controls use subtle borders, not heavy shadows. Exact shadow blur, hover elevation and animation timing were not measured.

## Shapes

The sampled control has 50px corner radius and 7px 30px padding. These values belong to that control, not every surface. The selected desktop root has radius 38.4px and padding 12.8px 25.6px 25.6px. Additional spacing or breakpoint values would be implementation estimates, not measurements from this capture.

## Components

All names, emails and card numbers shown are source placeholders, not entered information. The payment UI loaded fully, and no checkbox, payment, account creation or trial start was submitted. The source defaults the country to Germany in this browser environment. The separate third-party identity-provider flow and oversized OAuth artwork were excluded.

## 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.