Skip to main content
Design System

EKA Brand

Machine-readable design tokens, component library, and AI integration context. Everything external apps and LLMs need to stay on-brand — regenerated from source on every deploy.

Endpoints

44 colors + typography, radius, easing, animations as structured JSON.

CSS :root block — @import directly into any stylesheet or Tailwind v4 config.

Tailwind v3 theme.extend preset — drop into tailwind.config.js presets array.

Full brand manifest — philosophy, 31 components, utility class reference, AI guidelines, pattern library.

31 React components with source code, props, and semantic descriptions.

42 KB comprehensive AI context — inject as system prompt to generate on-brand components in any LLM.

Integration Recipes

CSS

Fetch tokens at build time

Add to your app's prebuild script. Tokens update every time EKA deploys — your app picks them up on its next build.

# Add to your app's package.json "prebuild" script:
curl /brand/tokens.css -o src/styles/brand.css
TW

Tailwind v4

Import the CSS token file. Tailwind v4 picks up CSS custom properties natively — all --color-* tokens become usable theme values.

/* In your globals.css */
@import url('/brand/tokens.css');
@import 'tailwindcss';

/* All EKA CSS custom properties are available */
/* Example: bg-[var(--color-primary)] */
AI
AI

AI Assistant & Context Portability

Leverage EKA's biological intelligence on other platforms. Export the full knowledge base or embed the interactive assistant.

LLM Knowledge Base

The llms.txt standard allows AI agents to crawl and understand the entire site structure and medical logic.

llms.txt
Widget Integration

Embed the diagnosis assistant into any sister site (like Agenyz) with a single script tag.

AI component generation

Download ai-context.md and inject it as a system prompt. Any LLM (Claude, GPT, Gemini) will then generate perfectly on-brand React components — with the right colors, fonts, radii, utility classes, and patterns.

# Download AI context and feed to your LLM:
curl /brand/ai-context.md -o brand-context.md

# Then use brand-context.md as system context when prompting:
# "Generate an on-brand pricing section using the EKA design system."

Color Palette

core

--color-background
oklch(0.989 0.005 78.298)
--color-secondary
oklch(0.959 0.01 81.795)
--color-secondary-foreground
oklch(0.278 0.012 84.582)
--color-muted
oklch(0.954 0.009 78.281)
--color-muted-foreground
oklch(0.42 0.014 79.716)
--color-accent
oklch(0.954 0.009 78.281)
--color-accent-foreground
oklch(0.278 0.012 84.582)
--color-border
oklch(0.915 0.015 80.705)
--color-input
oklch(0.915 0.015 80.705)
--color-rating-light
oklch(0.924 0.115 95.746)
--color-rating
oklch(0.82 0.17 78.336)
--color-rating-dark
oklch(0.555 0.146 48.998)

sidebar

--color-sidebar
oklch(0.985 0 0)
--color-sidebar-foreground
oklch(0.145 0 0)
--color-sidebar-primary
oklch(0.546 0.245 262.881)
--color-sidebar-primary-foreground
oklch(0.97 0.014 254.604)
--color-sidebar-accent
oklch(0.97 0 0)
--color-sidebar-accent-foreground
oklch(0.205 0 0)
--color-sidebar-border
oklch(0.922 0 0)
--color-sidebar-ring
oklch(0.708 0 0)

chart

--color-chart-1
oklch(0.87 0 0)
--color-chart-2
oklch(0.556 0 0)
--color-chart-3
oklch(0.439 0 0)
--color-chart-4
oklch(0.371 0 0)
--color-chart-5
oklch(0.269 0 0)

Typography Scale

apple-headline / heading-1

Display Headline

apple-title / heading-2

Section Title

apple-subtitle / heading-3

Subheading text

text-body-lg

Body text that reads comfortably at scale.

Font weights — MiSans Latin
Aa300Light (body)
Aa400Regular
Aa500Medium (headings)
Aa600Demibold
Aa700Bold

Border Radius

Easing Functions

Component Library

layout components

ContainerMax-width wrapper. max-w-6xl, responsive horizontal padding.src/components/layout/Container.tsx
SectionPage section with tone (default|muted|inverted) and spacing (tight|default|loose) props. Wraps Container unless bleed=true.src/components/layout/Section.tsx
PageHeroPage header component. Props: eyebrow, title, subtitle, actions, align. Responsive h1 from 3xl to 7xl.src/components/layout/PageHero.tsx
CTABlockCall-to-action panel. Tones: soft (muted bg) | bold (primary bg). rounded-apple, centered text.src/components/layout/CTABlock.tsx
FeatureGridGrid of icon+title+description feature cards. columns: 2|3|4. Cards use apple-card with hover effect.src/components/layout/FeatureGrid.tsx
FAQSectionAnimated FAQ with native details elements and Framer Motion height animation.src/components/layout/FAQSection.tsx

page components

AccordionContext-based accordion with single or multiple open items. Framer Motion animation.src/components/Accordion.tsx
AnimateInScroll-triggered entrance animation wrapper.src/components/AnimateIn.tsx
AppleHeroFull-bleed hero section with Apple-style large typography.src/components/AppleHero.tsx
CTASectionFull-bleed CTA with parallax background image and dark overlay.src/components/CTASection.tsx
ServiceCardService listing card with image, price badge, benefits list, booking button.src/components/ServiceCard.tsx
MainLayoutRoot layout with fixed frosted-glass nav, footer, cookie banner, toast container.src/components/MainLayout.tsx

template components

CoreServiceTemplateFull page template for service pages. Sections: hero, features, stats, bento grid, FAQ, pricing, testimonials.src/components/templates/CoreServiceTemplate.tsx
FunnelHeroConversion-focused hero with problem selector and adaptive copy.src/components/templates/FunnelHero.tsx

Design Principles

FlatAll box-shadows are 0 0 #0000. Depth via borders, transparency, and blur — never drop shadows.
Light typeBody is font-weight 300 (light). Headings 500 (medium). Never bold body text.
Hairline borders1px on standard displays, 0.5px on 2×+ DPI. Use var(--border-hairline).
Apple radius2rem (--radius-apple) for cards. Degrades to 1.5rem on mobile automatically.
Frosted glass navbackdrop-blur-2xl + bg-background/55 + subtle border. Never opaque nav bars.
Rounded buttonsAll buttons are rounded-full. Cards use rounded-apple. Never square corners.
OKLch paletteAll colors in OKLch color space for perceptual consistency across hues.
Section kickersEvery section heading has an app-kicker badge above it to categorise content.

All files in /brand/ are auto-generated from src/app/globals.css + component source on every build. Edit the CSS, deploy, done — every consumer gets updated tokens on their next build.

See scripts/generate-brand.mjs for the generator source.