Diconium

Overview

Diconium embodies a **High-Contrast Minimalism** aesthetic—a design philosophy that prioritizes clarity, confidence, and technological precision through bold black-and-white compositions punctuated by a signature deep-orange accent (#ff5000). The brand serves enterprise clients seeking to transform data and AI into measurable business outcomes, and the UI reflects this mission: every visual element is intentional, every interaction direct, every hierarchy crystal-clear. The design evokes a sense of control and sophistication—the visual equivalent of a well-architected system.

The brand voice is authoritative yet approachable, speaking in declarative statements without hyperbole. Vocabulary favors concrete terms: "proven results," "end-to-end," "at scale," "measurable impact." The tone is calm and assured, never breathless or trendy. Example sentence in brand voice: "We turn software, data, and AI into intelligence that performs—end to end, at scale, with measurable business impact."

Colors

The color system is built on a stark black-and-white foundation with a single, unmissable accent. **Primary (#ff5000)** is the brand's signature deep orange, deployed on all call-to-action buttons, key links, and interactive highlights. It commands attention without aggression—a warm, energetic accent against the cool neutrality of the page. **Secondary (#000000)** is pure black, used for primary text, borders on secondary buttons, and structural elements. **On-Surface (#000000)** and **On-Surface-Variant (#505050)** provide the text hierarchy: black for primary content, mid-gray for supporting information. **Surface (#ffffff)** is the clean white canvas; **Surface-Container (#f4f4f4)** and **Surface-Container-High (#e9ecef)** create subtle depth for cards and hover states without breaking

Typography

The type system is anchored in **CamptonBook**, a geometric sans-serif that conveys modernity and precision. The family consists of two weights: 400 (regular) for body copy and 700 (semibold) for headings and emphasis. **Display (60px, 700, -0.04em letter-spacing)** is reserved for hero statements and page titles, commanding the full visual hierarchy. **Headline-lg (40px, 700, -0.02em)** and **Headline-md (28px, 700)** break down major sections with tight letter-spacing to reinforce the geometric, engineered feel. **Body-lg (18px, 400)** and **Body-md (16px, 400)** maintain readability at standard line-heights of 28px and 24px respectively, with no letter-spacing to preserve natural flow. **Label-md (14px, 700, 0.01em)** and **Label-sm (12px, 700, 0.05em)** are used for buttons, badges, an

Layout

The layout operates on a **12-column grid** with a max-width of **1400px**, centered on the viewport. The spacing scale is semantic and hierarchical: **gutter (24px)** defines the standard horizontal margin between columns; **lg (40px)** separates major sections vertically (e.g., hero to offerings, offerings to success stories); **md (24px)** is used for card padding and internal component spacing; **sm (12px)** for tighter groupings like list items or badge spacing. The design favors generous white space—sections are separated by 60–120px of vertical padding (as seen in the raw CSS: `padding-top: 60px`, `padding-bottom: 120px`), creating a rhythm that feels spacious and controlled. Container max-widths vary by section (1023px, 1139px, 1400px observed), but the primary container is **1400p

Elevation & Depth

Depth is achieved through **layered shadows** and **crisp borders**, not through color or blur. The elevation system uses three levels: **Level 1 (sm)** applies `box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06)` to subtle UI elements like input fields and small cards, creating a barely-perceptible lift. **Level 2 (md)** uses `box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)` on standard cards and modals, providing clear separation from the background. **Level 3 (lg)** applies `box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)` to elevated modals and overlays, commanding visual hierarchy. All surfaces are defined b

Shapes

The shape philosophy is **Geometric Precision with Warmth**—sharp enough to feel engineered, rounded enough to feel approachable. **Buttons and CTAs** use `border-radius: 30px` (observed in raw CSS), creating a pill-shaped form that softens the geometric aesthetic while maintaining clarity. **Cards and containers** use `border-radius: 10px` or `1rem`, a moderate radius that balances structure with friendliness. **Input fields** use `border-radius: 4px` or `0.5rem`, keeping form elements crisp and functional. **Badges and small UI elements** use `border-radius: 50%` (full circles) or `9999px` (

Components

Action Elements **Button-Primary** (#ff5000 background, white text, 48px height, 10px 20px padding, 30px border-radius, 700 weight) is the dominant CTA, deployed on hero sections and key conversion points. On hover, the background shifts to **#ffa050** (primary-container) with a smooth 200ms transition, signaling interactivity without jarring the user. **Button-Secondary** (transparent background, black text, 5px black border, 30px border-radius) is used for secondary actions like "Learn more" or navigation links. On hover, it fills with **#505050** (secondary-container) and text becomes white, creating a clear state change. **Button-Ghost** (transparent, orange text, no border) is reserved for tertiary actions and inline links; on hover, it gains a light gray background (#f4f4f4) to i

Do's and Don'ts

**Do**

• Do use the orange accent (#ff5000) exclusively on interactive elements—buttons, links, focus states, and key highlights. Overuse dilutes its impact.
• Do maintain high contrast between text and background; black on white (or white on black) is the default. Never use gray text on gray backgrounds.
• Do apply the 30px border-radius consistently to all primary buttons and CTAs; it is the signature shape of the brand.
• Do use CamptonBook at 700 weight for all headings and UI labels; it reinforces the engineered, confident tone.
• Do separate major sections with 60–120px of vertical padding; white space is a design tool, not wasted space.
• Do use the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on cards to create subtle depth without visual clutter.

**Don't**

• Don't use gradients, blur effects, or soft transitions; the brand aesthetic is flat, direct, and precise.
• Don't introduce new accent colors; orange (#ff5000) is the only permitted brand accent. Secondary actions use black or gray.
• Don't apply rounded corners smaller than 4px or larger than 30px outside of full-circle badges; maintain the geometric precision.
• Don't use font weights other than 400 and 700; the two-weight system is intentional and complete.
• Don't place text directly on colored backgrounds without sufficient contrast; always test WCAG AA compliance (4.5:1 for body text).
• Don't animate elements with durations longer than 300ms; the brand voice is decisive and responsive, not leisurely.