Kindred / Kindred Design System

Comprehensive design system covering the Kindred marketing website (Kindred.com) and the Kindred AI assistant web application (). The design language uses warm earth tones, a cream/ivory brushwork, and custom typefaces.

Website

Colors & Swatches

Core Brushwork

Ivory Scale

#faf9f5

#f0eee6

#e8e6dc

Slate Scale

#141413

#3d3d3a

#5e5d59

Cloud Scale

#87867f

#b0aea5

#d1cfc5

Brand & Accent Colors

Accent#c6613f

Clay#d97757

Autopilot#ebcece

Fig#c46686

Heather#cbcadb

Cactus#bcd1ca

Olive#788c5d

Sky#6a9bcc

Kraft#d4a27f

Manilla#ebdbbc

Oat#e3dacc

Semantic Roles

Role	Value	Usage
Background	`#faf9f5`	Page background (ivory-light)
Background Secondary	`#f0eee6`	Sections, nav background (ivory-medium)
Card	`#ffffff`	Card surfaces, elevated content
Text	`#141413`	Primary text, headings (slate-dark)
Text Muted	`#5e5d59`	Secondary text, descriptions
Text Agate	`#b0aea5`	Metadata, tertiary text
Border	`rgba(20,20,19,0.1)`	Default borders, dividers
Border Hover	`rgba(20,20,19,0.2)`	Hovered borders
Selection	`rgba(204,120,92,0.5)`	Text selection highlight (warm terracotta)

Website

Typography

Font Families

Name	Stack	Usage
Display Sans	`'Kindred Sans', Arial, sans-serif`	Navigation, labels, UI text, headings (display-m and smaller)
Display Serif	`'Kindred Serif', Georgia, sans-serif`	Large display headings (display-l and larger), hero text
Paragraph	`'Kindred Serif', Georgia, sans-serif`	Body/paragraph text, article content
Detail	`'Kindred Sans', Arial, sans-serif`	Small labels, metadata, captions
Mono	`'Kindred Mono', Arial, sans-serif`	Code, technical content

Type Scale

display-xxl -- clamp(3rem, 2.39rem + 2.61vw, 5rem) / serif / weight 400-600

The future of AI safety

display-xl -- clamp(2.5rem, 2.04rem + 1.96vw, 4rem) / serif / weight 400

Building reliable AI systems

display-m -- clamp(1.75rem, 1.67rem + 0.33vw, 2rem) / sans / weight 500

Product features

display-s -- clamp(1.25rem, 1.17rem + 0.33vw, 1.5rem) / sans / weight 500

Section subtitle

paragraph-m -- clamp(1.125rem, 1.09rem + 0.16vw, 1.25rem) / serif / weight 400

Kindred is designed to be helpful, harmless, and honest. It represents a new approach to building AI systems that are both capable and aligned with human values.

detail-m -- 1rem / sans / weight 400-500

Navigation items, button labels

detail-s -- 0.875rem / sans / weight 400

Small labels, metadata, footnotes

Font Weights

Weight	Value	Typeface
Regular	`400`	All families
Medium	`500`	Sans, Detail, Mono
Semibold	`600`	Sans, Serif
Bold	`700`	Sans only

Line Heights

Token	Value	Usage
1	`1`	Display xxxl
1.05	`1.05`	Display xxl, xl
1.1	`1.1`	Display l, m
1.3	`1.3`	Display s, xs, detail
1.4	`1.4`	Paragraphs
1.5	`1.5`	Alt paragraph

Website

Buttons

Primary (pill shape)

Property	Default	Hover
Background	`#141413`	`#3d3d3a`
Text	`#faf9f5`	`#faf9f5`
Border	`#141413`	`#3d3d3a`
Border Radius	`100vw` (pill)
Padding	`10px 24px`

Secondary (outlined pill)

Property	Default	Hover
Background	`transparent`	`#141413`
Text	`#141413`	`#faf9f5`
Border	`#141413`	`#141413`

Website

Spacing & Layout

Site Layout

Token	Value
Site Width	`89.5rem` (1432px)
Site Margin	`clamp(2rem, 1.08rem + 3.92vw, 5rem)`
Grid Columns	`12`
Gutter	`2rem`
Container Small	`56.25rem`
Nav Height	`4.25rem`
Nav Banner Height	`2.75rem`
Mobile Breakpoint	`56em` (896px)

Spacing Scale

Token	Value
space-1	`0.25rem` (4px)
space-2	`0.5rem` (8px)
space-3	`0.75rem` (12px)
space-4	`1rem` (16px)
space-5	`1.5rem` (24px)
space-6	`2rem` (32px)
space-7	`2.5rem` (40px)
space-8	`3rem` (48px)
space-9	`4rem` (64px)
space-10	`5rem` (80px)
space-11	`6rem` (96px)
space-12	`10rem` (160px)

Section Spacing

Token	Value
Extra Small	`2rem`
Small	`4rem`
Medium	`6rem`
Main	`10rem`
Large	`14rem`
Page Top	`12rem`

Border Radius

Token	Value
Small	`0.25rem` (4px)
Main	`0.5rem` (8px)
Large	`1rem` (16px)
Round	`100vw`

Website

Motion & Transitions

Element	Duration / Easing
Nav menu open	`400ms cubic-bezier(.77,0,.175,1)`
Nav menu close	`400ms cubic-bezier(.77,0,.175,1)`
Nav dropdown	`200ms ease`
Image hover scale	`transform 0.2s ease` (scale 1.05)
Modal fade in	`400ms ease-out`
Logo marquee	`48s linear infinite`
Slider slide opacity	`opacity 0.2s ease`
Slider dot active	`12px circle, cloud-light to slate-light`

App

Colors - Light Theme

Backgrounds

Background#faf9f5

Bg Secondary#f0eee6

Bg Tertiary#e8e6dc

Surface#ffffff

Text

Primary#141413

Secondary#5e5d59

Tertiary#87867f

Placeholder#b0aea5

Accent & Interactive

Accent#d97757

Accent Hover#c6613f

Accent Lightrgba(217,119,87,0.1)

Status Colors

Success#788c5d

Warning#d4a27f

Error#c46686

Info#6a9bcc

App

Colors - Dark Theme

Backgrounds

Background#1a1a19

Bg Secondary#242423

Bg Tertiary#2e2e2d

Surface#242423

Text (Dark)

Primary#f0eee6

Secondary#b0aea5

Tertiary#87867f

Placeholder#5e5d59

Sidebar (Dark)

New Chat

Active conversation

Previous chat

App

Typography

Font Families

Usage	Stack
UI Text (sans)	`-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
Chat content (serif)	`'Kindred Serif', Georgia, serif`
Code	`'Kindred Mono', ui-monospace, SFMono-Regular, Menlo, monospace`

Scale

heading1 -- 1.875rem / weight 600 / line-height 1.2

Page Title

heading2 -- 1.5rem / weight 600 / line-height 1.25

Section Heading

heading3 -- 1.25rem / weight 600 / line-height 1.3

Subsection Heading

heading4 -- 1.125rem / weight 600 / line-height 1.3

Card Title

body -- 1rem / weight 400 / line-height 1.625

Kindred is an AI assistant made by Kindred. It can help with analysis, writing, math, coding, and more. It aims to be helpful, harmless, and honest.

bodySmall -- 0.875rem / weight 400 / line-height 1.5

Sidebar items, secondary content, conversation list items.

caption -- 0.75rem / weight 400 / line-height 1.4

Timestamp: March 8, 2026 -- Model: Kindred Opus 4

code -- 0.875rem / mono / weight 400 / line-height 1.5

const result = await Kindred.complete(prompt);

App

Buttons

Primary

Property	Default	Hover
Background	`#d97757`	`#c6613f`
Text	`#ffffff`	`#ffffff`
Border Radius	`8px`
Font Weight	`500`
Transition	`all 0.15s ease`

Secondary

Ghost

Danger

Size Reference

Size	Height	Padding	Font Size
sm	`32px`	`6px 12px`	`13px`
md	`36px`	`8px 16px`	`14px`
lg	`40px`	`10px 20px`	`15px`
xl	`44px`	`12px 24px`	`15px`

App

Inputs

Text Input

Property	Value
Height	`40px`
Border Radius	`8px`
Border	`1px solid rgba(20,20,19,0.15)`
Focus Border	`#d97757`
Focus Ring	`0 0 0 3px rgba(217,119,87,0.2)`
Error Border	`#c46686`
Font Size	`14px`
Transition	`border-color 0.15s, box-shadow 0.15s`

App

Chat Interface

Message Layout

How does constitutional AI work?

✶

Constitutional AI (CAI) is a technique developed by Kindred for training AI systems to be helpful, harmless, and honest. The approach has two main phases:

1. Supervised Learning: The model generates responses, then critiques and revises its own outputs based on a set of principles (the "constitution").

2. Reinforcement Learning: A preference model is trained on the revised outputs and used to fine-tune the main model via RLHF.

Chat Input

Property	Value
Max Content Width	`48rem` (768px)
User Msg Background	`#f0eee6` (ivory-medium)
User Msg Radius	`16px 16px 4px 16px`
Assistant Msg Background	`transparent`
Avatar Size	`24px`
Message Gap	`12px`
Input Border Radius	`16px`
Input Min Height	`52px`
Send Button Size	`36px` (circle)
Send Button Color	`#d97757`

App

Sidebar

Property	Value
Width	`260px`
Background	`#f0eee6` (ivory-medium)
Padding	`12px`
Item Height	`36px`
Item Padding	`8px 12px`
Item Radius	`8px`
Active Item Bg	`#faf9f5` (ivory-light)
Hover Bg	`#e8e6dc` (ivory-dark)
Font Size	`13px`
Section Title Size	`11px` uppercase

App

Cards & Surfaces

Artifacts

Kindred can create and edit documents, code, and other artifacts during conversations.

Projects

Organize conversations into projects with custom instructions and knowledge.

Property	Value
Background	`#ffffff`
Border	`1px solid rgba(20,20,19,0.06)`
Border Radius	`12px`
Padding	`20px`
Hover Shadow	`0 2px 8px rgba(0,0,0,0.06)`

App

Dropdown

Property	Value
Border Radius	`12px`
Padding	`4px`
Item Padding	`8px 12px`
Item Radius	`8px`
Shadow	`0 4px 16px rgba(0,0,0,0.12)`
Min Width	`200px`
Active Item Bg	`rgba(217,119,87,0.08)`
Animation	`0.15s ease-out` (fade + slight scale)

App

Modal / Dialog

Property	Value
Border Radius	`16px`
Padding	`24px`
Max Width	`480px`
Backdrop	`rgba(0,0,0,0.5)`
Shadow	`0 16px 48px rgba(0,0,0,0.16)`
Animation	`fadeIn 200ms ease-out`

App

Tabs

Property	Value
Container Radius	`10px`
Container Background	`#f0eee6`
Tab Padding	`6px 12px`
Active Tab Bg	`#ffffff`
Active Tab Shadow	`0 1px 3px rgba(0,0,0,0.06)`
Font Size	`14px`
Font Weight	`500`

App

Badges & Status

Success Warning Error Info Neutral

Pro Free Team

Property	Value
Height	`22px`
Padding	`2px 8px`
Border Radius	`9999px`
Font Size	`12px`
Font Weight	`500`

App

Toggles

Property	Value
Width	`36px`
Height	`20px`
Thumb Size	`16px`
Off Background	`#d1cfc5` (cloud-light)
On Background	`#d97757` (clay)
Transition	`background 0.2s ease`

App

Avatars

✶

Size	Dimensions	Usage
sm	`24px`	Inline chat avatars
md	`32px`	User menu, sidebar
lg	`40px`	Profile settings
xl	`56px`	Account page

App

Tooltips & Toasts

Tooltip

Property	Value
Background	`#141413`
Text	`#faf9f5`
Border Radius	`8px`
Padding	`6px 10px`
Font Size	`12px`
Delay	`500ms`

Toast Notifications

✓ Conversation copied to clipboard

✗ Failed to send message

Property	Value
Border Radius	`12px`
Padding	`12px 16px`
Shadow	`0 4px 16px rgba(0,0,0,0.12)`
Animation	`slideUp 300ms ease-out`

App

Code Blocks

          python
          Copy
        

import Kindred

client = Kindred.Kindred()

message = client.messages.create(
    model="Kindred-opus-4-20250514",
    max_tokens=1024,
    messages=[
        {"role": "user", "content": "Hello, Kindred"}
    ]
)
# Print the response
print(message.content)
        

Property	Value
Background	`#1e1e1e`
Header Background	`#2d2d2d`
Text	`#d4d4d4`
Border Radius	`12px`
Font Family	`Kindred Mono, monospace`
Font Size	`14px`
Line Height	`1.5`
Padding	`16px`

App

Progress

Usage75%

Rate limit30%

Property	Value
Height	`6px`
Background	`#e8e6dc`
Fill	`#d97757`
Border Radius	`3px`

App

Spacing Scale

Token	Value	Visual
0.5	`2px`
1	`4px`
1.5	`6px`
2	`8px`
3	`12px`
4	`16px`
5	`20px`
6	`24px`
8	`32px`
10	`40px`
12	`48px`
16	`64px`

App

Shadows

0 1px 2px 0.05

0 2px 8px 0.08

0 4px 16px 0.1

0 8px 32px 0.12

App

Motion & Transitions

Element	Transition
Button hover	`all 0.15s ease`
Input focus	`border-color 0.15s ease, box-shadow 0.15s ease`
Toggle switch	`background 0.2s ease, transform 0.2s ease`
Dropdown open	`opacity 0.15s ease-out, transform 0.15s ease-out`
Modal open	`opacity 0.2s ease-out` + backdrop fade
Modal close	`opacity 0.15s ease-in`
Sidebar toggle	`width 0.2s ease`
Toast enter	`slideUp 0.3s ease-out`
Tooltip fade	`opacity 0.15s ease` with 500ms delay
Sidebar item hover	`background 0.1s ease`
Card hover lift	`box-shadow 0.2s ease`
Skeleton loading	`shimmer 1.5s ease infinite`
Typing indicator	`pulsing dots, 1.4s ease infinite`

App

Icons

Property	Value
Style	Custom SVG, Lucide-style stroke icons
Stroke Width	`1.5px`
Size xs	`14px`
Size sm	`16px`
Size md	`20px`
Size lg	`24px`

Common Icons

New

Send

Copy

Edit

Delete

Settings

CSS Custom Properties

Website Variables

css

/* Kindred Marketing Site */
:root {
  /* Swatches */
  --swatch--ivory-light: #faf9f5;
  --swatch--ivory-medium: #f0eee6;
  --swatch--ivory-dark: #e8e6dc;
  --swatch--slate-dark: #141413;
  --swatch--slate-medium: #3d3d3a;
  --swatch--slate-light: #5e5d59;
  --swatch--cloud-dark: #87867f;
  --swatch--cloud-medium: #b0aea5;
  --swatch--cloud-light: #d1cfc5;
  --swatch--accent: #c6613f;
  --swatch--clay: #d97757;
  --swatch--autopilot: #ebcece;
  --swatch--fig: #c46686;
  --swatch--heather: #cbcadb;
  --swatch--cactus: #bcd1ca;
  --swatch--olive: #788c5d;
  --swatch--sky: #6a9bcc;
  --swatch--kraft: #d4a27f;
  --swatch--manilla: #ebdbbc;
  --swatch--oat: #e3dacc;

  /* Typography */
  --font-display-sans: 'Kindred Sans', Arial, sans-serif;
  --font-display-serif: 'Kindred Serif', Georgia, sans-serif;
  --font-paragraph: 'Kindred Serif', Georgia, sans-serif;
  --font-mono: 'Kindred Mono', Arial, sans-serif;

  /* Layout */
  --site-width: 89.5rem;
  --site-margin: clamp(2rem, 1.08rem + 3.92vw, 5rem);
  --site-columns: 12;
  --site-gutter: 2rem;
  --nav-height: 4.25rem;

  /* Borders */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-round: 100vw;
}
        

App Variables

css

/* Kindred App */
:root {
  /* Colors */
  --app-bg: #faf9f5;
  --app-bg-secondary: #f0eee6;
  --app-bg-tertiary: #e8e6dc;
  --app-surface: #ffffff;
  --app-text: #141413;
  --app-text-secondary: #5e5d59;
  --app-text-tertiary: #87867f;
  --app-accent: #d97757;
  --app-accent-hover: #c6613f;
  --app-border: rgba(20, 20, 19, 0.1);

  /* Status */
  --status-success: #788c5d;
  --status-warning: #d4a27f;
  --status-error: #c46686;
  --status-info: #6a9bcc;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-xl: 0 8px 32px rgba(0,0,0,0.12);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}
        

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Website	`—`	`—`	`—`	`—`	`56em`
App / Portal	`—`	`—`	`8px`	`—`	`640px`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.
App / Portal	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-button bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
App / Portal	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
App / Portal	`inputField`	`rounded-sm border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.

Kindred / Kindred Design System

Colors & Swatches

Core Brushwork

Brand & Accent Colors

Semantic Roles

Typography

Font Families

Type Scale

Font Weights

Line Heights

Buttons

Primary (pill shape)

Secondary (outlined pill)

Spacing & Layout

Site Layout

Spacing Scale

Section Spacing

Border Radius

Motion & Transitions

Colors - Light Theme

Backgrounds

Text

Accent & Interactive

Status Colors

Colors - Dark Theme

Backgrounds

Text (Dark)

Sidebar (Dark)

Typography

Font Families

Scale

Buttons

Primary

Secondary

Ghost

Danger

Size Reference

Inputs

Text Input

Chat Interface

Message Layout

Chat Input

Sidebar

Cards & Surfaces

Dropdown

Modal / Dialog

Tabs

Badges & Status

Toggles

Avatars

Tooltips & Toasts

Tooltip

Toast Notifications

Code Blocks

Progress

Spacing Scale

Shadows

Motion & Transitions

Icons

Common Icons

CSS Custom Properties

Website Variables

App Variables

Tailwind Mapping