folk — editorial CRM landing with live-style product scenes

---
version: alpha
name: folk — editorial CRM landing with live-style product scenes
colors:
  surface: '#ffffff'
  ink: rgba(3, 2, 0, 0.89)
  action: '#21201c'
typography:
  display:
    fontFamily: Uxumgrotesque
    fontSize: 72px
    fontWeight: 500
    lineHeight: 72px
  interface:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24.5px
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

An airy CRM landing page pairing tightly set black typography, a compact lead form and detailed product scenes with pastel feature panels, comparison cards and editorial testimonials.

Source: https://www.folk.app/. Captured 2026-10-11T06:18:08.999433+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: “One platform for your entire sales motion” uses Uxumgrotesque, sans-serif, 72px/72px, weight 500, tracking -1.8px. The corresponding mobile heading is 32px/32px.

The interface token samples “The only AI CRM your team needs to close deals and find your next clients” at 20px/24.5px, weight 400, using Inter, Arial, sans-serif. These are measured local samples, not an inferred complete site-wide type scale.

## Layout

Use a slim navigation and oversized centered headline over a small joined email/team-size action row. Follow with a textured product demonstration and four stages of the sales workflow. Continue through infrastructure examples, five tool-consolidation cards, broad testimonial rows and a centered final CTA.

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

At 390px the hero type reduces from 72px to 32px. Login, demo and hamburger controls remain visible. The email field, team-size select and dark pill action stack with 16px side gutters. The product scene is framed and intentionally cropped horizontally; it is a marketing illustration, not a responsive live dashboard.

## Elevation & Depth

Most marketing surfaces are white with thin ink rules; pale textured colors behind product scenes provide depth without heavy shadows.

## Shapes

Combine square-edged input and product frames with rounded demo/primary actions. Editorial headings use tight tracking, while narrow labels and chips organize product mockups.

## Components

Product scenes show a single rendered animation state. No lead form was submitted. Navigation, pricing and logged-out auth destinations were inspected separately; product actions shown in the demo are not evidence of tested CRM functionality.

## Do's and Don'ts

Do separate the marketing page from depicted sample customer data. Do not present sample pipeline figures, customer quotes or source adoption claims as newly verified statistics. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.