Design System · Neon Precision

koodalanne

Modern engineering with neon soul.

The living style guide. Every token below is driven by design-system/tokens/tokens.css — the single source of truth for the website, proposals, slides and every client touchpoint.

01 — Color

Core palette

Neon Pink

#F890E7 · primary

Neon Cyan

#0BD3D3 · accent

Midnight Violet

#7A5CFF

Ink 800

#111218 · bg

Ink 700

#181A23 · surface

Ink 600

#20222E · raised

Light Grey

#ECECEE · text

Mid Grey

#7A7A85 · subtle

High-visibility

Fluorescent versions of the brand pink & cyan for garments, screen-print and signage — where the pastel on-screen shades wash out. Apparel/print only, not general UI.

HV Pink 200

#FF7AD4 · light

HV Pink 300

#FF2EC4 · high-vis

HV Pink 400

#E21BA0 · deep

HV Cyan 200

#5CFFEF · light

HV Cyan 300

#00F0DC · high-vis

HV Cyan 400

#00C2B2 · deep

02 — Gradients

One per screen

--kd-gradient-sunset

--kd-gradient-neon

--kd-gradient-horizon

03 — Typography

Type scale · Space Grotesk

6xlBuild

4xlSoftware they trust

2xlIndependent Software Consultant

lgHelping companies build software they can grow on.

baseBody copy uses Space Grotesk at a comfortable 1.55 line height for long-form reading.

monoconst koodalanne = "neon precision";

logokoodalanne

04 — Components

Buttons & badges

Available React Featured Shipped In review Blocked

Cards

Architecture

From business goals to a system that scales — owned end to end, not just coded.

Technical Leadership

Aligning teams, removing uncertainty and keeping delivery moving.

Form

Work email I reply within one business day.

Project

Budget (error state) Please choose a range.

Table

Engagement	Focus	Status
Platform rebuild	Architecture	Shipped
Team enablement	Leadership	Active
AI delivery pilot	Engineering	Scoping

Timeline

01 — Discovery

Understand the problem

Business goals before code. Where does ownership get lost?
02 — Architecture

Design the system

A structure the team can confidently grow on.
03 — Delivery

Build & ship

Momentum, even when requirements aren't perfect.

Code

/* one primary signal per screen */
.kd-btn--primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-radius: var(--radius-control);
}
.kd-btn--primary:hover {
  box-shadow: var(--kd-glow-pink);
}

05 — Logo

The logo family

The actual Press Start 2P letterforms, outlined to vector — pixel-accurate yet font-independent. Wordmark is always lowercase. Spec: brand/04-logo.md.

Primary wordmark · Press Start 2P · pink on midnight

One-color variant · white on photography / dark

icon

monogram

favicon

06 — Motion

Interactions

Subtle only — hover the elements below. Everything collapses under prefers-reduced-motion. Spec: brand/05-motion.md.

.kd-lift

Hover: 4px rise + pink glow. The one place glow reaches full strength.

.kd-cursor

Ship it

.kd-underline .kd-pulse koodalanne

.kd-stagger · item one

.kd-stagger · item two

.kd-stagger · item three

07 — Patterns

Backgrounds & graphics

Faint by default — one per composition. Spec: brand/06-patterns.md.

.kd-grid

.kd-grid-horizon

.kd-diagonal

.kd-scanline

.kd-vignette

.kd-ticks

.kd-horizon-line

07 — Wallpapers

Brand wallpaper gallery

Grid, diagonal and gravel-bike wallpapers in desktop, 4K and mobile sizes — as PNG and SVG. Share the gallery to let anyone preview and download them.

Open wallpaper gallery ↗