CyCraft Technology

Overview

CyCraft Technology is an enterprise cybersecurity platform brand that transforms threat exposure management into a clear, actionable intelligence system. The design aesthetic is "Technical Confidence"—a fusion of corporate authority and modern clarity that speaks to security professionals and C-suite executives alike. The UI employs a clean white canvas (rgb(255, 255, 255)) with deep navy text (rgb(34, 28, 53)) anchored by a vivid coral-red accent (#ff595a) that signals urgency, action, and the brand's commitment to threat detection. Supporting accents in cyan (#00c9db) and purple (#846ce6) add dimensionality to data visualization and status indicators without overwhelming the interface. The emotional response is one of control and precision: users feel empowered to navigate complex security landscapes with confidence.

The brand voice is direct, authoritative, and human-centered. CyCraft speaks in concrete terms—"Exposed Threats with Full Control," "You can't decide your enemies, but you can determine your battlefield." The vocabulary avoids marketing hyperbole; instead, it uses military and strategic metaphors that resonate with security teams. Tone is calm under pressure, never breathless. Example sentence in brand voice: "XCockpit integrates EDR, privileged account management, and external attack surface monitoring into a single threat exposure dashboard—giving your team the visibility to act in minutes, not days."

Colors

The color system is built on a principle of "Signal Hierarchy"—the most critical information receives the most saturated, attention-grabbing color. Primary (#ff595a) is the brand's signature accent, deployed on all call-to-action buttons, active states, and threat indicators. It is a warm, slightly desaturated coral-red that conveys both urgency and approachability, avoiding the clinical coldness of pure red (rgb(255, 0, 0)). Secondary cyan (#00c9db) is reserved for positive states, success indicators, and secondary interactive elements; it provides visual relief and suggests clarity and insight. Tertiary purple (#846ce6) is used sparingly for tertiary actions, data visualization accents, and premium feature highlights.

The surface stack is anchored in white (#ffffff) for maximum legibili

Typography

The type system uses Inter as the primary typeface, loaded from Google Fonts in weights 300, 400, 500, 600, and 700. Inter was chosen for its geometric clarity, excellent screen rendering at all sizes, and strong support for multilingual content (the site serves English, Traditional Chinese, and Japanese audiences). The hierarchy spans eight levels: Display (70px, 700 weight, -0.04em letter-spacing) for hero headlines; Headline-lg (40px, 700 weight) for section titles; Headline-md (28px, 700 weight) for subsection headers; Title-lg (20px, 600 weight) for card titles and prominent labels; Body-lg (18px, 400 weight, 28px line-height) for introductory paragraphs and feature descriptions; Body-md (16px, 400 weight, 24px line-height) for standard body copy; Label-md (14px, 600 weight, 0.01em le

Layout

The layout system uses a 12-column CSS Grid with a maximum container width of 1280px and horizontal padding of 2.5rem (40px) on desktop, scaling down to 1.25rem (20px) on mobile via fluid clamp() functions. The grid gap is consistent at 24px (--gutter), creating a rhythm that feels spacious without being wasteful. Content is organized in sections with vertical padding that scales fluidly: large sections use 64px (xl spacing) for separation, medium sections use 40px (lg spacing), and compact sections use 24px (md spacing). This creates a clear visual hierarchy and reading rhythm.

Whitespace is treated as a first-class design element. The hero section uses generous vertical padding (90px+ on desktop) to give the headline "Exposed Threats with Full Control" room to breathe. Feature cards are

Elevation & Depth

Depth in this system is achieved through subtle shadows and strategic use of borders, not through layering or glassmorphism. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on flat elements; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and dropdowns; and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated overlays. Cards in the default state use md elevation plus a 1px solid border in outline-variant (#d7d7d7) to define their boundary without introducing visual heaviness. On hover, cards transition to lg elevation (via transition: box-shadow 2

Shapes

The shape philosophy is "Geometric Approachability"—rounded corners are used consistently but conservatively, signaling friendliness without sacrificing technical credibility. The rounded scale progresses from sm (4px) for small UI elements like badges and checkboxes, to DEFAULT (8px) for buttons and input fields, to md (12px) for card corners, to lg (16px) for larger containers, and xl (20px) for modals and hero sections. The reasoning: smaller radii (4-8px) feel modern and technical; larger radii (16-20px) feel welcoming and approachable. Full (9999px) is used only for pill-shaped buttons an

Components

Action Elements Buttons are the primary call-to-action mechanism and come in four variants: primary (solid #ff595a background, white text, 2px border), secondary (transparent background, #ff595a text and border), dark (solid #221c35 background, white text), and outline (transparent background, dark text and border). All buttons use 48px height, 12px vertical padding, 24px horizontal padding, and 8px border-radius. Primary buttons transition to #ff8a8b on hover (transition: background-color 200ms ease-out, border-color 200ms ease-out) and gain a 4px focus ring of rgba(255, 89, 90, 0.2) on keyboard focus. Secondary buttons shift to a light pink background (#ffe0e0) on hover while maintaining the red border. Dark buttons transition to #413b50 on hover. All button text uses label-md typogr

Do's and Don'ts

**Do**

• Do use primary red (#ff595a) exclusively for high-priority CTAs, threat indicators, and active states—never use it for decorative elements or low-priority actions.
• Do maintain 16:1 contrast ratio between on-surface text (#221c35) and surface backgrounds (#ffffff) to ensure WCAG AAA compliance across all body copy.
• Do apply 24px (md spacing) as the default gap between sections and 12px (sm spacing) for elements within a section to create visual rhythm.
• Do use 8px (DEFAULT) border-radius for buttons and inputs, 16px (lg) for cards, and 20px (xl) for modals to establish a consistent shape language.
• Do transition interactive elements over 150-200ms using ease-out timing to provide smooth, responsive feedback without feeling sluggish.

**Don't**

• Don't use primary red (#ff595a) on dark backgrounds (on-surface #221c35) without a white stroke or shadow—the contrast becomes insufficient and the color loses its signal strength.
• Don't mix rounded and sharp corners within a single component (e.g., a button with 8px radius and a 0px border)—consistency signals intentionality.
• Don't apply shadows larger than lg elevation (0 8px 24px rgba(0, 0, 0, 0.12)) to standard UI elements; reserve lg+ shadows for modals and overlays only.
• Don't use cyan (#00c9db) or purple (#846ce6) as primary CTAs—these are supporting accents and will dilute the brand's signal hierarchy if overused.