Kamiyo.ai
Launch App

—  Color カラー

Color

The KAMIYO color system balances cyberpunk aesthetics with technical readability. Our signature magenta-cyan gradient represents the bridge between human creativity and machine precision. All colors are optimized for dark backgrounds and terminal interfaces.

Primary Colors

Magenta

#ff00ff

RGB: 255, 0, 255

Primary CTAs, links, accents, interactive elements

Cyan

#00ffff

RGB: 0, 255, 255

Secondary accents, highlights, code elements

Orange

#ffb343

RGB: 255, 179, 67

Warning states, special highlights

Neutral Colors

Black

#000000

RGB: 0, 0, 0

Primary background, main canvas

Dark

#282d34

RGB: 40, 45, 52

Card backgrounds, containers

Ash

#32363d

RGB: 50, 54, 61

Secondary backgrounds, hover states

Chalk

#d1d5db

RGB: 209, 213, 219

Primary text, body copy

Gradients

Primary Gradient (Magenta → Cyan)

Use for: Buttons, borders, text highlights, loading states

background: linear-gradient(90deg, #ff44f5, #4fe9ea);

Animated Gradient

Use for: Live indicators, active states, loading animations

/* Primary Gradient (Magenta → Cyan) */
background: linear-gradient(90deg, #ff44f5, #4fe9ea);

/* Animated Gradient */
background: linear-gradient(90deg, #4fe9ea, #ff44f5);
background-size: 200% 100%;
animation: gradientMove 3s linear infinite;

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Implementation

Tailwind Configuration

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        magenta: "#ff00ff",
        cyan: "#00ffff",
        orange: "#ffb343",
        dark: "#282d34",
        chalk: "#d1d5db",
        ash: "#32363d",
      },
    },
  },
}

CSS Custom Properties

:root {
  --color-magenta: #ff00ff;
  --color-cyan: #00ffff;
  --color-orange: #ffb343;
  --color-dark: #282d34;
  --color-chalk: #d1d5db;
  --color-ash: #32363d;
}

Usage Guidelines

Do

  • • Use magenta for primary interactive elements
  • • Use cyan for secondary accents and code highlights
  • • Always use colors on dark backgrounds
  • • Maintain high contrast for accessibility
  • • Use gradients for emphasis and motion

Don't

  • • Don't use colors on light backgrounds
  • • Don't modify hex values or create new shades
  • • Don't use gradients for body text
  • • Don't combine orange with magenta/cyan
  • • Don't reduce contrast below WCAG AA standards