Adteco brand · live preview

Agent Native
Infrastructure.

Your AI is only as smart as the context it has. We turn disconnected business systems into a unified intelligence layer agents can reason over.

Built for agent-speed workloads.

See components Page anatomy

00 · Brand mark

Logo

The official Adteco mark is a purple spiral paired with the "Adteco" wordmark. Two PNG variants ship from apps/web and are mirrored into apps/marketing/public/images/.

adteco_logo_dark.png Black wordmark · use on light surfaces (primary for marketing)

adteco_logo_light.png White wordmark · use on dark surfaces (e.g., the product app)

Why purple is primary: The spiral mark is #5D5DFF — the purple-600 token in apps/web/tailwind.config.js. The product app's home page leans into NetSuite blue/cyan as accents, but the brand identity color is purple. Marketing should lead with purple and use blue/cyan only as a secondary "product / integrations" accent.

Clearspace & sizing

Reserve at least 1× the cap-height of the wordmark on every side. Header default: height=40. Hero placements: height=56. Never stretch, recolor, or place on textured backgrounds.

01 · Foundation

Voice & positioning

The brand is technical, plain-spoken, and confident. The recurring shape is a contrast: built for humans versus built for agents. Use it in features, comparisons, and CTAs.

Current systems were built for humans — developers clicking buttons, reading dashboards.

Agents need infrastructure built for agents — unified context, real-time events, cross-system reasoning.

02 · Color

Color system

Light-first surfaces, purple-led brand accent, NetSuite blue/cyan as a secondary product accent. No teal, amber, coral, or sage — those belong to the deprecated brand.

Surface tokens

--bg #ffffff Page background

--surface #f7f8fa Cards, alt blocks

--ink #0f1116 Body text

--muted #5f6b73 Supporting text

--border-line #e6e8eb Hairlines

Brand accents

--brand-primary #5d5dff Primary — from the logo

--brand-deep #4b4acf Hover, deep accents

--brand-tint #f4f4ff Subtle brand background

--accent-blue #0066cc Secondary (product / integrations)

--accent-cyan #00a3e0 Highlight, link emphasis

--success #00a884 Positive signals, checks

Neutral scale

50 #fafbfc

100 #f1f3f5

200 #e6e8eb

300 #d2d6db

400 #9ba3ad

500 #6b7480

600 #4a525c

700 #2f353d

800 #1a1e24

900 #0f1116

Status panels

Build it yourself

🏝️Siloed system access
⏰Stale batch data
🚫Rate-limited APIs
🔗Manual entity mapping
🧩Fragmented context

With Adteco

🕸️Unified knowledge graph
⚡Real-time events
🚀Agent-speed APIs
🎯Auto entity resolution
🧠Complete business context

03 · Typography

Type system

Inter for everything. Hero h1 uses the purple gradient treatment; the rest is solid ink. Reserve gradient treatments for hero-only — overuse breaks the signal.

Agent Native Infrastructure

h1 · gradient · 48–80px / extrabold

Infrastructure AI Agents Want

h2 · brand gradient · 32–48px

Agent-Speed Economics

h2 · solid ink · 32–48px

Card title example

h3 · 18–20px / bold

Scale

xs 0.75rem · 12px Caption / legal

sm 0.875rem · 14px Nav / metadata

base 1rem · 16px Body copy

lg 1.125rem · 18px Body emphasis

xl 1.25rem · 20px Lead paragraph

2xl 1.5rem · 24px Card title (h3)

3xl 2rem · 32px Sub-section head

4xl 2.5rem · 40px Section head (h2)

5xl 3.25rem · 52px Section hero

6xl 4rem · 64px Page hero (h1)

04 · Components

Component patterns

Pill badge

The infrastructure layer AI agents actually want

Buttons

Primary action Secondary action Ghost action

Feature cards

🕸️

Unified Business Context

One graph connecting ERP, CRM, payments, and inventory. AI sees your business as one connected system.

✓Cross-system entity resolution
✓Relationship mapping
✓Unified customer view

🚀

Agent-Speed APIs

Designed for high-frequency, low-latency agent workloads. No rate limits. No throttling.

✓Sub-100ms response times
✓Batch operations native
✓Streaming support

⚡

Real-Time Event Streams

React instantly, not on batch schedules. Every business event becomes a trigger.

✓Change data capture
✓Event sourcing built-in
✓Pub/sub architecture

Reframe panel

Building agent infrastructure in-house — months of work, ongoing maintenance, hidden costs.

Using agent-native infrastructure — deploy today, pay for what you use, scale instantly.

Form input

Work email What are you trying to do?

05 · Page anatomy

Canonical page template

Marketing pages remix this set instead of inventing new section types.

Sticky header — light, dark wordmark, sparse nav, primary CTA on right.
Hero — pill badge → gradient h1 → 2 lead paragraphs → primary + secondary CTA.
"Tool your AI wants" panel — 3-column visualization in a soft surface card.
Three-pillar feature grid — icon cards on white with hairline borders.
Reframe panel — brand-tinted purple wash, "for humans / for agents" contrast.
Before/after comparison — muted negative panel vs. brand-tinted positive panel.
Credibility / proof — 3 stat columns on a muted band.
CTA band — purple-deep gradient, single h2, two CTAs.
Footer — light, four columns, dark wordmark.

06 · Migration

Bringing this app onto the brand

src/styles/global.css still references teal, amber, coral, and sage. To switch:

Swap CSS variables — replace --paper / --teal / --amber / --coral / --sage with the surface and brand tokens above.
Keep body light: background: #ffffff, color: #0f1116.
The header/footer logo img swap is already done (Logo.astro now renders the real PNG).
Replace .button-dark → purple-filled pill; .button-outline → 2px purple border, transparent fill.
Cards (.product-card, .metric-strip div, .timeline div): white fill, #e6e8eb border, border-radius: 14px, soft shadow on hover.
Recolor ProductVisual.astro nodes/edges to purple #5D5DFF with a cyan accent for the "active" node.
Load Inter via @fontsource-variable/inter instead of the Google Fonts fallback chain.

Ready to migrate

Stop building infrastructure. Start deploying agents.

We handle the plumbing. You focus on the intelligence.

Schedule demo See products

Agent NativeInfrastructure.