Skip to content
DesignMunkDesignMunk Submit a site

Kikin

kikin.io
Financing the future
Finance Fintech Webflow Homepage Deacon Graphik
Share Visit site
kikin.io DESKTOP · 1440
Kikin

AI Breakdown

Design export

---
version: alpha
name: Kikin
description: Financing the future
colors:
  primary: "#f3ede4"
  secondary: "#3a8735"
  tertiary: "#55dd4a"
  neutral: "#122315"
  border: "#374151"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Deacon
    fontSize: 122.9px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: -0.012em
  headline-md:
    fontFamily: Deacon
    fontSize: 75.6px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-sm:
    fontFamily: Deacon
    fontSize: 56.7px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: -0.026em
  headline-xs:
    fontFamily: Deacon
    fontSize: 37.8px
    fontWeight: 700
    lineHeight: 1.19
    letterSpacing: -0.04em
  body-md:
    fontFamily: Graphik
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  md: 10px
spacing:
  xs: 6px
  sm: 20px
  md: 36px
  lg: 80px
  xl: 148px
components:
  button-primary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 14px 24px
    height: 50px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 14px 24px
    height: 50px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Kikin: Dark Pine Canvas With Neon Green Headlines

## Overview

Kikin is a dark-mode fintech interface aimed at UK SMEs seeking fast, flexible working-capital. The tone is confident and friendly, more outdoorsy than corporate. Layouts are spacious, with generous section paddings and large, legible type. Accents are used sparingly to signal action and emphasis; most surfaces remain pine-dark for focus and contrast.

## Colors

- **primary (#F3EDE4):** Cream text on dark surfaces and default link color.
- **secondary (#3A8735):** Deep evergreen for supportive accents and graphic elements.
- **tertiary (#55DD4A):** High-energy neon green for emphasis in large type or key UI highlights.
- **neutral (#122315):** Pine-black surface for the global background and containers.
- **border (#374151):** Slate line work for dividers, inputs and low-contrast rules.
- **surface ({colors.neutral}):** Alias of neutral for panels and page canvas.
- **on-surface ({colors.primary}):** Alias of primary for text and icons on dark surfaces.

## Typography

- Display: Deacon (custom). Used for headlines from headline-lg (122.9px/900) down to headline-xs (37.8px/700) with tight negative tracking for impact. Availability: proprietary/self-hosted; agents cannot fetch it from Google. Practical substitutes: Anton, League Spartan, or Oswald (Google) for similar compressed, heavy display shapes.
- Body: Graphik (custom). Used for body-md (32px/400, 1.5) and UI labels. Availability: proprietary/self-hosted; agents cannot fetch it from Google. Practical substitutes: Inter, Plus Jakarta Sans, or IBM Plex Sans for neutral, modern sans clarity.
- Pairing guidance: keep headlines in Deacon/substitute and all supporting copy in Graphik/substitute; avoid mixing weights beyond those specified to preserve the high-contrast voice.

## Layout

Spacing scale favors large vertical rhythm: xs 6px for fine nudges, sm 20px for inline gaps, md 36px as the base block spacing, lg 80px for section padding, and xl 148px for hero or major section breaks. Use a 12-column grid on desktop with wide gutters; content typically centers with generous margins. Cards and callouts follow the same dark surface, relying on spacing and borders for separation. Keep body text widths moderate for readability at 32px.

## Elevation & Depth

Shadows are not used (all measured levels are none). Hierarchy is conveyed through contrast (pine-dark background vs cream text), scale (oversized headlines), and whitespace. Where separation is needed, use the border color #374151 for hairline dividers or section rules rather than blur shadows.

## Shapes

Two radii communicate hierarchy: md 10px for interactive elements like buttons; sm 8px for containers and cards. Button-link remains square (0px) to read as text. Keep shape language consistent—no mixed or exaggerated rounding outside these tokens.

## Components

- Button — Primary: 50px height with 14px × 24px padding, 10px radius. Background #122315; text #F3EDE4. Use for key CTAs.
- Button — Secondary: Same metrics and colors as primary; reserve for secondary placements where hierarchy is set by layout and proximity.
- Button — Link: Text-only action in #F3EDE4 with 0px radius; pair with an underline on hover.
- Card: Dark surface (#122315) with #F3EDE4 text, 8px radius and 16px inner padding; add a #374151 border for separation when stacked.

### Hero Banner
- Centered layout with xl (148px) top/bottom padding. Headline uses Deacon 900 at 122.9px; second line can switch to accent #55DD4A. One primary button below, spaced by md (36px).

### Benefit Split
- Section title in Deacon 900 at 75.6px; supporting copy in Graphik 32px. Two inline actions spaced by sm (20px).

### Feature Steps (01–04)
- Two-column grid. Step number in Graphik 32px; subhead in Deacon 700 at 37.8px; body copy in Graphik 32px with md (36px) item gaps.

### Funding Calculator Teaser
- Compact callout with headline in Deacon 900 at 56.7px and a primary button. Add a 1px #374151 border to frame on the dark surface.

### Who We Fund Stack
- A vertical list of micro-headlines using Deacon 700 at 37.8px, uppercase styling. Use md (36px) spacing between lines.

### Testimonial Cards
- Quotes in Graphik 32px inside Card tokens (8px radius, 16px padding). Attribution follows on a new line; optional #374151 top border for grouping.

### FAQ Tabs
- Three tabs across; active tab uses #F3EDE4 text. Answers set in Graphik 32px with md (36px) vertical rhythm; dividers in #374151.

### Footer CTA and Compliance
- Closing headline in Deacon 900 at 56.7px with compact body links in Graphik 32px. Include regulatory copy below with reduced contrast via #374151 rules.

## Do's and Don'ts

- Do keep text in #F3EDE4 on the #122315 surface; reserve #55DD4A for emphasis and large type accents.
- Do use lg (80px)–xl (148px) paddings to stage sections; rely on md (36px) for inner spacing.
- Do use 10px radius for interactive controls and 8px for containers—be consistent across the page.
- Don't add drop shadows; separate groups with #374151 borders or whitespace.
- Don't substitute additional fonts; if Deacon/Graphik are unavailable, use Anton + Inter (or League Spartan + Inter) and keep sizes identical.
- Don't place long paragraphs in wide columns—cap line length and keep body at 32px for readability.

## Agent Prompt Guide

Quick color reference — Text: #F3EDE4; Background: #122315; Border: #374151; Accent: #55DD4A.

1) Build a centered hero on #122315. H1 in Deacon 900, 122.9px, letter-spacing -0.012em; second line colored #55DD4A. Body copy in Graphik 400, 32px, 1.5. Primary button 50px tall, 14px × 24px padding, 10px radius; background #122315, text #F3EDE4. Use xl (148px) vertical padding.

2) Create a 2-column "01–04" features grid. Each item: subhead in Deacon 700, 37.8px; description in Graphik 400, 32px; item gap md (36px). Section padding lg (80px). Add a 1px #374151 divider between columns if needed.

3) Compose a calculator teaser card using the Card token: background #122315, text #F3EDE4, radius 8px, padding 16px, optional 1px #374151 border. Headline Deacon 900, 56.7px; button as in step 1.

4) Build an FAQ with three tabs. Tab labels in Graphik 400, 32px; active label #F3EDE4, inactive reduced-opacity. Answers set in 32px body with md (36px) spacing; use #374151 borders; no shadows. If Deacon/Graphik are unavailable, substitute Anton for Deacon and Inter for Graphik while keeping sizes and colors identical.

## Similar Brands

- Wise: dark-leaning green palette and pragmatic fintech tone; Kikin is bolder in type scale and uses illustration instead of photography.
- Ramp: monochrome with green accent and big headings; Kikin is warmer with cream text and outdoors motifs.
- Monzo Business: approachable copy and color-forward CTAs; Kikin runs darker overall with heavier display typography.
- Stripe Capital: clear financing narrative and roomy layouts; Kikin diverges with a stronger brand illustration and neon accent.

More like this

Browse Finance →
kota.io
Kota Blog Fintech
Kota Blog
The platform that runs employee benefits on autopilot.
Blog · 58 minutes ago
privy.io
Privy About Developer Tools
Privy About
The page opens with a centered hero that screams careers: a small “CAREERS” eyebrow over a huge headline, tight blurb, and twin…
About · 14 hours ago
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 2 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 4 days ago