---
version: alpha
name: FunTech CI
description: A dark, switchable brand-identity playground — near-black canvas with three high-voltage theme accents (Fun orange, Volt yellow-green, Breaker red), the Elevon display face for key marks, Proxima Nova for Latin and Zen Kaku Gothic Antique for Japanese. Noise-textured borders and tight, confident type.

colors:
  # Canvas + ink
  background: "#1c1d1e"
  surface: "#171819"
  surface-soft: "#242527"
  surface-raised: "#262626"
  ink: "#f2eeeb"
  ink-secondary: "#bdb9b6"
  ink-muted: "#525252"
  white: "#ffffff"
  black: "#000000"

  # Theme accents — one is "key" at a time
  fun: "#ff481b"           # Fun theme — orange
  fun-foreground: "#f2eeeb"
  volt: "#dffe38"          # Volt theme — yellow-green (use black ink on top)
  volt-foreground: "#000000"
  breaker: "#ff2929"       # Breaker theme — red
  breaker-foreground: "#f2ebeb"

  # Default "key" accent (Fun is the landing theme)
  primary: "#ff481b"
  on-primary: "#ffffff"

  # Supporting accents
  red-400: "#ff6568"
  amber-600: "#dd7400"

  # Neutral scale (dark)
  neutral-900: "#15171d"
  neutral-800: "#1c1d1e"
  neutral-700: "#252628"
  neutral-600: "#525252"
  neutral-100: "#f2eeeb"

typography:
  display-hero:
    fontFamily: "elevon, proxima-nova, sans-serif"
    fontSize: 60px
    fontWeight: 900
    lineHeight: 1.00
    letterSpacing: -1px
  display:
    fontFamily: "elevon, proxima-nova, sans-serif"
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.10
    letterSpacing: -0.5px
  heading:
    fontFamily: "proxima-nova, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 0px
  heading-ja:
    fontFamily: "Zen Kaku Gothic Antique, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.40
    letterSpacing: 0.025em
  sub-heading:
    fontFamily: "proxima-nova, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: 0px
  body-large:
    fontFamily: "proxima-nova, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "proxima-nova, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-ja:
    fontFamily: "Zen Kaku Gothic Antique, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.80
    letterSpacing: 0.025em
  body-small:
    fontFamily: "proxima-nova, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label:
    fontFamily: "proxima-nova, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.40
    letterSpacing: 0.025em
  caption:
    fontFamily: "proxima-nova, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0.025em
  mono-caption:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 3px
  sm: 4px
  md: 6px
  lg: 12px
  pill: 9999px

components:
  # Key CTA — uses the active theme accent
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: 12px 24px

  # Volt-theme CTA needs dark ink for contrast
  button-volt:
    backgroundColor: "{colors.volt}"
    textColor: "{colors.volt-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: 12px 24px

  # Ghost button on dark canvas
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    borderColor: "{colors.neutral-700}"

  # Theme switch chip
  theme-chip:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.neutral-700}"

  # Surface card with noise-textured border
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 24px
    borderColor: "{colors.neutral-700}"

  # Color / logo specimen swatch
  swatch:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.xs}"
    padding: 16px

  # Section label tag
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 2px 8px

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 16px 24px
    borderColor: "{colors.neutral-700}"
---

# FunTech CI Design System

## Overview

FunTech CI is a brand-identity microsite — a living style guide for the FUNTECH corporate identity — and it treats the page itself as a demo of the brand. The canvas is near-black (`{colors.background}`, a warm charcoal rather than pure black), and the whole experience is built around one idea: the brand is not a single look but a switchable system of energetic "key" themes. A theme toggle swaps the accent color (and its readable foreground) across the entire page in one move, so the site is simultaneously documentation and product.

There are three named themes baked into the CSS as first-class tokens. **Fun** is the landing theme — a hot orange (`{colors.fun}`) that reads as approachable and high-energy. **Volt** is an electric yellow-green (`{colors.volt}`) that demands black ink on top of it for legibility. **Breaker** is an alarm red (`{colors.breaker}`). Each theme ships its own foreground pairing so text always reads, and the accent is referenced everywhere through a single `key-color` variable — the architecture that lets the brand "wear different outfits" without redesigning.

Typography is a deliberate three-language stack. **Elevon** (loaded from Adobe Typekit) is the display "key" face used for logo-scale headlines and the wordmark — heavy, geometric, confident. **Proxima Nova** carries Latin body and UI text. **Zen Kaku Gothic Antique** handles Japanese, the site's primary language (`lang="ja"`), with the relaxed line-height and slight letter-spacing Japanese typesetting needs. The result is a system that feels editorial and engineered at once.

The signature visual texture is the noise border — borders and dividers carry a subtle grain rather than reading as clean hairlines, which keeps the dark surfaces from feeling flat. Radii are small and functional (3–6px), color is used as pure voltage against the dark ground, and the brand accent is never decorative filler — it marks the active identity.

**Key Characteristics:**
- Warm near-black canvas (`{colors.background}`) — never pure black for the page
- Switchable "key" theme system: Fun orange (`{colors.fun}`), Volt yellow-green (`{colors.volt}`), Breaker red (`{colors.breaker}`)
- Each theme carries its own readable foreground (Volt requires black ink — `{colors.volt-foreground}`)
- Tri-script type: Elevon display face, Proxima Nova for Latin, Zen Kaku Gothic Antique for Japanese
- Noise-textured borders and dividers instead of clean hairlines
- Small functional radii (3–6px), accent color as high-voltage punctuation
- Heavy display weights (800–900) for key marks, confident negative tracking

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Warm charcoal page canvas — the constant under every theme.
- **Surface** (`{colors.surface}`): Slightly darker card/section surface.
- **Surface Soft** (`{colors.surface-soft}`): Raised chips, tags, theme switcher.
- **Ink** (`{colors.ink}`): Off-white primary text (warm, not pure white).
- **Ink Secondary** (`{colors.ink-secondary}`): Muted descriptive copy.
- **Ink Muted** (`{colors.ink-muted}`): Disabled / tertiary labels.

### Theme Accents (the "key" colors)
- **Fun** (`{colors.fun}`): The default landing accent — hot orange. Foreground pairs to off-white.
- **Volt** (`{colors.volt}`): Electric yellow-green. ALWAYS pair with black ink (`{colors.volt-foreground}`) — white text on Volt fails contrast.
- **Breaker** (`{colors.breaker}`): Alarm red. Foreground `{colors.breaker-foreground}`.
- **Primary** (`{colors.primary}`): The active key color (Fun by default); referenced by all themed components.

### Supporting Accents
- **Red 400** (`{colors.red-400}`): Lighter red for highlights/links.
- **Amber 600** (`{colors.amber-600}`): Warm amber for secondary signals.

### Neutral Scale
- **Neutral 900** (`{colors.neutral-900}`): Deepest surface / footer.
- **Neutral 700** (`{colors.neutral-700}`): Borders, dividers, card outlines.
- **Neutral 600** (`{colors.neutral-600}`): Muted UI text.
- **Neutral 100** (`{colors.neutral-100}`): Light text on dark.

## Typography

### Font Family
- **Display / Key**: `elevon` (Adobe Typekit) — logo-scale headlines, wordmark.
- **Latin (English)**: `proxima-nova`, with fallbacks `sans-serif`.
- **Japanese**: `Zen Kaku Gothic Antique` (the site's primary language).
- **Monospace**: `ui-monospace, SFMono-Regular, Menlo, monospace` for spec captions.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | Wordmark / hero key headline — Elevon 900 |
| `display` | Section display titles — Elevon 800 |
| `heading` | Latin section headings |
| `heading-ja` | Japanese section headings (Zen Kaku) |
| `sub-heading` | Card titles, sub-sections |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-ja` | Japanese reading text — relaxed line-height |
| `body-small` | Secondary UI text |
| `label` | Buttons, nav, tagged labels (slightly tracked) |
| `caption` | Metadata, spec tags |
| `mono-caption` | Color/spec values |

### Principles
- **Display is Elevon, body is Proxima**: The key face appears at logo scale only; copy stays in Proxima Nova for readability.
- **Japanese is first-class**: Zen Kaku Gothic Antique with 1.8 line-height and 0.025em tracking — not an afterthought fallback.
- **Heavy where it counts**: Display weights run 800–900; body holds 400–500. The contrast is the rhythm.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px with a generous jump to `{spacing.3xl}` (64px) and `{spacing.4xl}` (96px) for section rhythm.

### Grid & Container
- Centered single-column content with wide section bands.
- Specimen grids (colors, logos, type) laid out as even multi-column tiles.
- Full-bleed dark sections separated by noise-textured dividers, not color shifts.

### Whitespace Philosophy
- **Dark gallery**: The near-black ground gives specimens room to glow; accent color is the only loud element.
- **Section banding**: Large vertical padding (`{spacing.3xl}`–`{spacing.4xl}`) between identity topics.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No border | Page background, text blocks |
| Bordered | 1px `{colors.neutral-700}` (noise-textured) | Cards, dividers, chips |
| Accent | Solid `{colors.primary}` fill | Swatches, key CTAs, active states |

**Depth Philosophy**: On a dark canvas, depth comes from border grain and surface-tint steps (`{colors.surface}` → `{colors.surface-soft}` → `{colors.surface-raised}`), not from drop shadows. The noise-textured border is the signature edge treatment.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed bands |
| `xs` | 3px | Swatches, tight tags |
| `sm` | 4px | Buttons, cards, inputs |
| `md` | 6px | Larger containers |
| `lg` | 12px | Feature panels |
| `pill` | 9999px | Theme chips, switch toggle |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Filled with the active key color (`{colors.primary}`), white ink, 4px radius.
- **`button-volt`** — The Volt-theme variant: yellow-green fill with BLACK ink (`{colors.volt-foreground}`) for contrast.
- **`button-ghost`** — Transparent on dark with `{colors.neutral-700}` border.

### Theme System
- **`theme-chip`** — Pill chip in the theme switcher; the active chip adopts its theme accent.
- Switching themes re-keys `{colors.primary}` (and its foreground) across every themed component at once.

### Cards & Specimens
- **`card`** — `{colors.surface}` with a noise-textured `{colors.neutral-700}` border.
- **`swatch`** — Solid accent tile with a mono-caption hex label.
- **`badge`** — Small tag, accent text on soft surface.

### Navigation
- **`nav-bar`** — Dark sticky header, Proxima labels, noise-border bottom.

## Do's and Don'ts

### Do
- Keep the canvas warm charcoal (`{colors.background}`), never pure black for the page
- Pair Volt (`{colors.volt}`) with black ink — it's the only theme that flips foreground
- Use Elevon for display/key marks only; Proxima Nova for body
- Give Japanese its own face (Zen Kaku Gothic Antique) with relaxed line-height
- Use noise-textured borders for edges on dark surfaces
- Let the active key color carry the energy — accent is functional, identity-marking

### Don't
- Don't put white text on Volt — it fails contrast
- Don't use Elevon for body copy
- Don't add drop shadows — depth comes from border grain and surface tints
- Don't introduce a fourth random accent — stay within Fun / Volt / Breaker
- Don't render Japanese in Proxima Nova fallback when Zen Kaku is available
- Don't use large radii — the system stays tight (3–6px)

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by FunTech CI. Brand names and trademarks belong to their respective owners.