DESIGN.md · Analysis

Twofold Therapy

twofoldny.com · 7 Sept 2026 · 47 colors · GT-America-Standard-Medium, sans-serif, GT-Super-Text-Book, serif

Twofold Therapy

A NYC-based psychoanalytic practice offering collaborative, evidence-informed care for adults and couples. The design system reflects clinical precision, human warmth, and sophisticated restraint.

Colors

surface#ffffff

surface-dim#f5f5f5

surface-bright#ffffff

surface-container-lowest#fafafa

surface-container-low#f0f0f0

surface-container#eeeeee

surface-container-high#e9ecef

surface-container-highest#eaeaea

on-surface#000000

on-surface-variant#4a4a4a

inverse-surface#1a1a1a

inverse-on-surface#f5f5f5

outline#cdcdcd

outline-variant#d4d4d2

surface-tint#17236f

primary#17236f

on-primary#ffffff

primary-container#e8ecf9

on-primary-container#17236f

inverse-primary#c5ceff

secondary#505050

on-secondary#ffffff

secondary-container#d0d0d0

on-secondary-container#1a1a1a

tertiary#666666

on-tertiary#ffffff

tertiary-container#ecebec

on-tertiary-container#1a1a1a

error#b3261e

on-error#ffffff

error-container#f9dedc

on-error-container#410e0b

primary-fixed#e8ecf9

primary-fixed-dim#c5ceff

on-primary-fixed#17236f

on-primary-fixed-variant#3d4a8f

secondary-fixed#d0d0d0

secondary-fixed-dim#b4b4b4

on-secondary-fixed#1a1a1a

on-secondary-fixed-variant#3a3a3a

tertiary-fixed#ecebec

tertiary-fixed-dim#cfcfcf

on-tertiary-fixed#1a1a1a

on-tertiary-fixed-variant#4a4a4a

background#ffffff

on-background#000000

surface-variant#eaeaea

Typography

display: fontFamily: GT-America-Standard-Medium, sans-serif · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.04em
headline-lg: fontFamily: GT-America-Standard-Medium, sans-serif · fontSize: 40px · fontWeight: 600 · lineHeight: 48px · letterSpacing: -0.02em
headline-md: fontFamily: GT-America-Standard-Medium, sans-serif · fontSize: 28px · fontWeight: 600 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: GT-America-Standard-Medium, sans-serif · fontSize: 20px · fontWeight: 600 · lineHeight: 28px · letterSpacing: 0em
body-lg: fontFamily: GT-Super-Text-Book, serif · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0.01em
body-md: fontFamily: GT-Super-Text-Book, serif · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0.01em
label-md: fontFamily: GT-America-Standard-Medium, sans-serif · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: GT-America-Standard-Medium, sans-serif · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.05em

Design guidance

Do's and Don'ts

**Do**

Do use primary (#17236f) exclusively on interactive elements—buttons, links, focus rings, and hover states—to maintain visual hierarchy and guide user attention.
Do maintain minimum 40px (lg spacing) between major sections and 24px (md spacing) between cards to create psychological breathing room and reduce cognitive load.
Do apply transitions at 0.2–0.3s ease-out on all interactive state changes (hover, focus, active) to provide responsive feedback without feeling sluggish.
Do pair GT-America-Standard-Medium (sans-serif) for navigation and labels with GT-Super-Text-Book (serif) for body content to create a visual dialogue between action and reflection.
Do use 1px solid borders at {colors.outline} (#cdcdcd) for card edges and dividers, never thicker, to maintain visual lightness and clarity.
Do apply subtle shadows (sm: 0 1px 2px rgba(0, 0, 0, 0.06)) to cards and inputs in their resting state, elevating to md (0 3px 8px rgba(0, 0, 0, 0.15)) on hover to signal interactivity through depth.

**Don't**

Don't use primary (#17236f) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus states to maintain visual authority.
Don't apply border-radius greater than 12px on cards or 8px on buttons; excessive rounding undermines the clinical precision of the brand.
Don't use harsh, high-contrast shadows (blur < 8px, spread > 0px) or dark shadows (alpha > 0.2); maintain soft, diffuse shadows that suggest depth without visual aggression.
Don't reduce spacing below 12px (sm token) between major UI elements; cramped layouts increase cognitive friction and contradict the therapeutic principle of bounded space.
Don't mix sans-serif and serif fonts within a single text block; maintain clear separation—sans for labels/navigation, serif for body content—to preserve visual hierarchy.
Don't use color to convey information alone; always pair color changes with text labels, icons, or other visual cues to ensure accessibility and clarity.

---
version: alpha
name: Twofold Therapy
description: >-
  A NYC-based psychoanalytic practice offering collaborative, evidence-informed care for adults and couples. The design
  system reflects clinical precision, human warmth, and sophisticated restraint.
logo:
  src: https://twofoldny.com/i/favicon-theme-light.png
  srcDark: https://twofoldny.com/i/favicon-theme-dark.png
colors:
  surface: '#ffffff'
  surface-dim: '#f5f5f5'
  surface-bright: '#ffffff'
  surface-container-lowest: '#fafafa'
  surface-container-low: '#f0f0f0'
  surface-container: '#eeeeee'
  surface-container-high: '#e9ecef'
  surface-container-highest: '#eaeaea'
  on-surface: '#000000'
  on-surface-variant: '#4a4a4a'
  inverse-surface: '#1a1a1a'
  inverse-on-surface: '#f5f5f5'
  outline: '#cdcdcd'
  outline-variant: '#d4d4d2'
  surface-tint: '#17236f'
  primary: '#17236f'
  on-primary: '#ffffff'
  primary-container: '#e8ecf9'
  on-primary-container: '#17236f'
  inverse-primary: '#c5ceff'
  secondary: '#505050'
  on-secondary: '#ffffff'
  secondary-container: '#d0d0d0'
  on-secondary-container: '#1a1a1a'
  tertiary: '#666666'
  on-tertiary: '#ffffff'
  tertiary-container: '#ecebec'
  on-tertiary-container: '#1a1a1a'
  error: '#b3261e'
  on-error: '#ffffff'
  error-container: '#f9dedc'
  on-error-container: '#410e0b'
  primary-fixed: '#e8ecf9'
  primary-fixed-dim: '#c5ceff'
  on-primary-fixed: '#17236f'
  on-primary-fixed-variant: '#3d4a8f'
  secondary-fixed: '#d0d0d0'
  secondary-fixed-dim: '#b4b4b4'
  on-secondary-fixed: '#1a1a1a'
  on-secondary-fixed-variant: '#3a3a3a'
  tertiary-fixed: '#ecebec'
  tertiary-fixed-dim: '#cfcfcf'
  on-tertiary-fixed: '#1a1a1a'
  on-tertiary-fixed-variant: '#4a4a4a'
  background: '#ffffff'
  on-background: '#000000'
  surface-variant: '#eaeaea'
typography:
  display:
    fontFamily: GT-America-Standard-Medium, sans-serif
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: GT-America-Standard-Medium, sans-serif
    fontSize: 40px
    fontWeight: '600'
    lineHeight: 48px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: GT-America-Standard-Medium, sans-serif
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: GT-America-Standard-Medium, sans-serif
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: 0em
  body-lg:
    fontFamily: GT-Super-Text-Book, serif
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0.01em
  body-md:
    fontFamily: GT-Super-Text-Book, serif
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0.01em
  label-md:
    fontFamily: GT-America-Standard-Medium, sans-serif
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: GT-America-Standard-Medium, sans-serif
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 40px
  container-max: 1000px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 0 8px 24px rgba(0, 0, 0, 0.12)
layout:
  containerMaxWidth: 1000px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 24px
    height: 44px
    border: none
    cursor: pointer
    transition: background-color 0.3s ease-out
  button-primary-hover:
    backgroundColor: '#0f1a52'
    textColor: '{colors.on-primary}'
  button-primary-active:
    backgroundColor: '#0a0f3a'
    textColor: '{colors.on-primary}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 24px
    height: 44px
    border: 1px solid {colors.outline}
    cursor: pointer
    transition: all 0.3s ease-out
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    borderColor: '{colors.primary}'
  link-text:
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    textDecoration: none
    borderBottom: 1px solid {colors.on-surface}
    transition: color 0.2s ease-out, border-color 0.2s ease-out
  link-text-hover:
    textColor: '{colors.primary}'
    borderBottomColor: '{colors.primary}'
  card:
    backgroundColor: '{colors.surface-container-lowest}'
    rounded: '{rounded.md}'
    padding: '{spacing.md}'
    border: 1px solid {colors.outline}
    boxShadow: '{elevation.sm}'
    transition: box-shadow 0.3s ease-out, background-color 0.3s ease-out
  card-hover:
    backgroundColor: '{colors.surface-container-low}'
    boxShadow: '{elevation.md}'
  input-field:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 16px
    border: 1px solid {colors.outline}
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(23, 35, 111, 0.1)
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    transition: background-color 0.2s ease-out
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
  badge:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    display: inline-block
  divider:
    backgroundColor: '{colors.outline}'
    height: 1px
    width: 100%
    margin: '{spacing.md} 0'
---

## Do's and Don'ts

**Do**
- Do use primary (#17236f) exclusively on interactive elements—buttons, links, focus rings, and hover states—to maintain visual hierarchy and guide user attention.
- Do maintain minimum 40px (lg spacing) between major sections and 24px (md spacing) between cards to create psychological breathing room and reduce cognitive load.
- Do apply transitions at 0.2–0.3s ease-out on all interactive state changes (hover, focus, active) to provide responsive feedback without feeling sluggish.
- Do pair GT-America-Standard-Medium (sans-serif) for navigation and labels with GT-Super-Text-Book (serif) for body content to create a visual dialogue between action and reflection.
- Do use 1px solid borders at {colors.outline} (#cdcdcd) for card edges and dividers, never thicker, to maintain visual lightness and clarity.
- Do apply subtle shadows (sm: 0 1px 2px rgba(0, 0, 0, 0.06)) to cards and inputs in their resting state, elevating to md (0 3px 8px rgba(0, 0, 0, 0.15)) on hover to signal interactivity through depth.

**Don't**
- Don't use primary (#17236f) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus states to maintain visual authority.
- Don't apply border-radius greater than 12px on cards or 8px on buttons; excessive rounding undermines the clinical precision of the brand.
- Don't use harsh, high-contrast shadows (blur < 8px, spread > 0px) or dark shadows (alpha > 0.2); maintain soft, diffuse shadows that suggest depth without visual aggression.
- Don't reduce spacing below 12px (sm token) between major UI elements; cramped layouts increase cognitive friction and contradict the therapeutic principle of bounded space.
- Don't mix sans-serif and serif fonts within a single text block; maintain clear separation—sans for labels/navigation, serif for body content—to preserve visual hierarchy.
- Don't use color to convey information alone; always pair color changes with text labels, icons, or other visual cues to ensure accessibility and clarity.

Edit, then copy or download.