---
version: alpha
name: Noko — editorial time-tracking landing 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 long-form time-tracking landing page with expressive Fraunces headlines, Satoshi body copy, hot-pink actions, hand-drawn accents, attributed customer stories and confetti-framed pricing.

Source: https://nokotime.com/. Captured 2026-10-08T06:11:19.728530+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

Start with a compact pink wordmark navigation and a phone illustration, then lead with a large customer-quote headline instead of a generic product slogan. Use a readable central 912px editorial column, with question and benefit lists, bold inline emphasis and generous paragraph spacing. Interrupt the narrative with rounded testimonial cards and a product-entry illustration. Follow the product explanation with pricing, integrations, press quotes, further testimonials and a final trial action.

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

Responsive evidence: At 390px the Fraunces headline shrinks from 66.56px to 39px and wraps inside a 330.5px text rail. The phone artwork stays centered above it; the top navigation retains smaller Try it, Help and Sign in controls. The mobile opening was inspected, not the complete long-form page at all breakpoints.

## Elevation & Depth

White testimonial and pricing cards rely on very soft gray shadows. Pink scribbles, marker underlines and pastel confetti provide texture without changing the white editorial canvas. The primary actions use saturated hot pink. 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

Keep quoted text attributed to its original source and treat product screenshots as demonstrations, not live usage evidence. Source claims and prices are dated content. The closed support tab remains a utility, not an open overlay; no support messages, trials or account actions were sent.

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