Design foundation · v0.1

Colors, type, and wireframes for MyBizAI

Anchored to Ultramarine #120a8f and Dark Orange #ff8c00, with gold used sparingly for high-signal moments — matching the logo's cobalt / orange vortex.

Preview marketing surface

Core anchors

Locked from your references. Cobalt is trust and depth; orange is motion and action; gold is rare emphasis (active borders, private access).

Cobalt

#120a8f

Ultramarine base

Cobalt Soft

#3b2fd4

Dark UI fills

Dark Orange

#ff8c00

Primary CTA

Gold

#d4af37

Emphasis / borders

Midnight

#070b18

Dark canvas

Chalk

#f3f5fb

Light canvas

Palette suggestions

Three directions to play with. A · Vortex is wired as the default dark theme; light mode follows C · Dawn.

Vortex (recommended)

A

Closest to the logo — deep cobalt surfaces, orange CTAs, gold for emphasis only.

  • background#070b18
  • primary#120a8f
  • accent#ff8c00
  • highlight#d4af37
  • surface#0c1228

Fifth Avenue Warm

B

Slightly lifted cobalt for UI chrome; orange stays primary action; gold borders like the Architecture mock.

  • background#0a1024
  • primary#1a129e
  • accent#ff8c00
  • highlight#e8c547
  • surface#121a36

Dawn Contrast

C

Light-mode leaning — cool chalk canvas, cobalt type, orange CTAs without cream/terracotta tropes.

  • background#f3f5fb
  • primary#120a8f
  • accent#ff8c00
  • highlight#c9a227
  • surface#ffffff

Typography

Serif for brand authority (Architecture / Vision mocks); geometric sans for product UI — not Inter.

Brand wordmark

Instrument Serif

Brand wordmark, hero headlines, editorial moments

UI

Manrope

UI, body, navigation, forms

Code

IBM Plex Mono

Code, tokens, hex labels

MyBizAI

Your vision deserves a personal touch.

Experience the Fifth Avenue agency approach, distilled into an autonomous platform that designs, builds, and scales your business.

Wireframes

Structural intent before component polish — one job per section, brand-first hero, dark product shell.

Marketing Hero

One composition: brand, headline, support line, CTA — full-bleed atmosphere.

01Sticky nav: mark + wordmark | links | theme | access
02Full-bleed cobalt/midnight field with subtle grain + orange radial wash
03Hero mark (swirl) as atmospheric anchor, not a floating card
04Display headline + one sentence + primary CTA (orange) / secondary (gold outline)

Product Shell

App chrome for dashboard / brand kit / projects — dark-first work surface.

01Left rail: modules (Dashboard, Businesses, Research, Brand, Marketing, Finance)
02Top bar: context title + theme switch + profile
03Main canvas: one job per section, sparse cards only for interactive tools
04AI assist dock: persistent, non-modal strip

Welcome / Access

Private-access tone from Architecture mock — exclusive, not SaaS-generic.

01Centered stack on textured midnight
02Wordmark dominant
03Short promise + Request Access CTA
04Footer: Fifth Avenue Intelligence Group

Token usage

/* Tailwind */
bg-brand-orange text-brand-midnight
text-brand-gold border-brand-gold/60
bg-brand-cobalt font-display

/* Theme */
defaultTheme="dark"
enableSystem  → Light | Dark | System

CSS variables live in globals.css. Brand metadata in config/brand.ts.

Marketing, pricing, auth, dashboard chrome, brand kit, and product shell now follow these tokens. Next: swap the SVG mark for the production 3D logo asset when ready.

Local preview

$bun run dev:web

Parent: Fifth Avenue Intelligence Group · Tagline: Create, Automate, Thrive

    xs