Brand Guidelines

Design System Overview

Welcome to the Koder Kraft Design System. This repository outlines the core visual principles, color tokens, typography scales, and modular UI components engineered to maintain a unified luxury aesthetic across all web interfaces.

Color Palette

Our palette relies on deep cosmic darks paired with vibrant electric purple and magenta gradients to provide high visual contrast and immersive depth.

Void Black

#030008

Deep Nebula

#100226

Electric Purple

#A855F7

Vibrant Magenta

#EC4899

Typography Hierarchy

Primary typeface: Gopher. Designed for clean structural legibility combined with modern geometric character weights.

H1: Heading Display Text (38px / 800)
H2: Section Header Title (24px / 700)

Body Text: Standard paragraph descriptions and helper notes rendered in readable muted purple tones (15px / Regular).

Buttons & Actions

Interactive triggers utilize gradient overlays, box shadows, and smooth hardware-accelerated lift states on hover.

Primary Action Button
<a href="#" class="kk-btn-primary">Get in Touch Now</a>

Badges & Tags

Used across section headers and category indicators to highlight key labels with subtle glassmorphism borders.

Let's Create Together

Cards & Containers

Glassmorphic structural cards containing semi-transparent background blends and multi-layered border outlines.

background: linear-gradient(135deg, rgba(35, 10, 70, 0.6) 0%, rgba(10, 2, 30, 0.85) 100%);
border: 1.5px solid rgba(216, 180, 254, 0.3);
border-radius: 28px;
backdrop-filter: blur(20px);