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

# Kikin · Design System

> Bold, earth-minded finance with a bright green pulse

**Theme:** dark · **Industry:** fintech · **Source:** https://www.kikin.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._

Kikin pairs a deep forest-green canvas and oversized condensed headlines with bright, sustainability-themed illustrations. Alternating cream and sky-blue sections give the long fintech homepage a clear, energetic rhythm.

## North star

Use forest-green and cream as the foundation, then let monumental uppercase type and vivid sustainability-led imagery carry the story.

## Overview

The visual identity is built around a forest-green canvas (#122315), softened by warm cream (#f3ede4) content bands and punctuated with vivid green calls to action (#55dd4a). Sky blue (#73d3eb) marks the partner-logo strip and funding audience sections, creating a strong contrast in the page’s long sequence of bands. Oversized uppercase Deacon headlines create an assertive display voice; Graphik keeps navigation, explanatory copy, and controls calm and legible. The hero centers its headline and CTA above a hand-drawn landscape illustration, while later sections alternate centered statements, split feature rows, and image-led blocks. Product screenshots and sustainability badges appear as supporting proof, not as the core brand palette. Hairline separators and lightly rounded controls structure content without introducing heavy card elevation. Generous section changes and tightly grouped text give the page a deliberate editorial rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Forest Ink | `#122315` | `--color-forest-ink` | brand | Primary canvas across the hero, calculator, ESG statement, closing CTA, and footer; also the dark text color on cream sections. |
| Warm Parchment | `#f3ede4` | `--color-warm-parchment` | surface | Main light section surface and high-contrast headline, body, and navigation text on dark bands. |
| Fresh Leaf | `#77e46e` | `--color-fresh-leaf` | accent | Measured lighter green seen around CTA button styling; a secondary green variation rather than the dominant accent. |
| Signal Green | `#55dd4a` | `--color-signal-green` | accent | Primary GET FUNDING button fill and selective headline emphasis against the dark hero canvas. |
| Clear Sky | `#73d3eb` | `--color-clear-sky` | surface | Large blue logo-cloud band and the WHO WE FUND audience sections. |
| Soft Olive | `#888d81` | `--color-soft-olive` | semantic | Subtle section rules, borders, and occasional muted text. |
| Sage Gray | `#999c91` | `--color-sage-gray` | neutral | Muted supporting copy on dark backgrounds. |
| Moss Shadow | `#566053` | `--color-moss-shadow` | neutral | Minor dark green-gray detail, appearing in select button, heading, and other sampled elements. |
| Link White | `#ffffff` | `--color-link-white` | neutral | Occasional link text on dark backgrounds; not the primary light surface. |

### Semantic aliases

`--color-canvas` → `#122315` (Forest Ink) · `--color-surface` → `#f3ede4` (Warm Parchment) · `--color-surface-2` → `#73d3eb` (Clear Sky) · `--color-text` → `#f3ede4` (Warm Parchment) · `--color-text-muted` → `#122315` (Forest Ink) · `--color-text-subtle` → `#999c91` (Sage Gray) · `--color-border` → `#888d81` (Soft Olive) · `--color-accent` → `#55dd4a` (Signal Green) · `--color-accent-2` → `#73d3eb` (Clear Sky) · `--color-on-accent` → `#122315` (Forest Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f3ede4` | `#122315` | 14.13:1 | AAA |
| `#f3ede4` | `#73d3eb` | 1.47:1 | fail |
| `#122315` | `#f3ede4` | 14.13:1 | AAA |
| `#122315` | `#73d3eb` | 9.59:1 | AAA |
| `#999c91` | `#122315` | 5.89:1 | AA |
| `#999c91` | `#f3ede4` | 2.4:1 | fail |
| `#999c91` | `#73d3eb` | 1.63:1 | fail |
| `#55dd4a` | `#122315` | 9.26:1 | AAA |
| `#55dd4a` | `#f3ede4` | 1.53:1 | fail |
| `#55dd4a` | `#73d3eb` | 1.04:1 | fail |

### Gradients

- `linear-gradient(rgba(18, 35, 21, 0), rgb(18, 35, 21))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Graphik | `--font-body` | webfont | 400, 500 | Body copy, navigation, buttons, and links | Inter |
| Deacon | `--font-display` | webfont | 900, 700 | Display headings and feature titles | Archivo Black |

- **Graphik:** Use restrained sans-serif text for legibility; navigation and buttons are uppercase, while body copy remains sentence case.
- **Deacon:** Very heavy, tightly tracked uppercase display lettering; compact line height and emphatic multi-line breaks define headline blocks.

### Type scale — Perfect Fifth (ratio ≈ 1.536, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 137px | 900 | 0.8 | -0.011em | uppercase | Deacon | Largest uppercase campaign statements and oversized brand headlines. |
| h1 | 101px | 900 | 0.8 | -0.015em | uppercase | Deacon | Primary hero headline and major top-level statements. |
| h2 | 72px | 900 | 0.8 | -0.021em | uppercase | Deacon | Section titles such as funding, ESG, and testimonial headings. |
| h3 | 57.5px | 700 | 0.85 | -0.026em | uppercase | Deacon | Feature-row headlines and secondary section headings. |
| h4 | 36px | 900 | 0.85 | -0.042em | uppercase | Deacon | Smaller emphatic headings and compact content titles. |
| body | 16px | 400 | 1.4 | 0 | — | Graphik | Paragraphs explaining the funding offer, features, and customer stories. |
| caption | 12px | 400 | 1.4 | 0 | — | Graphik | Compact supporting details, labels, and footer metadata. |
| button | 16px | 500 | 1.25 | 0 | uppercase | Graphik | Uppercase funding and signup call-to-action labels. |
| nav | 14px | 500 | 1.43 | 0.018em | uppercase | Graphik | Uppercase primary navigation labels and menu items. |
| link | 16px | 400 | 1.4 | 0 | — | Graphik | Inline links, FAQs, and supporting text links. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 5, 6, 8, 9, 10, 12, 15, 16, 20, 24, 32, 40, 48, 80 px.
- Section rhythm 40px · element gap 6px · card padding — · max content width 1360px.

The page uses a wide, centered desktop composition, with measured content capped at 1360px. A single-column hero gives way to broad full-width color bands; feature rows pair text with large product imagery, and later content alternates editorial blocks, audience panels, testimonials, and FAQ columns. The overall density is compact, but major background changes and generous section breaks keep the long page readable. Headings are centered in the hero and selected statements, with left alignment used for content-led sections.

## Shape & elevation

- Radius: button `10px` · xs `8px` · sm `10px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat: large color fields and hairline separators organize the page instead of elevated cards or pronounced shadows. Buttons have softly rounded corners, while the hero illustration and image blocks provide the strongest layered effect. Keep outlines restrained and use contrast, spacing, and section bands to establish hierarchy.

## Imagery

The hero and final CTA use colorful hand-drawn environmental landscapes, with flat outlines, forests, water, mountains, and warm sunset details. Product examples appear as large landscape-oriented screenshots within cream feature rows. Sustainability marks and customer imagery add evidence and texture; they sit within the page’s brand system rather than defining its core colors.

## Components

### Primary CTA

Bright green GET FUNDING button with dark text and a rounded rectangular shape; use the measured 10px radius where reproducing this control.

### Hero

Centered, oversized uppercase two-line headline with the second line in green, concise supporting copy, and a centered funding CTA above an illustrated landscape.

### Navigation

Compact horizontal header with cream uppercase links on the dark canvas, a restrained outlined login control, and a green funding button.

### Feature row

Cream background, bold numbered feature title and short explanation alongside a wide product image; thin dividers separate repeated rows.

### Color-band audience block

Sky-blue section combining a large funding audience image-led panel with adjacent eligibility statements and fine vertical separators.

### FAQ

Cream two-column area with a bold title and category labels on one side, question rows and plus controls on the other.

### Footer

Dark closing area with contact details, company information, and a compact set of navigation and social links.

### Measured component styles

- **Primary button** (“GET FUNDING”): background #55dd4a · text #122315 · border 3px solid · radius 10px · padding 16px 24px 15px 24px · 500 16px Graphik · uppercase
- **Secondary button** (“CALCULATE YOUR FUNDING”): background #f3ede4 · text #122315 · border 1px solid #122315 · radius 8px · padding 0px 16px · 400 14px Arial
- **Link** (“How it works”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Graphik
- **Navigation item** (“HOW IT WORKS ▾ WHY KIKIN PRICING FOR SUP”): transparent background · text #f3ede4 · radius 0px · padding 0px · 400 16px Graphik

## Do

- Use #122315 as the principal dark canvas.
- Reserve #f3ede4 for light editorial sections and reverse text.
- Make Deacon-style uppercase display headings the strongest typographic element.
- Use #55dd4a selectively for primary calls to action and emphasis.
- Alternate broad cream and sky-blue bands to pace long content.
- Pair product screenshots with short, clear benefit copy.

## Don't

- Do not replace the forest-green and cream foundation with a generic white SaaS palette.
- Do not use small, light display headlines where the page calls for bold uppercase type.
- Do not treat illustration colors as the core interface palette.
- Do not add heavy shadows or stacked elevated cards.
- Do not make every section green; preserve the cream and blue contrast bands.
- Do not overdecorate navigation or supporting copy.

## Agent prompt

Build a new fintech page in Kikin’s visual language. Use Forest Ink (#122315) as the principal canvas, Warm Parchment (#f3ede4) for light content bands, Clear Sky (#73d3eb) for selected section blocks, and Signal Green (#55dd4a) for primary CTAs. Set major headings in a heavy, tightly tracked, uppercase display face similar to Deacon; use a clean Graphik-like sans serif for body copy, links, and navigation. Favor wide, editorial section bands, a centered hero, image-led feature rows, restrained separators, and softly rounded buttons. Use sustainability-themed hand-drawn landscapes or product imagery as supporting content. Keep the interface mostly flat, the copy legible, and the strongest emphasis on headline, CTA, and section contrast.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy on a dark canvas, with CTA above a full-width illustrated landscape. | primary funding CTA, concise value proposition | uppercase display headline, green emphasis, dark canvas, illustrated landscape |
| 2 | other | A continuation of the full-width dark hero and landscape composition. | visual brand reinforcement | dark background, illustrated scenery |
| 3 | logo-cloud | Full-width sky-blue strip with a horizontal run of partner marks. | partner credibility | sky-blue band, logo row |
| 4 | feature-split | Centered headline and copy on cream, followed by a funding form and CTA. | funding form, primary CTA | cream surface, centered display title, green button |
| 5 | feature-split | Cream feature row with text on the left and wide product imagery on the right. | benefit explanation | number marker, bold title, product screenshot, hairline divider |
| 6 | feature-split | Repeated cream split row with copy and a landscape product screenshot. | benefit explanation | number marker, bold title, product screenshot, hairline divider |
| 7 | feature-split | Repeated cream split row with explanatory text and a product interface image. | AI-led assessment explanation | number marker, uppercase title, product screenshot, hairline divider |
| 8 | feature-split | Final cream feature row, text paired with a wide product screenshot. | non-dilutive funding benefit | number marker, uppercase title, product screenshot, hairline divider |
| 9 | product-showcase | Dark section with a large left-aligned heading, explanatory copy, and funding tool imagery. | funding calculation, explainer link | dark canvas, oversized title, green CTA |
| 10 | feature-split | Sky-blue image-led section with a large heading and supporting description. | audience definition | blue band, large image, bold display title |
| 11 | feature-grid | Three adjacent sky-blue eligibility columns divided by fine rules. | eligibility scan | three-column grid, small icons, bold uppercase labels |
| 12 | gallery | Dark statement centered among scattered sustainability badges and marks. | ESG incentive explanation | dark canvas, centered headline, badge collage |
| 13 | testimonials | Editorial testimonial area with a large title, customer quote, attribution, and navigation controls. | testimonial carousel controls | customer quote, bold heading, brand marks |
| 14 | faq | Cream two-column FAQ with categories on the left and question rows on the right. | FAQ categories, expandable questions | cream surface, plus controls, thin dividers |
| 15 | cta | Centered signup headline and button layered over a full-bleed illustrated landscape. | signup CTA | dark canvas, uppercase display type, nature illustration |
| 16 | footer | Dark two-column footer with contact details, company metadata, and navigation links. | contact link, footer navigation | dark canvas, compact links, fine legal divider |

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