Branding

Logo

Primary Logo

Adaptive Logo

The Adaptive logo features four interlocking diamond shapes in a dynamic arrangement, representing the platform's ability to connect, adapt, and orchestrate AI agents seamlessly.

Logo Colors

Element	Color Name	Hex Code
Top Diamond	Pink	#F5A3C7
Left Diamond	Purple	#9B4DCA
Right Diamond	Teal	#00A8B5
Bottom Diamond	Cyan	#3DD6D0
Background	Deep Navy	#1E1B4B

Logo Usage Guidelines

• Minimum Size: 32px height for digital, 0.5" for print

• Clear Space: Maintain padding equal to the height of one diamond shape on all sides

• Backgrounds: Use on dark backgrounds for optimal contrast; the logo works best on navy, dark purple, or black backgrounds

• Don't: Rotate, distort, add effects, or change the logo colors

---

Typography

Primary Typeface: Urbanist

Urbanist is our primary typeface used across all digital interfaces for both headings and body text. It provides a modern, geometric aesthetic with excellent readability.

Usage	Weight	Size
H1 - Page Titles	Bold (700)	32px / 2rem
H2 - Section Headings	SemiBold (600)	24px / 1.5rem
H3 - Subsection Headings	SemiBold (600)	20px / 1.25rem
H4 - Component Headings	Medium (500)	16px / 1rem
Body Text	Regular (400)	14px / 0.875rem
Small/Caption	Regular (400)	12px / 0.75rem

Font Import:

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&display=swap');

Secondary Typeface: Poppins

Poppins is used as a secondary typeface for specific accent elements, marketing materials, and when additional typographic variety is needed.

Usage	Weight	Size
Marketing Headlines	Bold (700)	Variable
Accent Text	SemiBold (600)	Variable
Buttons (alternate)	Medium (500)	14px

Font Import:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

---

Color Palette

Brand Colors

Name	Hex	Usage
Primary Purple	#9B4DCA	Primary actions, active states
Secondary Teal	#00A8B5	Secondary actions, accents
Accent Pink	#F5A3C7	Highlights, notifications
Accent Cyan	#3DD6D0	Success states, positive indicators

Neutral Colors

Name	Hex	Usage
Deep Navy	#1E1B4B	Backgrounds (dark mode)
Dark Gray	#374151	Secondary backgrounds
Gray	#6B7280	Muted text, borders
Light Gray	#E5E7EB	Borders, dividers (light mode)
Off White	#F9FAFB	Backgrounds (light mode)

Semantic Colors

Name	Hex	Usage
Success	#10B981	Success messages, confirmations
Warning	#F59E0B	Warnings, attention needed
Error	#EF4444	Errors, destructive actions
Info	#3B82F6	Informational messages

---

UI Components

Buttons

• Primary: Purple background with white text

• Secondary: Teal background with white text

• Outline: Transparent with colored border

• Ghost: No background, colored text

Cards

• Border radius: 8px (rounded-md)

• Subtle shadow in light mode

• Elevated background in dark mode

Tags/Badges

• Used for topics, categories, and status indicators

• Color-coded based on context (e.g., color="blue" for topics)

• Closable variant with rounded borders for editable items

---

Application Theme

Dark Mode (Default)

The Adaptive platform defaults to dark mode with:

• Deep navy background (#1E1B4B)

• Light text for primary content

• Muted text for secondary content

• Elevated card backgrounds

Light Mode

Available via theme toggle:

• Off-white background (#F9FAFB)

• Dark text for primary content

• Gray text for secondary content

• White card backgrounds with subtle borders

---

Downloads

• Logo (PNG)