folk design system

---
version: alpha
name: folk
description: "Light monochrome interface measured from folk.com: system-ui type with Averia Serif Libre, tonal surfaces and 9.03px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#1A1A1A"
  on-background: "#1A1A1A"
  on-surface-strong: "#030003"
  on-surface-variant: "#595A5A"
  on-surface-muted: "#85858D"
  surface-container-low: "#F5F6F8"
  overlay: "#FFFFFF80"
  outline: "#0000000F"
  primary: "#1A1A1A"
  on-primary: "#FFFFFF"
  secondary: "#3262E8"
typography:
  headline-display:
    fontFamily: system-ui
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1
  headline-lg:
    fontFamily: system-ui
    fontSize: 24.5px
    fontWeight: 400
    lineHeight: 1
  headline-md:
    fontFamily: Averia Serif Libre
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.02em
  body-md:
    fontFamily: Averia Serif Libre
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: Averia Serif Libre
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
  caption:
    fontFamily: Averia Serif Libre
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Averia Serif Libre
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
  label-sm:
    fontFamily: Averia Serif Libre
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
  headline-md-mobile:
    fontFamily: Averia Serif Libre
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.02em
rounded:
  sm: 9.03px
  md: 13px
  lg: 15px
  xl: 28px
  full: 9999px
spacing:
  xs: 4px
  sm: 6px
  md: 10px
  lg: 22px
  xl: 40px
  gutter: 10px
  container: 1180px
components:
  button-primary:
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 0px 0px 4px 0px
    height: 44px
  input-field:
    textColor: "#000000"
    rounded: 0px
    padding: 0px
  link:
    textColor: "{colors.on-surface-muted}"
---

# folk Design System

## Overview

folk describes itself as: “folk is the friend in your texts that keeps you on track. it checks in on gym days, keeps your streaks alive, locks you in for exams, logs your meals from a photo, gets your money back from forgotten subscriptions and do” The interface is light, built on **White (#FFFFFF)** with **Charcoal (#1A1A1A)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **system-ui** and **Averia Serif Libre**. Headlines run large; body text is 16px. Depth comes from soft drop shadows. Corners are mostly 9.03px.

Measured from [folk.com](https://www.folk.com/) on October 29, 2026 at 1440×900 and 390×844 from 242 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 11 roles, plus gradient stops #8CAEFF, #2455E5, #315BC0, #183D9A.

- **White (#FFFFFF):** Page background, seen 32 times. Token `background`, CSS `--tw-ring-offset-color`.
- **Charcoal (#1A1A1A):** Primary text and headings, seen 27 times. Token `on-surface`.
- **Near Black (#030003):** Headings and emphasis, seen 11 times. Token `on-surface-strong`.
- **Slate (#595A5A):** Secondary text, seen 11 times. Token `on-surface-variant`.
- **Cool Gray (#85858D):** Muted text and metadata, seen 14 times. Token `on-surface-muted`.
- **Snow (#F5F6F8):** Raised areas one step from the page, seen 2 times. Token `surface-container-low`.
- **White 50% (#FFFFFF80):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Near Black 6% (#0000000F):** Borders and dividers, seen 1 time. Token `outline`.
- **Charcoal (#1A1A1A):** Primary actions (the main text color; the palette is monochrome), seen 37 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Blue (#3262E8):** Accent, seen 1 time. Token `secondary`.

## Typography

**system-ui** and **Averia Serif Libre** share the interface. Fallback stack: `-apple-system, BlinkMacSystemFont, SF Compact, SF Pro Display`.

- **headline-display:** system-ui 27px at weight 400, line height 1. Page title (h1).
- **headline-lg:** system-ui 24.5px at weight 400, line height 1. Section headings (h2).
- **headline-md:** Averia Serif Libre 20px at weight 700, line height 1.25, tracking -0.02em (22px on mobile). Sub-section headings.
- **body-md:** Averia Serif Libre 16px at weight 400, line height 1.5. Body text.
- **body-sm:** Averia Serif Libre 15px at weight 400, line height 1.5. Secondary and small text.
- **caption:** Averia Serif Libre 14px at weight 400, line height 1.5. Captions and fine print.
- **label-md:** Averia Serif Libre 15px at weight 700, line height 1.5. Buttons, navigation and labels.
- **label-sm:** Averia Serif Libre 12px at weight 500, line height 1.5. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 25% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 4px, sm 6px, md 10px, lg 22px, xl 40px.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1180px.
- **Breakpoints:** 400px, 639px, 640px, 767px, 768px, 820px, 1023.5px, 1024px, 1280px, 1536px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0.16) 0px 1px 1.5px 0px, rgba(0, 0, 0, 0.03) 0px 0px 0px 0.5px`
- `rgba(24, 61, 154, 0.24) 0px 5px 8px 0px`
- `rgba(20, 40, 90, 0.35) 0px 22px 40px -22px, rgba(3, 0, 3, 0.06) 0px 0px 0px 1px`

Hairline rings and inset highlights also appear: `rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.16) 0px 0px 0px 1px inset`.

## Shapes

Most elements use 9.03px corners. Measured radii, most used first:

- **sm (9.03px):** 124 elements.
- **full (9999px):** 28 elements.
- **xl (28px):** 16 elements.
- **md (13px):** 8 elements.
- **lg (15px):** 8 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“get the app”):** transparent fill, #FFFFFF text, 16px/400, 13px radius, padding 0px 0px 4px 0px, shadow `rgba(24, 61, 154, 0.24) 0px 5px 8px 0px`.
- **input-field (“iMessage”):** transparent fill, #000000 text, 18px/400, padding 0px.
- **link:** transparent fill, #85858D text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page and lift surfaces in small steps: #F5F6F8.
- Do keep text in 4 levels: #1A1A1A, #030003, #595A5A, #85858D.
- Do let contrast carry emphasis; primary actions use #1A1A1A on #FFFFFF.
- Do reuse the measured spacing steps (6px, 10px, 22px).
- Do use 9.03px corners on most elements; larger surfaces also use 28px, 13px and 15px.
- Don't use #85858D for body text; it reaches 3.66:1 on #FFFFFF. Keep it for large text or metadata.
- Don't introduce new font families beyond system-ui and Averia Serif Libre.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.56s.

## Motion

Interface transitions are quick: 0.09s, 0.15s, 0.56s, 0.32s.

- **Easing:** `ease-out`, `ease`, `cubic-bezier(0.4, 0, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/folk.com/), the free DESIGN.md generator (engine 2026.10.29+bf9d681d83cf).