Explore our full range of SEO and web services designed for growth.
```
### 6.9 Bento Grid
```tsx
SEO Optimization
Grow organic traffic.
{/* more cards */}
```
### 6.10 Form Input Group
```tsx
```
### 6.11 Muted Section (Alternating Background)
```tsx
{/* content on subtle muted background */}
```
### 6.12 Page Hero
```tsx
SEO Services}
title={<>Grow Your Organic Traffic with EKA}
subtitle="Data-driven SEO strategy that delivers measurable results for your business."
align="center"
actions={
<>
}
/>
```
---
## 7. Animation Patterns
### Entrance Animation (CSS)
```css
.my-element {
animation: slideUp 0.5s var(--ease-out-quint) forwards;
}
/* or */
.my-element {
animation: fadeIn 0.3s ease-out forwards;
}
```
### Entrance Animation (Framer Motion)
```tsx
import { motion } from 'framer-motion';
Content
```
### Staggered List
```tsx
{items.map((item, i) => (
{item.label}
))}
```
---
## 8. Integration Guide
### 8.1 Import CSS tokens in any project
```css
/* @import in your global CSS */
@import url('https://ekabalance.com/brand/tokens.css');
/* Now use CSS custom properties */
.my-button {
background: var(--color-primary);
color: var(--color-primary-foreground);
border-radius: var(--radius-apple);
}
```
### 8.2 Fetch tokens at build time (no runtime dependency)
```bash
# In package.json "prebuild" script:
curl https://ekabalance.com/brand/tokens.json -o src/brand-tokens.json
curl https://ekabalance.com/brand/tokens.css -o src/styles/brand.css
```
### 8.3 Tailwind v3 preset
```js
// tailwind.config.js
const brandPreset = require('./brand-tokens.json'); // fetched at build time
module.exports = {
presets: [{ theme: brandPreset.theme }],
// your config
};
```
### 8.4 Tailwind v4 with token CSS
```css
/* In your globals.css */
@import 'https://ekabalance.com/brand/tokens.css';
@import 'tailwindcss';
/* --color-primary etc. are now available as Tailwind theme values */
```
### 8.5 Inject as AI context
```bash
# Download and feed to an LLM:
curl https://ekabalance.com/brand/ai-context.md > brand-context.md
# Claude API example:
# Include brand-context.md content in your system prompt, then ask:
# "Generate an on-brand pricing section component using the EKA design system."
```
---
## 9. AI Generation Checklist
When generating UI components for the EKA brand, verify each of these:
- [ ] No box-shadows anywhere (all should be `0 0 #0000` or omitted)
- [ ] Cards use `rounded-apple` (2rem) or `app-card-surface` utility
- [ ] Buttons are `rounded-full`
- [ ] Body text is `font-light` (weight 300)
- [ ] Headings are `font-medium` (weight 500) or lighter
- [ ] Interactive elements use `--color-primary` (#0071e3)
- [ ] Section headings have an `app-kicker` badge above them
- [ ] Frosted glass uses `backdrop-blur-xl` or `backdrop-blur-2xl` (not opaque)
- [ ] Borders use `var(--border-hairline)` width (1px / 0.5px)
- [ ] Easing uses `--ease-out-quint` or `--ease-out-expo` for entrances
- [ ] Colors are sourced from the token palette (CSS custom properties)
- [ ] No inline `z-index` values outside the defined z-index scale
---
## 10. Design Dos and Don'ts
### ✅ Do
- Use `var(--color-primary)` / `#0071e3` for all CTAs and interactive elements
- Use `rounded-apple` (2rem) for card containers
- Apply `border-width: var(--border-hairline)` on cards
- Use `backdrop-blur-2xl` for overlay and nav surfaces
- Keep font-weight 300 for body, 500 for headings
- Use `--ease-out-quint` for entrance animations
- Prefix custom utilities with `app-`
- Add `app-kicker` badges above section headings
- Use `text-muted-foreground` for body/description text
- Use OKLch values when adding new colors
### ❌ Don't
- Add `box-shadow` — the brand is flat
- Use `font-weight > 500` on body or paragraph text
- Use colors outside the token palette
- Use `border-radius` below `1.5rem` on major surfaces
- Make square or barely-rounded buttons
- Exceed the z-index scale (100/200/300/400)
- Mix `--color-rating` and `--color-primary` in the same component
- Use `border-width` greater than 1px
---
*Generated by `scripts/generate-brand.mjs` · Source: `src/app/globals.css` · https://ekabalance.com/brand/*