Noko — two-column press-quote grid

---
version: alpha
name: Noko — two-column press-quote grid
colors:
  surface: '#FFFFFF'
  ink: '#000000'
  primary: '#000000'
typography:
  primary:
    fontFamily: Satoshi
    fontSize: 23.04px
    fontWeight: 430
    lineHeight: 36.864px
  body:
    fontFamily: Satoshi
    fontSize: 23.04px
    fontWeight: 430
    lineHeight: 36.864px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
---

## Overview

An isolated press-quote collection with five source quotations, publication wordmarks, generous whitespace and a two-column desktop layout that stacks on mobile.

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

## Colors

Observed palette roles: surface: #FFFFFF; ink: #000000; 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 Satoshi at 23.04px / 36.864px, weight 430, with a desktop width of 912.00px. The matching mobile sample uses 15.84px / 25.344px across 330.50px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Use an unboxed 912px-wide section with two quote columns. Keep each publication wordmark beneath its quotation; allow differing quote lengths to create natural variation in the rows. The five visible attributions are Smashing Magazine, Lifehacker, Forbes, ReadWrite and Gigaom. Do not add a heading or action absent from this selected element.

Exact source selector: `section.press-quotes`. The desktop screenshot contains only this element; its own mobile element was also captured.

Responsive evidence: The selected section measures 912×738.63px at desktop and 330.5×769.33px at 390px. The columns collapse to a single ordered stack. The inherited Satoshi quote type changes from 23.04px/36.864px to 15.84px/25.344px. The entire component was visually reviewed at both sizes.

## Elevation & Depth

The white section has no enclosing card or visible shadow. Black text and colored publication wordmarks supply all emphasis; whitespace, not borders, groups the quotations. Exact shadow blur, hover elevation and animation timing were not measured.

## Shapes

The component root has measured radius 0px and padding 0px; individual wordmark shapes are source artwork. The selected desktop root has radius 0px and padding 0px. Additional spacing or breakpoint values would be implementation estimates, not measurements from this capture.

## Components

Preserve each source quotation with its own publication mark. These are press excerpts displayed by Noko, not independently verified endorsements. No carousel, expansion, hover or external article interaction was observed or claimed.

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