XDNAI Brand Guide — v2.0

02

Color Palette

8 neo-brutalist primaries + 3 Mardi Gras accents + surfaces. All colors are neon-forward, optimized for high contrast on both black and white.

Primary Colors — Neo-Brutalist Palette

#FFE600

Helix Gold

Primary CTAs, brand mark, active states

16.87:1 on black ✓ AAA

#00FFFF

Strand Cyan

Info cards, data visualization, secondary actions

16.75:1 on black ✓ AAA

#C7FF00

Gene Lime

Success states, positive findings, confirmations

17.77:1 on black ✓ AAA

#FF6B9D

Codon Pink

Personality traits, highlights, character badges

7.58:1 on black ✓ AA

#FF3333

Variant Red

Risk findings, no-go items, critical alerts

5.38:1 on black ✓ AA Large

#FF9F1C

Marker Orange

Warnings, fitness, energy systems

10.16:1 on black ✓ AAA

#B388FF

Helix Purple

Pro features, drug metabolism, premium tier

8.47:1 on black ✓ AA

#4CC9F0

Sequence Blue

Cognitive, methylation, data-dense views

11.41:1 on black ✓ AAA

Mardi Gras Accents — Louisiana Heritage

#7B2D8E

Bayou Purple

Louisiana heritage accent — Mardi Gras purple

4.56:1 on white ✓ AA

#18A558

Bayou Green

Louisiana heritage accent — Mardi Gras green

4.84:1 on white ✓ AA

#F9A825

Bayou Gold

Louisiana heritage accent — Mardi Gras gold

9.38:1 on black ✓ AAA

Surfaces, Text & Borders

Background

#FFFFFF / #0A0A0A dark

Surface

#F5F5F5 / #1A1A1A dark

Text

#0A0A0A / #F5F5F5 dark

Text Secondary

#666666 / #999999 dark

Border

#000000 / #333333 dark

03

Typography

Space Grotesk for everything human. JetBrains Mono for everything genetic. All headings uppercase. Always.

Iron Rule

All Headings
Uppercase.

This is not a preference. This is the brand. Every heading, every label, every button — uppercase, always. It signals power, precision, and genetic authority.

Fluid Type Scale — Space Grotesk

Display clamp(3rem, 5vw, 5rem)

XDNAI

H1 clamp(2.25rem, 4vw, 3.5rem)

Your DNA Decoded

H2 clamp(1.75rem, 3vw, 2.5rem)

Nutrition Insights

H3 clamp(1.25rem, 2vw, 1.75rem)

Gene Category Overview

H4 1.125rem · 700

MTHFR Methylation Report

Body 1rem · 400 · lh 1.6

Your MTHFR C677T variant affects how your body processes folate. This is one of the most studied genetic variants in nutritional genomics.

Body SM 0.875rem · 400

Approximately 10–15% of people carry two copies of this variant. The implications for folate metabolism are significant but manageable.

Label 0.75rem · 700 · UC · +0.05em

Gene Category · Drug Metabolism · High Priority

Micro 0.625rem · 700 · UC · +0.08em

rs1801133 · Allele T/T · Homozygous Variant · Confidence: High

JetBrains Mono — Gene Data & Code

// Gene Data — JetBrains Mono

// METHYLATION PATHWAY — Priority Report

MTHFR · rs1801133 · T/T Homozygous Variant

COMT · rs4680 · G/A Heterozygous

MAOA · rs6323 · T/T Reference

// Caffeine Metabolism

CYP1A2 · rs762551 · A/C Slow Metabolizer

ADORA2A · rs5751876 · T/T Caffeine Sensitive

⌨

Font Pairing Rule: Space Grotesk handles all human-facing text — headings, body, labels, buttons. JetBrains Mono is reserved exclusively for genetic data: gene names, rsIDs, allele notation, code blocks, and data labels. Never mix them in the same element.

04

Borders & Shadows

Offset shadows, never blurred. 3px borders, never rounded. This creates the "pressable" feel that defines the brand.

The Brutal Shadow System

Shadow SM

2px 2px 0 #000

Badges, small cards, nav items

Shadow Default

4px 4px 0 #000

Cards, modals, primary buttons

Shadow LG

6px 6px 0 #000

Section headers, hero elements

The Hover Animation — Press to Feel It

↓ Hover Me — Shadow Disappears + Translate 4px

◈

The Physics Rule: When hovered, elements translate(2px, 2px) and box-shadow drops to none. This simulates pressing a physical button — the shadow was the "depth," and pressing removes it. Duration: 120ms ease. This applies to ALL interactive elements: buttons, cards, nav items, badges.

Border Standards

3px solid — Standard border. All cards, all buttons, all containers.

2px solid — Badges, interior dividers, secondary elements only.

4px left — Findings and alerts. Left border only, color-coded by severity.

0px

border-radius: 0 — ALWAYS. Zero radius everywhere. This is non-negotiable.

05

Components

Live, interactive. Every component is a working example. Hover everything.

Buttons .xd-btn · All variants · Hover to feel the press

Variants

Sizes

On Dark Background

Cards .xd-card · .xd-card-interactive — Hover the second card

Methylation

MTHFR Status

Your C677T variant is associated with reduced enzyme activity. Consider methylfolate supplementation.

⚠ Moderate Priority

Nutrition

Gluten Response

No HLA-DQ2/DQ8 variants detected. Celiac genetic risk is low. Non-celiac gluten sensitivity unrelated.

✓ Low Risk

Caffeine

Slow Metabolizer

CYP1A2 *1F variant detected. Caffeine stays in your system significantly longer. Cutoff: 1pm.

⬆ High Sensitivity

Badges .xd-badge · All color variants

Helix Gold Strand Cyan ✓ Gene Lime Codon Pink ⚠ Variant Red Marker Orange ★ Helix Purple Sequence Blue Dark Badge

Gene Badges .xd-gene-badge · JetBrains Mono · Color-coded by category

CYP2D6 Drug Metabolism

MTHFR Methylation

COMT Neurotransmitters

CYP1A2 Caffeine

HLA-DQ2 Nutrition

PER3 Sleep

Stats Bar .xd-stats-bar · Black background · Helix Gold values

847

Variants Analyzed

23

Key Findings

12

Gene Categories

99.1%

Confidence Score

Findings & Alerts .xd-finding · Left border, color-coded severity

🔴 Critical — CYP2C19 Poor Metabolizer

You carry two loss-of-function variants in CYP2C19. Several common medications (Plavix, Prilosec) may not work as expected. Discuss with your prescriber before starting or changing these medications.

⚠ Warning — MTHFR Reduced Function

Your C677T variant reduces MTHFR enzyme activity by ~35%. Standard folic acid supplementation may be less effective. Consider methylfolate (5-MTHF) forms instead.

ℹ Info — CYP1A2 Caffeine Sensitivity

You're a slow caffeine metabolizer. Caffeine stays in your system 2-3x longer than average. This increases afternoon sensitivity and sleep disruption risk.

✓ Good — No Celiac Risk Variants

Neither HLA-DQ2 nor HLA-DQ8 was detected. Your genetic celiac disease risk is very low. This does not rule out non-celiac gluten sensitivity.

Section Labels .xd-section-label · Black pill · White text · Uppercase · Used as category markers

Methylation Drug Metabolism Nutrition Caffeine Sleep Cardiovascular Fitness Cognitive

06

Gene Category Colors

Every gene category has an assigned color. Consistent color mapping across all reports, dashboards, and visualizations.

Drug Metabolism

var(--xdnai-gene-drug) · #B388FF

CYP2D6 CYP2C19 CYP3A4

Methylation

var(--xdnai-gene-methyl) · #4CC9F0

MTHFR MTR MTRR

Neurotransmitters

var(--xdnai-gene-neuro) · #FF6B9D

COMT MAOA SLC6A4

Cardiovascular

var(--xdnai-gene-cardio) · #FF3333

APOE F5 PCSK9

Nutrition

var(--xdnai-gene-nutrition) · #C7FF00

HLA-DQ2 LCT FTO

Fitness

var(--xdnai-gene-fitness) · #FF9F1C

ACTN3 ACE PPARGC1A

Caffeine

var(--xdnai-gene-caffeine) · #FFE600

CYP1A2 ADORA2A

Sleep

var(--xdnai-gene-sleep) · #00FFFF

PER3 CLOCK ADA

Inflammation

var(--xdnai-gene-fitness) · #FF9F1C

IL6 TNF CRP

Cancer Risk

var(--xdnai-gene-cancer) · #FF3333

BRCA1 TP53 MLH1

Longevity

var(--xdnai-gene-nutrition) · #C7FF00

FOXO3 SIRT1 TERT

Cognitive

var(--xdnai-gene-cognitive) · #4CC9F0

BDNF APOE KIBRA

07

Dark Mode

Class-based via .dark on html. CSS variables flip automatically. Shadows lighten. Borders soften. Colors stay vivid.

☀ Light Mode — Default

MTHFR Report

Your methylation pathway shows reduced function. Methylfolate supplementation is recommended.

View Details

Critical Finding

CYP2C19 poor metabolizer detected. Review your current medications.

⚠ Critical ✓ Actionable

Token Values — Light

--xdnai-bg #FFFFFF

--xdnai-surface #F5F5F5

--xdnai-text #0A0A0A

--xdnai-border #000000

--xdnai-shadow 4px 4px 0 #000

☽ Dark Mode — .dark on html

MTHFR Report

Your methylation pathway shows reduced function. Methylfolate supplementation is recommended.

View Details

Critical Finding

CYP2C19 poor metabolizer detected. Review your current medications.

⚠ Critical ✓ Actionable

Token Values — Dark (.dark)

--xdnai-bg #0A0A0A

--xdnai-surface #1A1A1A

--xdnai-text #F5F5F5

--xdnai-border #333333

--xdnai-shadow 4px 4px 0 rgba(255,255,255,.15)

⬡

Dark Mode Strategy: Add class .dark to the <html> element. All CSS variables cascade automatically. Neon accent colors (#FFE600, #00FFFF, etc.) remain identical in both modes — they're vivid enough to read on both black and white. Shadows shift to rgba(255,255,255,0.15) to maintain the brutalist feel on dark surfaces.

08

Voice & Tone

Like your smartest friend who happens to be a geneticist. Not a hospital. Not a textbook.

"Like your smartest friend who happens to be a geneticist."

Not a hospital. Not a textbook. XDNAI explains your genetics the way a human would — direct, honest, occasionally irreverent. We respect the science, but we never hide behind it. You get the finding, the "so what," and the action. In that order. Always.

Bold Empowering Irreverent Scientific-but-Accessible

✓ Do — Always

✓ Use "your" and "you" — this is personal, not clinical

✓ Lead with what matters (the No-Go list, not allele frequencies)

✓ Explain the science, then the "so what"

✓ Reference Louisiana / Silicon Bayou identity

✓ Be honest about uncertainty (research vs. diagnosis)

✓ Tie every insight to the user's actual genotype

✗ Never — Not Once

✗ Never say "we diagnose" or "medical advice" — ever

✗ Never use passive voice for findings ("it was found that...")

✗ Never hide behind jargon without explanation

✗ Never be generic — every insight ties to the user's actual data

✗ Never round-corner anything — literally or figuratively

✗ Never bury the lead — critical findings go first

Sample Headlines — Brand Voice in Action

Your DNA.
Your Food.
Your Rules.

Know What
to Avoid.
Know What to Eat.

Your Genes Have Been
Waiting to Tell You
Something.

Empowerment
Without
Overreach.

Technically Feasible. Ethically Sensitive. Potentially Life-Changing.

09

Ecosystem

Four XDNAI domains. One brand. Each domain has its own color identity while remaining unmistakably XDNAI.

xdnai.io

Personal

Your genetic insights. The core product. Personal health intelligence built around your unique genotype.

Strand Cyan · #00FFFF

xdnai.biz

Business

Enterprise wellness. Genomic intelligence at the team and organizational level. Employer health programs.

Helix Gold · #FFE600

xdnai.org

Philanthropic

Open research. Population genomics. Making genetic intelligence accessible regardless of economic status.

Gene Lime · #C7FF00

xdnai.edu

Educational

Learn your genetics. Interactive genomics education. Understanding the science behind your results.

Codon Pink · #FF6B9D

◈

Domain Color Rule: Each domain's accent color is used for its primary CTA buttons, section highlights, and marketing materials. The XDNAI wordmark stays Helix Gold on black across all four domains. The neo-brutalist visual language is identical — only the accent color shifts. Users moving between domains should feel the brand continuity immediately.