Noko — cyan-and-magenta sign-in screen

---
version: alpha
name: Noko — cyan-and-magenta sign-in screen
colors:
  surface: '#FFFFFF'
  panel: '#75D9EB'
  accent: '#E36295'
  ink: '#FFFFFF'
  primary: '#FFFFFF'
typography:
  primary:
    fontFamily: OpenSans
    fontSize: 45px
    fontWeight: 400
    lineHeight: 50px
  body:
    fontFamily: OpenSans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 18px
  control:
    fontFamily: Arial
    fontSize: 18px
    fontWeight: 400
    lineHeight: 32px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 0px
---

## Overview

A distinctive legacy-style sign-in screen with a cyan horizontal panel, large uppercase white heading, simple email/password fields and a magenta arrow action.

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

## Colors

Observed palette roles: surface: #FFFFFF; panel: #75D9EB; accent: #E36295; ink: #FFFFFF; primary: #FFFFFF. 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 OpenSans at 45px / 50px, weight 400, with a desktop width of 645.61px. The matching mobile sample uses 45px / 50px across 360.00px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Set the pink Noko wordmark above a cyan login panel offset toward the right on desktop. Keep the heading, email/password fields and checked stay-signed-in option in the wider left area, with registration/recovery links in a separate right area. Place bordered Apple and Google choices below the panel and quiet legal links at the page bottom.

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

Responsive evidence: At 390px the logo becomes centered, the cyan form spans the screen and the 45px heading remains large. Inputs and the magenta submit action expand to the available width. Provider choices stack vertically, and registration/recovery becomes a separate cyan band below them. The complete visible mobile form was reviewed.

## Elevation & Depth

The flat cyan region and sharp magenta action create the structure; the desktop action has an arrow-like end while the mobile version is rectangular. White inputs and bordered provider choices use minimal elevation. Exact shadow blur, hover elevation and animation timing were not measured.

## Shapes

The sampled control has 0px corner radius and 1px 6px 1px 44px 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

This logged-out source screen differs intentionally from Noko marketing typography and color treatment. The stay-signed-in checkbox is initially checked by the source, not by the collector. No credentials were entered, providers followed, recovery requested or login submitted.

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