folk — five illustrated tool-consolidation cards

---
version: alpha
name: folk — five illustrated tool-consolidation cards
colors:
  surface: '#ffffff'
  ink: rgba(3, 2, 0, 0.89)
  action: '#21201c'
  mobile-blue: '#c3d3d6'
  mobile-mauve: '#d8c0d0'
  mobile-olive: '#c9c9a8'
typography:
  display:
    fontFamily: Uxumgrotesque
    fontSize: 64px
    fontWeight: 500
    lineHeight: 64px
  interface:
    fontFamily: Foundersgrotesk
    fontSize: 14.4px
    fontWeight: 400
    lineHeight: 23.04px
components:
  surface:
    backgroundColor: '{colors.surface}'
  action:
    backgroundColor: '{colors.action}'
  mobile-blue:
    backgroundColor: '{colors.mobile-blue}'
  mobile-mauve:
    backgroundColor: '{colors.mobile-mauve}'
  mobile-olive:
    backgroundColor: '{colors.mobile-olive}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
---

## Overview

A five-card tool-consolidation section with monochrome geometric illustrations, functional labels, replacement-logo rows and a small coming-soon badge.

Source: https://www.folk.app/. Captured 2026-10-11T06:18:55.680525+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; mobile-blue: #c3d3d6; mobile-mauve: #d8c0d0; mobile-olive: #c9c9a8. 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: “Consolidate tools.
Cut costs.” uses Uxumgrotesque, sans-serif, 64px/64px, weight 500, tracking -1.472px. The corresponding mobile heading is 32px/32px.

The interface token samples “Capture
Chrome extension
Replaces
Surfe” at 14.4px/23.04px, weight 400, using Foundersgrotesk. These are measured local samples, not an inferred complete site-wide type scale.

## Layout

Place a two-line left-aligned heading above five equal columns: Capture, Enrich, Track, Outreach and Call. Each card has a category label, stronger title, large line illustration, dividing rule and compact replacement-logo row. Keep each logo group subordinate to its card function.

The native desktop screenshot is 1440 × 747px, prepared at a 1440px viewport. It contains only `.section_consolidate`. The measured element bounds are 1440.00 × 746.73px at desktop and 390.00 × 2210.23px at 390px. Root padding is 0px on desktop and 0px on mobile.

At 390px the five cards stack into a long single column. White desktop cards become visibly pastel-tinted mobile cards: blue-gray, mauve, olive, tan and pale yellow. The heading reduces from 64px to 32px. The captured desktop state was not a hover demonstration.

## Elevation & Depth

Thin black outlines and procedural-looking line art create structure without shadows. Mobile textured fills add color while preserving the same line drawings.

## Shapes

Square cards, repeating dots, ellipses, a winding line and concentric circles establish a coherent geometric system. Keep the coming-soon tag a small rectangular label.

## Components

Each card is a source navigation link; destination feature pages and hover transitions were not tested for this reference. The replacement claims and future availability label are source content, not an independent competitive audit.

## Do's and Don'ts

Do keep card structure comparable and preserve coming-soon status. Do not infer exact animation behavior from a single static geometric illustration. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.