folk — three-tier pricing and comparison matrix

---
version: alpha
name: folk — three-tier pricing and comparison matrix
colors:
  surface: '#ffffff'
  ink: rgba(3, 2, 0, 0.89)
  action: '#21201c'
typography:
  display:
    fontFamily: Uxumgrotesque
    fontSize: 64px
    fontWeight: 500
    lineHeight: 64px
  interface:
    fontFamily: Uxumgrotesque
    fontSize: 20px
    fontWeight: 500
    lineHeight: 26px
components:
  surface:
    backgroundColor: '{colors.surface}'
  action:
    backgroundColor: '{colors.action}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
---

## Overview

A white three-tier pricing page with annual/monthly and currency controls, outlined plan cards, a dark Premium action, a long feature matrix, FAQ and customer proof.

Source: https://www.folk.app/pricing. Captured 2026-10-11T06:09:59.439194+00:00. This is an observational design reference, not an official brand specification.

## Colors

surface: #ffffff; ink: rgba(3, 2, 0, 0.89); action: #21201c. Tokens describe observed interface surfaces and text, not every pixel in artwork. Translucent values retain source alpha; perceived colors vary with their backing surface.

## Typography

Primary sample: “Pricing” uses Uxumgrotesque, sans-serif, 64px/64px, weight 500, tracking -1.6px. The corresponding mobile heading is 36px/36px.

The interface token samples “Can I try folk for free with my team?” at 20px/26px, weight 500, using Uxumgrotesque, sans-serif. These are measured local samples, not an inferred complete site-wide type scale.

## Layout

Place the Pricing heading over an intentionally spacious gap. Align billing controls above three equal plan cards; put the currency control opposite. Continue with a labeled three-column feature comparison grouped by capability, then compact FAQ, testimonial tiles and final conversion section.

The native desktop screenshot is 1440 × 6747px, prepared at a 1440px viewport. Mobile evidence was gathered at a 390 × 844px viewport.

At 390px, the heading becomes left-aligned at 36px instead of centered 64px. The cards stack vertically inside 16px page gutters. The captured mobile opening shows the Standard card; the entire lower mobile matrix was not visually audited.

## Elevation & Depth

Flat outlined cards, a subdued popularity badge and one dark action distinguish Premium without a large colored background. Tables use whitespace and alignment rather than dense vertical gridlines.

## Shapes

Square plan cards, pill buttons and compact rectangular billing controls coexist. Use consistent horizontal baselines for prices and action placement.

## Components

The initial annual/USD state is captured. Currency and billing toggles, FAQ expansion and checkout were not tested. Actual Try for free links lead to the same public auth entry used by Login.

## Do's and Don'ts

Do keep inclusions, limits and billing context legible. Do not copy plan prices as permanent facts or claim that a trial was started. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.