UI Primitives — atfx-theo

Theme preview

Two themes only — atfx (warm cream + coral, default) and atfx-dark (warm near-black + lighter coral). Both share DM Sans + the global page texture per DESIGN.md.

Pill buttons

Primary CTA pattern per DESIGN.md — text slides up on hover, icon slides diagonally out the top-right and duplicates in from the bottom-left.

Custom iconCustom icon

Trustpilot pill

5 green stars with fractional final star. Full star count + fraction computed from the rating prop.

Unsere Bewertungen auf Trustpilot ansehen

Textured gradient cards

The core AttentionFox aesthetic per DESIGN.md. 3-layer: pastel gradient + coral blob (blur 30px) + SVG grain overlay. Six variants.

AI Lead Gen

ScaleUp GmbH

€90.000/Monat · 2 Operators.

Tech

Trust + Data

Cross-channel attribution for a B2B SaaS.

Growth

Organic + Paid

+240% Pipeline in 9 months.

Lead-Gen

Warm Outbound

Cold email + intent data.

Strategy

Calm Brand

Positioning workshop → relaunch.

Content

Editorial Engine

Monthly programmatic SEO output.

Buttons

Variants × sizes × loading/icons.

Form controls

Input, Select, Toggle, Checkbox, RadioGroup.

Brand name

Slug

Used in the brand's URL.

Invalid

Must be a valid email address.

Timezone

Auto-sync hourlyDispatcher polls every hour in the background.Opt in to beta featuresThings might break.Disabled toggle

I accept the termsSee docs/legal/terms.mdSend me a weekly digest

Default revenue sourceGoogle Analytics 4Neutral, cookie-based (MVP default).Platform self-reportsSum of ad-platform attributed revenue.Shopify (not available)Ships in Phase 4.

Tabs

Pure-CSS radio-based; survives server rendering.

High-level KPIs for the selected date range.

Onboarding steps

Progress indicator for the new-brand flow.

Workspace
Name & slug
Brand
Timezone & currency
Connect Meta
OAuth
First sync
90-day backfill

Stats

Dashboard KPI tiles.

Spend (last 30d)

€12,430

↑ +8.2%vs prev 30d

GA4 revenue

€48,912

↑ +12.4%vs prev 30d

Blended ROAS

3.94×

↑ +0.3GA4 rev / ad spend

Orders

612

→ ±0%via GA4 purchases

Progress

Sync progress + indeterminate.

Syncing Meta Ads · 72%72%

Google Ads · complete100%

TikTok · rate-limited, retrying45%

Pinterest · connecting…

Badges, Avatars, Kbd

Inline decorations.

NeutralConnectedSyncingNeeds reauthInfo

DB

A

L

Trigger sync withShiftS

Tooltips

Hover any KPI-like label to see the attribution source.

Cards

Container primitive.

Meta Ads

Last synced 12 minutes ago

Pulling campaign-level insights for the last 30 days.

A card without a header; just a body slot.

Tables

Integrations list pattern.

Platform	Account	Status	Last synced
Meta Ads	act_12345 · Demo brand	Connected	12 min ago
Google Ads	123-456-7890 · Demo brand	Needs reauth	2 days ago
TikTok Ads	adv_67890 · Demo brand	Syncing	now

Empty states

For routes with nothing to show yet.

No integrations yet

Connect Meta Ads to pull in your first 90 days of campaign data.

Alerts

Inline banners.

Connected

First sync is running in the background. Data will appear within a few minutes.

Sync overdue

Last successful sync was 48 hours ago.

Reauth required

The Meta access token has expired. Reconnect to resume syncing.

You can disconnect an integration at any time; historical data stays.

Modal

Native <dialog>; trigger is a client island.

Toast area

Placement demo; real toast system follows later.

Toasts render in a fixed overlay. Bottom-right by default.

Meta sync started

2 campaigns updated

Loading & Skeletons

Icon reference (Lucide)

Default stroke 1.5 per DESIGN.md. Sizes: 16 / 20 / 24.

ArrowRight 16

Sparkles 20

TrendingUp 20

TrendingDown 20

Calendar 20

AlertCircle 20