---
title: "Kindsight design system"
variant: extended
source: https://kindsight.io/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/kindsight-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Kindsight · Design System

> Warm editorial typography meets grounded fundraising intelligence.

**Theme:** light · **Industry:** saas · **Source:** https://kindsight.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Kindsight pairs expressive editorial typography with a calm, earthy palette to make fundraising software feel human and approachable. A dark, product-led hero gives way to spacious proof points, feature stories, solution cards, and a grounded footer.

## North star

Use warm editorial contrast—serif storytelling over earthy surfaces, with lime and terracotta reserved for clear actions and emphasis.

## Overview

The visual identity balances a warm off-white canvas with an olive-dark hero and footer, creating a clear transition from calm reading space to high-impact brand moments. Citrus lime provides the hero headline and a key CTA accent; muted terracotta marks the primary demo action. Times Now brings an expressive, lightly italic editorial quality to large headings, while Founders Grotesk keeps navigation, body copy, and controls restrained and readable. The hero uses a two-column composition: oversized headline and supporting copy on the left, layered fundraising-product interface imagery on the right. Below, generous blank space and centered proof content slow the pace before feature narratives and compact card groups. Cards are pale, softly rounded, and visually quiet rather than heavily elevated. The lower CTA band shifts to a light grey-beige, then the dark olive footer closes the page with reversed text and a newsletter form.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Cream | `#faf5f0` | `--color-gallery-cream` | surface | Main page canvas, navigation background, and much of the long-form content surface. |
| Clay Signal | `#de7653` | `--color-clay-signal` | accent | Filled primary demo buttons and their matching outlines. |
| Soft Ink | `#0e0f0a` | `--color-soft-ink` | neutral | Default heading, body, navigation, link, and button text. |
| Citrus Lift | `#e1f079` | `--color-citrus-lift` | accent | Hero headline, announcement strip, and high-visibility secondary CTA. |
| Olive Dusk | `#3d4128` | `--color-olive-dusk` | brand | Large hero band and footer; anchors the page with a deep, earthy contrast. |
| Porcelain | `#fefffa` | `--color-porcelain` | surface | Solution and feature cards, plus light interface-like surfaces. |
| Forest Line | `#304128` | `--color-forest-line` | semantic | Outlined secondary controls and restrained dark green text accents. |
| Stone Veil | `#e5e1d6` | `--color-stone-veil` | surface | Pale closing CTA section band. |
| Burnt Ember | `#c04a22` | `--color-burnt-ember` | accent | Rare button accent in measured styles; not a dominant page color. |

### Semantic aliases

`--color-canvas` → `#faf5f0` (Gallery Cream) · `--color-surface` → `#3d4128` (Olive Dusk) · `--color-surface-2` → `#fefffa` (Porcelain) · `--color-surface-3` → `#e5e1d6` (Stone Veil) · `--color-text` → `#0e0f0a` (Soft Ink) · `--color-text-muted` → `#faf5f0` (Gallery Cream) · `--color-border` → `#304128` (Forest Line) · `--color-accent` → `#de7653` (Clay Signal) · `--color-accent-2` → `#e1f079` (Citrus Lift) · `--color-accent-3` → `#c04a22` (Burnt Ember) · `--color-on-accent` → `#0e0f0a` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0e0f0a` | `#faf5f0` | 17.76:1 | AAA |
| `#0e0f0a` | `#3d4128` | 1.82:1 | fail |
| `#0e0f0a` | `#fefffa` | 19.15:1 | AAA |
| `#0e0f0a` | `#e5e1d6` | 14.73:1 | AAA |
| `#faf5f0` | `#3d4128` | 9.76:1 | AAA |
| `#faf5f0` | `#fefffa` | 1.08:1 | fail |
| `#faf5f0` | `#e5e1d6` | 1.21:1 | fail |
| `#de7653` | `#faf5f0` | 2.84:1 | fail |
| `#de7653` | `#3d4128` | 3.44:1 | AA-large |
| `#de7653` | `#fefffa` | 3.06:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Founders Grotesk | `--font-body` | webfont | 300, 400, 500, 200 | Navigation, body copy, buttons, captions, and interface text. | DM Sans |
| Times Now | `--font-display` | webfont | 200, 300 | Display headings and large editorial section titles. | Cormorant Garamond |

- **Founders Grotesk:** Light weights keep small text airy; controls and links use measured medium weights without forced uppercase.
- **Times Now:** Use very light weights, tight negative tracking, compact leading, and occasional italic emphasis.

### Type scale — Perfect Fifth (ratio ≈ 1.461, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 200 | 0.78 | -0.05em | — | Times Now | Oversized hero headline and other high-impact display moments. |
| h1 | 80px | 200 | 0.9 | -0.04em | — | Times Now | Primary hero heading and major page-level statements. |
| h2 | 60px | 200 | 0.84 | -0.04em | — | Times Now | Section headings for proof, features, and solutions. |
| h3 | 50px | 200 | 1 | -0.064em | — | Times Now | Feature and supporting editorial headings. |
| h4 | 40px | 300 | 0.9 | -0.017em | — | Times Now | Card titles and smaller section subheads. |
| body | 18px | 300 | 1.4 | -0.017em | — | Founders Grotesk | Explanatory paragraphs and feature descriptions. |
| caption | 14px | 300 | 2 | 0 | — | Founders Grotesk | Navigation, labels, metadata, and compact supporting copy. |
| button | 18px | 300 | 1.4 | 0 | — | Founders Grotesk | Demo and in-page action labels. |
| nav | 14px | 300 | 2 | 0 | — | Founders Grotesk | Small navigation and footer link text. |
| link | 24px | 500 | 1.17 | -0.008em | — | Founders Grotesk | Prominent text links such as solution actions and sector links. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 7, 8, 9, 10, 12, 14, 15, 16, 18, 20, 21, 24, 25, 27, 28, 32 px.
- Section rhythm 40px · element gap 12px · card padding 52px · max content width 1398px.

The page uses a broad centered desktop composition within a measured maximum width of 1398px. A horizontal announcement strip sits above the navigation, followed by a full-width, two-column hero. Most content sections return to the warm canvas, with centered headings or split feature narratives and occasional three-column card groups. The overall density is compact in controls and cards but spacious between major content moments, with especially generous open space after the early proof section. The footer uses multiple aligned link columns.

## Shape & elevation

- Radius: button `10px` · input `9999px` · card `24px` · xs `10px` · sm `18px` · md `24px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

The visual system is mostly flat: strong section color changes create hierarchy instead of shadows. Cards use pale porcelain surfaces with generous internal breathing room and rounded corners. Keep borders limited to outlined buttons and fine interface details; layered hero panels provide depth through overlap, not heavy effects.

## Imagery

The hero layers clean product-dashboard screenshots, donor-profile panels, charts, and a human photograph into an overlapping collage; keep the product UI crisp and the person naturally framed. Trust badges and customer logos appear as supplied graphic assets, so preserve their intrinsic colors rather than treating them as brand palette. Later sections rely more on cards and text than decorative imagery.

## Components

### Announcement strip

A lime band above the navigation with centered short news copy and a compact outlined action.

### Primary demo button

Terracotta fill, dark text, measured 10px radius, and a substantial horizontal button footprint.

### Hero composition

Olive-dark full-width section with lime serif headline and a layered product-dashboard and donor imagery collage.

### Solution card

Porcelain card with 24px radius, generous measured padding, dark text, and a prominent action link.

### Feature story

Editorial heading and concise explanatory copy paired with product or supporting imagery on a light canvas.

### Newsletter form

Footer email field presented as a light pill with a simple arrow action against the dark olive surface.

### Footer link columns

Multiple compact groups of light-colored navigation links arranged across the olive footer.

### Measured component styles

- **Primary button** (“Get a Demo”): background #de7653 · text #0e0f0a · border 2px solid #de7653 · radius 10px · padding 14px 35px 7.2px 35px · 300 18px Founders Grotesk
- **Secondary button** (“See Kindsight in Action”): background #e1f079 · text #0e0f0a · border 2px solid #e1f079 · radius 10px · padding 14px 35px 7.2px 35px · 300 18px Founders Grotesk
- **Link** (“See it in action”): transparent background · text #0e0f0a · radius 0px · padding 0px · 500 24px Founders Grotesk
- **Input**: background #faf5f1 · text #24280f · radius 51px · padding 0px 15px · 300 18px Founders Grotesk
- **Card** (“Fundraising Platform The only fundraisin”): background #fefffa · text #0e0f0a · radius 24px · padding 60px 54px 40px 54px · 300 16px Founders Grotesk
- **Navigation item** (“iWave”): transparent background · text #faf5f1 · radius 0px · padding 0px · 300 14px Founders Grotesk

## Do

- Keep the warm cream canvas dominant across content sections.
- Use the dark olive surface for the hero and footer anchors.
- Set large storytelling headings in a delicate editorial serif.
- Reserve lime for high-visibility emphasis and select calls to action.
- Use terracotta for the primary demo action.
- Layer product screenshots with restraint in the hero.
- Let open space separate major content chapters.

## Don't

- Do not introduce gradients or decorative shadows.
- Do not turn every section into a dark band.
- Do not use lime as a general body-text color.
- Do not crowd the hero collage with extra decoration.
- Do not make card surfaces visually heavy or densely bordered.
- Do not replace the editorial serif hierarchy with uniform sans-serif headings.

## Agent prompt

Build a new Kindsight-style page using a warm, editorial SaaS visual language. Use Gallery Cream (#faf5f0) as the main canvas, Olive Dusk (#3d4128) for major anchor bands, and Porcelain (#fefffa) for quiet cards. Set expressive headlines in a light Times Now-like serif with tight tracking; use a Founders Grotesk-like sans for readable body copy, navigation, and controls. Use Citrus Lift (#e1f079) for selective emphasis and Clay Signal (#de7653) for the primary demo action, with Soft Ink (#0e0f0a) text. Compose content in a broad centered layout, pairing a strong editorial heading with product imagery where useful. Favor open section rhythm, softly rounded cards, flat surfaces, and image overlap over shadows. Keep CTAs clear and avoid introducing unmeasured colors or decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero on a full-width dark olive band; copy left, layered product imagery right. | Primary action, Product credibility | Lime serif headline, Dashboard collage, Dark olive background |
| 2 | logo-cloud | Centered heading and trust badges on the warm canvas. | Social proof | Centered serif heading, Badge artwork |
| 3 | feature-split | Light-background feature story with a single-column section structure and supporting imagery. | Feature explanation | Editorial heading, Product imagery |
| 4 | feature-split | Light feature section pairing narrative content with imagery. | Feature explanation | Serif headline, Product imagery |
| 5 | feature-split | Light feature story with copy, imagery, and an inline link. | Feature explanation, Further reading | Editorial heading, Text link, Product imagery |
| 6 | product-grid | Centered section heading above three solution cards. | Compare solutions, Explore product | Three-column cards, Porcelain surfaces, Action links |
| 7 | logo-cloud | Centered heading above a broad row of customer logos. | Customer proof | Logo strip, Centered title |
| 8 | testimonials | Single-column testimonial section on the light canvas. | Customer quote, Trust building | Large quote treatment, Attribution |
| 9 | category-nav | Centered introduction above three sector links or cards. | Choose a sector | Three-column grouping, Large text links |
| 10 | feature-grid | Centered heading with three explanatory cards arranged in columns. | Value explanation | Three-column cards, Editorial card headings |
| 11 | cta | Centered CTA on a contrasting pale stone section band. | Conversion action | Centered heading, Text link |
| 12 | footer | Dark olive footer with newsletter area and multiple link columns. | Email signup, Site navigation | Pill email input, Light links, Footer columns |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--color--off-white: #FEFFFA;
--wp--preset--color--off-black: #0E0F0A;
--wp--preset--color--grey: #E5E1D6;
--wp--preset--color--grey-safe: #7A6C5F;
--wp--preset--color--lime-sunny: #E1F079;
--wp--preset--color--lime-fade: #EBF0C8;
--wp--preset--color--lime-white: #F9FFCC;
--wp--preset--color--green-olive: #3D4128;
--wp--preset--color--green-olive-500: #42451E;
--wp--preset--color--green-olive-deep: #2A2E14;
--wp--preset--color--green-olive-deeper: #24280F;
--wp--preset--color--green-light: #606432;
--wp--preset--color--green-fade: #AAB569;
--wp--preset--color--cream-off: #E6E1D7;
--wp--preset--color--cream-fade: #FAF5F0;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/kindsight-io