# DKube Design System DKube (parent company: **One Convergence**) designs and delivers secure **Private AI** solutions for enterprises — across on‑prem, private cloud, and hybrid environments. The brand wordmark uses a distinctive 3D isometric cube in a two‑tone purple. ## Source of truth - Marketing site: - Docs (DKube): - Docs (DKubeX): - CDN root (Webflow): `https://cdn.prod.website-files.com/694e148b6d20630a10be1cb1/` - Uploaded source logo: `uploads/dkube_logo.avif` This design system was reverse‑engineered from the live marketing website (Webflow build) and the uploaded cube logo. There is no codebase or Figma file in this project; any component implementation details below are cosmetic recreations. ## Products represented | Product | Category | One‑liner | |---|---|---| | **DKubeX** | GenAI ModelOps (flagship) | Enterprise‑grade private AI platform to build, deploy, and scale GenAI and ML securely within your infrastructure. | | **DKube** | MLOps | End‑to‑end MLOps platform for AI/ML and data engineering teams to build, train, and deploy complex ML models. | | **QueriLynx** | Blueprint | Unified multi‑agent platform to explore data from various sources with no code. | | **Virtual Teaching Assistant** | Blueprint | RAG‑native AI copilot for higher‑education teaching and learning. | | **DocMind** | Blueprint | AI document assistant for sorting, field extraction, and deep analysis. | ## Content fundamentals **Voice**: Confident, enterprise, technically precise. Speaks to CTOs, platform leads, and AI engineers at regulated enterprises (finance, healthcare, bio‑pharma, federal, education). **Tone anchors** — *secure, governed, private, production‑ready, compliant, in weeks, scalable, end‑to‑end*. **Perspective**: Third‑person corporate ("DKube helps enterprises…") for descriptive copy; second‑person ("Let's design…", "Your data stays private") for CTAs and invitations. Rarely first‑person plural ("our 12‑week commitment"). **Casing**: Title Case for the largest headings ("Private AI"), **Sentence case** for all H2/H3 and buttons. Product names are PascalCase with a camel hump ("DKube", "DKubeX", "QueriLynx", "SecureLLM", "DocMind"). **Punctuation**: Em‑dashes are common — they signal a qualifier. Ampersands appear in module names (Request & Response Tracking, Metrics & Reporting). Serial commas used. **Sentence shape**: Short declarative lead + a because/through clause. Examples from the site: - "Private AI Solutions for Enterprises" - "Govern Your AI Expense and Data Residency" - "Audit & Compliance Ready" - "Production‑Ready Application in Weeks" - "From experimentation to enterprise‑grade, production‑ready AI in weeks" - "From Infrastructure to Intelligence" - "Where GenAI ModelOps Come Together" - "Built by Engineers Who Understand Enterprise AI" - "Build AI you can deploy, operate, and trust." **CTAs**: Always action‑first, Title Case or Sentence case, paired with a ↗ top‑right arrow glyph. Canonical verbs: *Contact Us, Talk to Us, Watch Video, Read White Paper, Explore, Discover, Our Team, Our 12‑Weeks Commitment*. **Emoji**: **Never.** The brand is deliberately buttoned‑up enterprise — no emoji in body, CTAs, nav, or social. **Unicode / special chars**: Em‑dash (—), ampersand (&), plus‑sign stat prefixes ("+0 Weeks…"). No decorative Unicode icons. **Category / tag chips**: Single‑word industry chips appear on blueprint cards — Finance, Construction, Education, Insurance, Blockchain, AI Copilot, Data Insights, Text‑to‑SQL, Private AI, RAG, Research. **Don't**: Don't use playful metaphors, exclamation marks, or hype words ("magical", "beautiful"). Don't use lowercase stylized product names. Don't break the "D" + "K" capitalization pattern. ## Visual foundations **Palette vibe** — muted enterprise purple anchored in the logo cube. Warm‑neutral ivory/off‑white page bases, near‑black ink, never cool‑blue slate. **Primary**: `#6B53A3` (Dkube Purple — logo dark face, primary UI purple). **Primary‑light**: `#9985BF` (logo bright face, used for accents and hovers). **Primary‑deep**: `#4A3A7A` (pressed / headings‑on‑white alt). **Ink**: `#0E0E10` near‑black for display headings. **Body**: `#1F1F23`. **Muted**: `#6E6E76`. **Subtle**: `#A9A9B2`. **Page**: `#FFFFFF` (primary), `#F7F5FB` (tinted purple section), `#ECE7F5` (card tint), `#111013` (dark footer / inverse sections). **Hairline**: `#E7E4EE` (all borders use this; 1px). **Typography**: Site loads Webflow's default set — headings feel like a humanist sans (Manrope/Plus Jakarta Sans family); body is a neutral geometric sans. We substitute **Manrope** (display/headings) and **Inter** (body/UI) from Google Fonts. Mono substitution is **JetBrains Mono**. **Substitution flagged — please upload true webfonts if you have them (Webflow uploads them inline, so there's no canonical URL to scrape).** - Display: Manrope 700, -1% tracking, tight line‑height (1.05–1.1). Used for H1/H2 ("Private AI", "Enterprise ModelOps Made Easy"). - Heading: Manrope 600, 1.15 line‑height. Used for H3 section titles. - Eyebrow: Manrope 500, 12–13px, UPPERCASE, +8% tracking. Used for category labels (PARTNERS, VIDEOS, API GATEWAY). - Body: Inter 400, 16–18px, 1.55 line‑height. - UI / nav / buttons: Inter 500, 14–15px. - Mono: JetBrains Mono 500. **Backgrounds**: White dominates. Accent sections use a very soft purple wash (`#F7F5FB`) or an ivory card tint. Hero and inverse sections use near‑black `#111013`. No gradients on buttons; a single subtle purple‑to‑white page‑level gradient appears in the hero wash. **No hand‑drawn illustrations, no repeating patterns, no grain.** Hero/blueprint imagery is **photography** — warm, naturally‑lit, real objects/people (construction sites, documents on desks, classroom scenes). Photos are cropped to **large rounded cards** (24px radius) with a single tag chip over them. **Corner radii** — the signature rhythm: - 12px — buttons, chips, small inputs - 16px — inline cards, feature tiles - 24px — primary content cards, image crops - 32px — hero / oversize container cards - Full (9999px) — pill chips, tag badges, CTA arrow button **Shadows**: Restrained. One elevation ramp only. - `shadow-sm`: `0 1px 2px rgba(16, 14, 32, 0.04)` — inputs, chips. - `shadow-md`: `0 8px 24px rgba(46, 32, 94, 0.08)` — hover‑lifted cards. - `shadow-lg`: `0 24px 48px rgba(46, 32, 94, 0.10)` — floating panels, modal. - No inner shadows. No colored glows. No multi‑stop drop shadows. **Borders**: 1px `#E7E4EE` hairlines everywhere. Stronger 1.5px `#6B53A3` for focused inputs. Dashed lines are not used. **Animation**: Calm and confident. Fades + small vertical rises (6–12px) on scroll‑in. Hover on cards lifts 2px and adds `shadow-md`. No bounce springs, no parallax, no marquee effects except the **trusted‑by logo strip**, which auto‑scrolls horizontally at a steady linear pace. Easing: `cubic-bezier(0.22, 0.61, 0.36, 1)` for UI, 180ms duration. **Hover states**: Buttons invert (dark bg → purple bg) or darken by one step. Links get `text-decoration: underline` with `text-underline-offset: 3px`. Image cards: scale image 1.03 inside a fixed crop, overlay darkens 8%. **Press states**: Buttons translate +1px Y and lose shadow (no color shrink, no scale <1). **Transparency / blur**: Rare. Only the sticky top nav uses `backdrop-filter: blur(12px)` over `rgba(255,255,255,0.75)`. No glassmorphism in content surfaces. **Imagery temperament**: Natural, grounded, **warm‑to‑neutral**. Never cool‑teal, never desaturated corporate‑grey, never B&W. Lightly stylized stock photography showing real work contexts (a desk with keys and a document, cranes on a job site, a classroom). Category chips sit top‑left inside the image card. **Layout**: 12‑col 1200px container. Generous vertical rhythm (96–160px between sections on desktop). Full‑bleed rows alternate with contained rows. Section eyebrows sit above section H2. The footer is dark with a top‑anchored logo and a 3–4 column link grid. **Fixed elements**: Sticky top nav (transparent → blurred on scroll). No sticky side rails, no floating chat, no cookie bar in the reference pages we studied. **Card anatomy** (primary content card): - Background: white - Radius: 24px - Border: 1px `#E7E4EE` - Padding: 24px - Image crop: 16:10 or 4:3, radius 16px, sits at top - Tag chip over image (top‑left, pill, white bg, dark text) - Title: Manrope 600 / 22px - Body: Inter 400 / 15px / `#6E6E76` - Footer: "Explore ↗" purple link or a round arrow button **Protection**: No translucent scrims over photography — instead, chips sit in pure white capsules above the image for legibility. ## Iconography DKube's icons are a **mixed bag of Webflow‑imported SVG and PNG glyphs** rather than a single consistent icon font. We observed: - **Arrows**: A top‑right arrow (`arrow-top-right.png`) attached to every CTA. A round purple arrow‑right disc used on case study cards. A simple chevron‑right (`arrow (2).svg`) on module links. - **UI glyphs**: `menu-icon.svg`, `cross-black.svg`, `sms.svg` (email), `call.svg` (phone), `icons8-map-marker` (address). - **Social**: `si-linkedin.svg`, `si-twitter.svg` (X), `si-insta.svg` — a uniform monochrome set, line weight ~1.75px. - **Feature/pillar icons**: One‑off flat SVGs (`Magic Stick.svg`, `Frame.svg`, `Frame (1).svg`) for Private AI / Enterprise Trust / Scalable Delivery. These are simple, single‑color (purple `#6B53A3`), ~48×48 flat line illustrations — NOT part of an icon system, NOT consistent in stroke. - **Emoji**: **None used anywhere.** - **Unicode‑as‑icon**: **None.** **Substitution policy for this design system**: For general UI needs (checkmarks, chevrons, close, menu, external‑link, copy, search, settings) we use **Lucide** via CDN — stroke‑based, 1.75px weight, 24px grid. This matches the weight of the observed social icons and slots cleanly next to the brand purple. **Substitution flagged** — if DKube has a proprietary set in a codebase, drop it into `assets/icons/` and update `colors_and_type.css`. Canonical CDN: `https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.js` Assets copied/linked in `assets/`: - `dkube_icon_logo.avif` — the uploaded cube mark - `dkube_wordmark_purple.svg` — linked from the live CDN (see `preview/brand_logos.html`) - `arrow-top-right.png`, `arrow-right.svg` — linked from live CDN as needed ## File index ``` README.md ← this file SKILL.md ← agent skill manifest colors_and_type.css ← CSS variables: colors, type, spacing, radii, shadows, motion assets/ dkube_icon_logo.avif ← cube mark fonts/ ← (empty — Google Fonts loaded from CDN; drop real TTFs here when provided) preview/ ← Design System tab cards brand_logos.html colors_primary.html colors_neutrals.html colors_semantic.html type_display.html type_scale.html type_specimens.html radii_shadows.html spacing_scale.html buttons.html chips_tags.html cards.html form_inputs.html nav_footer.html iconography.html imagery.html ui_kits/ website/ README.md index.html Header.jsx Hero.jsx BlueprintCard.jsx PlatformCard.jsx CaseStudyRail.jsx TeamCard.jsx Footer.jsx Button.jsx Chip.jsx ``` ## Caveats (read me) 1. **Typefaces are a substitution.** Manrope + Inter + JetBrains Mono approximate the site. If DKube has licensed display/body fonts, please drop the `.woff2` files in `fonts/` and update `@font-face` blocks in `colors_and_type.css`. 2. **Icons are substituted.** The Webflow site uses hand‑picked SVG/PNG icons rather than a system. Lucide is the closest match by stroke weight and grid. Swap in proprietary assets if you have them. 3. **Colors are sampled from the logo** and cross‑referenced with site screenshots at the time of writing. There is no published brand hex. Verify against any official brand guide. 4. **No codebase or Figma was provided** — everything here was reverse‑engineered from the public marketing site and the uploaded cube mark.