---
version: alpha
name: AorBorC Color-Code System
description: Public design instructions for the AorBorC Technologies website. Use this file before creating or changing public UI.
sourceOfTruth:
  tokens: "app/globals.css"
  themeProvider: "app/layout.tsx"
  designLab: "app/design-system/page.tsx"
  publicHero: "components/ui/public-page-hero.tsx"
  header: "components/site-header.tsx"
  footer: "components/site-footer.tsx"
  buttons: "components/ui/button.tsx"
  marketingCta: "components/brd/brd-button.tsx"
  cards: "components/ui/card.tsx"
  serviceProof: "components/ui/service-proof.tsx"
  navigation: "lib/navigation.ts"
  siteConfig: "lib/site-config.ts"
theme:
  provider: "next-themes"
  requiredDefault: "system"
  requiredSystemPreference: true
fonts:
  display: "Anton"
  sans: "Archivo"
  mono: "Geist Mono"
colors:
  publicRule: "Use role labels and hex codes only. Do not publish official vehicle, manufacturer, or paint names."
  light:
    canvas: "#FBFBF9"
    panel: "#F1F1ED"
    raised: "#FCFCFA"
    text: "#16233F"
    textMuted: "#0A4D30"
    borderSoft: "#0E6B43"
    primary: "#0E6B43"
    primaryDeep: "#0A4D30"
    action: "#FF6A13"
    info: "#00839C"
    highlight: "#F7C600"
    red: "#D40000"
    orange: "#FF6A13"
    yellow: "#F7C600"
    green: "#5FA316"
    blue: "#00A7C4"
    navy: "#16233F"
    purple: "#5B2A86"
  dark:
    canvas: "#0B1320"
    panel: "#13203A"
    raised: "#16233F"
    text: "#ECECE8"
    textMuted: "#C9CEBD"
    primary: "#FFD23E"
    action: "#FF8645"
    info: "#33C2DC"
    red: "#D40000"
    orange: "#FF8645"
    yellow: "#FFD23E"
    green: "#7BC93A"
    blue: "#33C2DC"
    navy: "#3D5A99"
    purple: "#9A63C8"
spacing:
  pageXMobile: "px-6"
  pageXDesktop: "lg:px-12"
  contentMax: "max-w-7xl"
  sectionY: "py-16 to py-24"
rounded:
  base: "0.25rem"
  card: "0.375rem to 0.5rem"
  pill: "9999px"
motion:
  quick: "140ms"
  standard: "260ms"
  slow: "560ms"
  signatureEase: "cubic-bezier(0.2, 0, 0, 1)"
  emphasizedEase: "cubic-bezier(0.05, 0.7, 0.1, 1)"
components:
  eyebrow: ".kick"
  marketingButton: ".pr-btn"
  marketingCard: ".pr-card"
  heroFrame: ".hero-frame"
  statBlock: ".stat-block"
  chip: ".pr-chip"
  tag: ".pr-tag"
---

# AorBorC Color-Code System

## Overview

AorBorC is a founder-led Zoho, AI, and business-systems partner. The site should feel operational, confident, and handmade: a practical consulting firm that maps messy workflows and turns them into reliable systems.

The visual system is built from crisp borders, tight radii, color-code accents, strong type, real proof, and useful motion. It is not a generic SaaS gradient site.

This public file must stay clean for external readers. Use role labels and hex codes. Do not mention official vehicle brands, manufacturer names, or official paint names in this document, public UI, public metadata, or AI-facing copy.

## Non-Negotiables

- Preserve `ThemeProvider attribute="class" defaultTheme="system" enableSystem`.
- Use the current CSS variable contracts from `app/globals.css` when coding, but document public colors with hex codes only.
- Keep light and dark mode equally designed.
- Use the app's existing background and foreground tokens as the default page contract.
- Use full-width section bands with a centered `max-w-7xl` inner container.
- Use real project imagery from `public/images` when a page needs visual proof.
- Use `BrdButton` for project-planning CTAs that should open the intake modal.
- Do not expose a public email address; route contact actions to `/contact` or `/plan-my-project`.
- Do not add project-wide dark defaults unless explicitly requested.
- Do not use emoji in UI, alt text, labels, or documentation examples.

## Brand Positioning

The first viewport should quickly answer:

- What business workflow is broken?
- What system will AorBorC build or repair?
- Why should a decision maker trust this team?
- What is the next action?

Lead with workflows, systems, Zoho depth, implementation proof, and practical AI. Avoid vague transformation language.

Good copy:

- "Turn messy operations into reliable business systems."
- "Map the workflow first. Build the right Zoho, web, mobile, or AI system around it."
- "Creator handles the operating layer. AorBorC shapes the workflow, permissions, integrations, and review path."

Avoid:

- "Elevate your business."
- "Unlock seamless innovation."
- "Next-generation digital transformation."
- Fake metrics, fake customers, and generic testimonials.

## Public Color System

Use only role labels and hex codes in public documentation. Internal CSS variable names can remain in code, but public-facing design guidance should not expose old neutral token names or official paint/manufacturer references.

Light mode roles:

- Canvas: `#FBFBF9`
- Panel: `#F1F1ED`
- Raised surface: `#FCFCFA`
- Primary text and hard borders: `#16233F`
- Muted text: `#0A4D30`
- Primary green: `#0E6B43`
- Deep green: `#0A4D30`
- Action orange: `#FF6A13`
- Technical blue: `#00839C`
- Highlight yellow: `#F7C600`

Accent row:

- Red: `#D40000`
- Orange: `#FF6A13`
- Yellow: `#F7C600`
- Green: `#5FA316`
- Blue: `#00A7C4`
- Navy: `#16233F`
- Purple: `#5B2A86`

Dark mode roles:

- Canvas: `#0B1320`
- Panel: `#13203A`
- Raised surface: `#16233F`
- Primary text: `#ECECE8`
- Muted text: `#C9CEBD`
- Primary action: `#FFD23E`
- Secondary action: `#D40000`
- Action orange: `#FF8645`
- Technical blue: `#33C2DC`
- Green: `#7BC93A`
- Purple: `#9A63C8`

Rules:

- Use green as the default brand lead in light mode.
- Use yellow as the main action color in dark mode.
- Use the accent row for wayfinding, stat blocks, proof cards, and controlled emphasis.
- Do not make whole pages one hue.
- Do not use purple-blue AI gradients or decorative glow blobs.
- Do not use pure black; use `#16233F` or `#0B1320`.
- Do not publish official vehicle, manufacturer, or paint names; use the color code.

## Typography

Use the existing font stack:

- Display: Anton.
- Body and UI: Archivo.
- Code, data, keyboard hints, aligned numbers: Geist Mono.

Display headings:

- Use Anton for public marketing headlines and large section titles.
- Keep letter spacing at `0.01em`, not negative tracking.
- Use tight line height around `0.94` to `1`.
- Prefer `clamp()` or Tailwind responsive sizes; do not scale type directly with viewport width.
- Use uppercase only when the component pattern already does.

Body copy:

- Use Archivo, relaxed line height, and readable line lengths.
- Keep prose concrete and operational.
- Use balanced wrapping for short headings when it improves readability.

Data:

- Use Geist Mono or Anton only when numbers are meant to be graphic.
- Use organic, truthful numbers. Do not invent metrics.

## Layout

Public pages should use a clear band system:

- Header: `SiteHeader`.
- Hero: `PublicPageHero` or a route-specific hero that follows the same contract.
- Main sections: full-width `<section>` bands.
- Inner content: `mx-auto max-w-7xl px-6 lg:px-12`.
- Footer: `SiteFooter`.

Section rhythm:

- Hero padding: about `py-18 sm:py-20 lg:py-24`.
- Standard public section padding: `py-16` to `py-24`.
- Compact legal/resource pages can tighten spacing, but keep the same type and surface rules.
- Use thin borders or dashed rules to separate bands.

Grid rules:

- Mobile first: one column by default.
- Desktop: asymmetric grids are welcome when they clarify story or proof.
- Use CSS Grid for multi-column structure.
- Avoid complex flex percentage math.
- Avoid cards inside cards.
- Avoid floating page-section cards; cards are for individual repeated items, tools, dialogs, and proof units.

Hero rules:

- Do not create a generic centered hero over a dark gradient.
- Prefer left-aligned copy with real media, stats, or an operational proof panel.
- Keep the primary brand or offer obvious in the first viewport.
- Use `.hero-frame` for framed media: dark border, tight radius, offset shadow.
- On mobile, make CTAs full width when needed and keep text from overlapping imagery.

## Surfaces And Depth

The AorBorC surface language uses borders and shadows with restraint.

Core surfaces:

- Default canvas surface.
- Panel-tinted section surface.
- Raised card surface.
- Deep brand band surface.
- `.pr-card`: marketing card with tokenized border and tinted shadow.
- `Card`: system UI card adapted to hard-edged AorBorC styling.

Depth rules:

- Prefer borders and offset shadows over soft generic elevation.
- Use `box-shadow: 3px 3px 0`, `4px 4px 0`, or `6px 6px 0` depending on component scale.
- Tint shadows with the local accent color when useful.
- Major containers use tight radii.
- Pills, avatars, and segmented controls can use full radius.

Do not:

- Add large rounded SaaS cards by default.
- Put cards inside cards.
- Use heavy blur, glass, or glow effects unless an existing component already needs it.

## Components

Buttons:

- Use `components/ui/button.tsx` for app controls and form actions.
- Use `.pr-btn` for public marketing CTAs.
- Use `BrdButton` for "Plan my project" style actions.
- Primary marketing action uses the current primary action token from code.
- Secondary/high-attention action uses the current secondary action token from code.
- CTAs should use verb-plus-object labels: `Plan my project`, `See work`, `Request a Zoho audit`.
- Buttons must have hover, active, disabled, and focus-visible states.

Cards:

- Use `.pr-card white` for public proof cards.
- Use `.pr-card soft` for lower-emphasis info panels.
- Use `Card` from `components/ui/card.tsx` for system UI.
- Use `CardList` and `service-proof` components for capped proof lists, service tabs, marketplace apps, and case-study proof.

Navigation:

- Use `navigation` from `lib/navigation.ts`.
- Keep Services as the primary top-level entry.
- Keep Zoho Rescue under Services/Support unless explicitly changing navigation strategy.
- The header uses uppercase compact labels and color-coded hover/active states.
- Keep search and theme toggle available on desktop.

Forms:

- Labels sit above inputs.
- Helper text belongs below labels or fields.
- Errors sit below the field and explain what to fix.
- Inputs use the current raised surface, text, soft border, and focus state from code.
- Touch targets should be at least 44px high.

Mobile:

- Keep the mobile floating action dock behavior.
- Keep mobile menus scannable with collapsible sections and clear active states.
- Full-width CTAs are acceptable on mobile when two-column CTA layouts would compress labels.

Icons:

- Prefer `lucide-react`, already used across the site.
- Keep icon stroke widths consistent inside a component.
- Use icons to support labels, not replace critical text without accessible names.

## Motion

Motion should help the visitor understand a change or progression.

Use:

- `transform` and `opacity`, not `top`, `left`, `width`, or `height`.
- Existing duration tokens: quick, standard, slow.
- The existing easing tokens from `app/globals.css`.
- `SectionScrollReveal` for public section entrances.
- `AnimatedContentSwitch` for content swaps and carousel changes.
- `AnimatedImage` for image reveal behavior.

Avoid:

- Long decorative loops.
- Scroll hijacking.
- Custom cursors.
- Animation that blocks reading or form completion.
- Adding new motion libraries unless the existing stack cannot reasonably handle the interaction.

Accessibility:

- Honor `prefers-reduced-motion`.
- Keep all carousel/manual controls keyboard accessible.
- Pause or reduce nonessential movement where the component pattern allows.

## Imagery

Images should show actual work, people, product screens, systems, event proof, or relevant operational context.

Use:

- `public/images/hero-illustration.jpg`
- `public/images/portfolio-*.jpg`
- `public/images/about-office.jpg`
- `public/images/zoho-creator/vegas-2025/*`
- `public/images/zoho-marketplace/*`
- `public/images/services/*`
- `AnimatedImage` for public page images.

Rules:

- Write descriptive alt text.
- Do not use vague atmospheric stock imagery.
- Do not use dark, blurred media when the visitor needs to inspect proof.
- Prefer local images over remote placeholders.
- Maintain stable aspect ratios with `aspect-*`, fixed heights, or responsive constraints.

## Content Voice

AorBorC copy is plain-spoken, operational, and specific.

Use:

- Concrete workflow nouns: approvals, reports, roles, reconciliations, portals, dashboards, integrations, field apps.
- Concrete platforms: Zoho Creator, Zoho One, CRM, Books, Desk, Analytics, Flow, Next.js, Supabase, React Native, Expo, AI.
- Specific next actions: `Plan my project`, `See work`, `Contact us`, `Open the audit`.
- Real proof: shipped systems, marketplace apps, event photos, named services, public phone number.

Avoid:

- Filler: elevate, unleash, seamless, next-gen, robust, revolutionary.
- Generic names or placeholder testimonials.
- Fake precision.
- Official vehicle, manufacturer, or paint names in public copy.
- Overexplaining how the interface works inside visible UI.

Style:

- Buttons and nav labels can use Title Case or compact uppercase as the component requires.
- Body text uses sentence case.
- Toasts and status messages should name the thing that changed.
- Empty states should point to the first useful action.

## Public Page Patterns

Default marketing page:

1. `SiteHeader`
2. `PublicPageHero`
3. Proof or problem section
4. Services, process, or comparison section
5. Case studies, metrics, marketplace apps, or reviews
6. CTA band using `BrdButton`
7. `SiteFooter`

Service page:

1. Name the workflow pain.
2. Explain the platform or build route plainly.
3. Compare options honestly when relevant.
4. Show proof with tabs, cards, marketplace apps, videos, or case studies.
5. End with two paths: guided AorBorC help and self-serve exploration when useful.

Legal/resource page:

1. Keep the same header/footer.
2. Use compact hero.
3. Prioritize readability over decorative proof.
4. Keep table, list, and prose spacing clean.

Admin page:

1. Use denser layout than marketing pages.
2. Keep typography smaller and more utilitarian.
3. Use cards only for true grouping.
4. Preserve keyboard and form ergonomics.

## Responsive Rules

Required viewport checks for public UI changes:

- 360px
- 390px
- 430px
- 768px
- 1024px
- 1440px

Rules:

- No horizontal scroll.
- No text overlap.
- No clipped button labels.
- No hidden primary CTA.
- Sticky header and mobile dock must not cover key content.
- Use `min-h-[100dvh]` where a full viewport section is truly needed.
- Do not use `h-screen` for mobile-critical sections.

## Accessibility

Every interactive element needs:

- A visible focus state.
- A readable accessible name.
- Keyboard access.
- Proper disabled state where applicable.
- Touch target of at least 44px when practical.

Every content surface needs:

- AA contrast for body text.
- Meaning not communicated by color alone.
- Descriptive alt text for images.
- Semantic headings in order.
- Form labels connected to inputs.

## Implementation Rules For Agents

Before implementing public UI:

- Read `app/globals.css`.
- Reuse existing components before creating new ones.
- Check `package.json` before importing any new dependency.
- Prefer Server Components by default.
- Isolate interactive UI into small Client Components.
- Keep edits scoped to the page or component being changed.
- Use Tailwind CSS v4 syntax already configured in this project.
- Use existing CSS variables in code, but keep public design docs hex-only.

Before handoff:

- Run `npm run lint` when the project lint script is working.
- Run `npm run build` for broad layout, routing, or data changes.
- Smoke-test changed public routes locally.
- Check light and dark mode.
- Check the mobile header and floating action dock.

## Do / Do Not

Do:

- Use the color-code palette intentionally.
- Make first-time visitor comprehension obvious.
- Keep content concrete.
- Build mobile first.
- Use real proof and real imagery.
- Preserve the system theme default.
- Use the existing motion and component patterns.

Do not:

- Clone Vercel's monochrome Geist visual language.
- Add a new global palette.
- Use gradient blobs, generic AI purple, or neon glows.
- Use oversized rounded cards as default layout.
- Hide CTAs behind decorative interaction.
- Add fake data, fake logos, fake reviews, or fake metrics.
- Publish official vehicle, manufacturer, or paint names.
- Publish old neutral token names in `design.md`.
- Remove focus outlines without a visible replacement.
- Change `defaultTheme="system"` or remove `enableSystem`.