AI Settings Showcase

Every section below is rendered live from Atarim’s own resolved workspace AI settings — not paraphrased, not invented.

1. Brand Identity

Resolved from the workspace AI settings record for Atarim.

Live logomark rendered from the brand kit’s inline SVG (fills #ffffff / #9385ff, reversed on #16042e background). No hosted logo_url is set in the settings record — the header logo is stored as inline SVG only.

Favicon set

Audience: Digital agencies, web design/development teams, hosting companies, and enterprise service providers managing multiple client websites.

Primary goal: Convert visitors into trial users or qualified agency leads by positioning Atarim as the AI web agency solution.

Secondary goals:

Encourage agencies to add Atarim to their service offering
Drive exploration of agency, hosting, and enterprise use cases
Build trust through compliance, scale, and proof points
Reduce friction toward pricing, signup, or contact actions

Success metrics:

Free trial or demo starts
Agency signups and onboarding completion
Conversion from visitors to qualified leads
Engagement with use-case and pricing pages
Trust-building actions such as enterprise/contact inquiries

Business overview: Atarim is an AI web agency platform that plugs into agencies’ existing offerings to handle proactive website work across client accounts. It automates audits, fixes, content, SEO, and scheduled care while keeping the experience under the agency’s brand. The platform is designed to help agencies deliver more value, stay proactive, and preserve client relationships.

Unique value proposition: Atarim differentiates itself by functioning like an AI web agency that operates under the agency’s own brand and guardrails. It combines automation with white-label client interactions so agencies can scale service delivery without losing ownership of the relationship.

Products & services: Core services include AI-driven website audits, automated fixes, content updates, SEO support, scheduled site care, and branded client self-service workflows. It also appears to offer agency-focused onboarding, enterprise-ready capabilities, and use-case-specific solutions for agencies, hosting providers, and larger organizations.

2. Voice & Positioning

Voice & tone: Confident, visionary, product-led, and persuasive with a strong emphasis on autonomy, trust, and agency positioning.

Guidelines: The site is positioned as an AI-powered extension of a web agency rather than a standalone generic software tool. Messaging strongly emphasizes white-label client experiences, proactive website care, and protecting agency relationships while monetizing work that would otherwise be handled manually or absorbed as scope creep.

Style & vibe: Modern, bold, high-trust, futuristic, polished, and agency-focused.

Design preferences: Clean, modern, and conversion-focused with a light primary canvas, occasional dark contrast sections, rounded pill-style elements, and elevated cards/buttons. The brand feels contemporary and tech-forward rather than playful; avoid clutter, heavy ornamentation, and overly traditional corporate styling.

Project types:

SaaS Platform
Marketing Website
Client Portal

Inspiration websites:

Teamwork (teamwork.com) — B2B software with a polished, trust-building marketing presence aimed at agencies and service teams, similar in its clear value-led messaging.

3. Colour System

Primary and accent roles, followed by the full extracted palette (18 swatches). Hover any swatch.

Primary

#6D5DF3Primary actions, links, the spark

#23104ACards, raised surfaces, nav fill

Accent

#3ed696Ratings, success, positive proof

#522B9ERadial glow behind hero & focal points

#FF5A48Rare: Coral

#FCD227Rare: Sun

#E72D67Rare: Raspberry

#279AF1Rare: Sky

#FFA532Rare: Tangerine

Full extracted palette

#ffffffWhite

#3ed696Emerald

#6d5df3Medium Slate Blue

#8a7ea3Light Slate Gray

#574a6eDark Slate Blue

#16042eCharcoal

#1a0830Charcoal

#eae4f5Lavender

#998cc2Medium Purple

#1b9a66Sea Green

#5547d6Slate Blue

#c8bce8Thistle

#ede9f8Lavender

#f4f0fbWhite Smoke

#e0d8f1Lavender

#f7f5fcWhite Smoke

#fbfafeSnow

#9385ffMedium Slate Blue

#0e7a4eSea Green

4. Typography

Brand fonts: Fira Sans Condensed (Heading, weight 600) and Roboto (Body, weights 400/700). Hover a sample — the accent rule shifts colour.

H1 sample

h1 — Fira Sans Condensed, 98px / 600, line-height 0.96, letter-spacing -1.96px

H2 sample

h2 — Fira Sans Condensed, 54px / 600

H3 sample

h3 — Fira Sans Condensed, 46px / 600

Display sample

display — Fira Sans Condensed, 27px / 600

Body text sample — the quick brown fox jumps over the lazy dog.

body — Roboto, 16px / 400

Link text sample

link — Roboto, 13px / 400, line-height 1.40

Button label sample

button — Roboto, 16px / 700

Caption text sample

caption — Roboto, 12px / 400, line-height 1.00

5. Layout & Spacing Tokens

Container max-width: 1840px

Gutter: 40px

Section padding: 92px top / 92px bottom

Border-radius tokens:

Card: 18px
Image: 999px (squircle)
Input: 24px (squircle, low confidence)
Button: 999px (squircle)

Spacing base unit: 8px

Common spacing values:

2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 22, 24, 30, 90 (px)

6. Buttons & Shadows

Live-rendered buttons from the brand kit’s captured states — hover to feel the 180ms fast transition.

Filled — bg #6d5df3, radius 24px, padding 13px 22px, font 15px / 700. Hover darkens to #5a4bd6 and lifts with the brand glow shadow; active returns to #4a3cb8. Outlined — transparent bg, 1px #6d5df3 border, radius 999px (pill), padding 13px 28px, font 15px / 700.

Elevation tiers

Hover a tier — cards lift the same way they do resting-to-hover on the live site (tier1 → tier2, 200ms ease).

Tier 1

Resting shadow for cards, panels, dropdowns.

Tier 2

Hovered/floating surfaces, lifted above tier1.

Tier 3

Top-level overlays, modals, full-screen surfaces.

7. Motion & Effects

Easing: ease (the only easing captured on the live site)

Durations: fast 180ms (button hover), normal 200ms (card transitions), slow 250ms (page/section transitions — used for this page’s scroll-reveal)

Animated properties: color, transform, box-shadow, background, border-color

Backdrop blur effect: blur(18px) saturate(1.5), shown here with a drifting glow behind the glass panel.

backdrop-filter: blur(18px) saturate(1.5)

Gradients

The primary-to-accent sweep animates its position using the same ease timing as the rest of the page.

Linear — dark hero backdrop

Radial — dark section glow

Radial — primary closest-side glow

Radial — accent closest-side glow

Linear — primary-to-accent sweep (animated)

Linear — pale lavender surface

Conic — progress-ring style

8. Tech Context

Informational snapshot only — not part of the design system.

CMS: WordPress (v7.0)

Theme: atarim-v5 (not a child theme)

Builder: custom theme (medium-confidence detection)

Frontend runtime: jQuery-based, not an SPA

Active plugins (live site): Atarim — Visual Feedback, Review & AI Collaboration; PrettyLinks; Safe SVG; Yoast SEO; Yoast SEO Premium

9. Visual Constraints

Required

Prominent brand-led hero messaging
Clear CTA placement such as Start Free or similar conversion action
Rounded/pill UI treatments
High-contrast sections using light and dark surfaces
Strong trust signals such as compliance, user counts, and social proof

Forbidden

Cluttered layouts
Overly decorative graphics
Muted or overly rustic styling
Dense text walls without visual hierarchy
Playful cartoonish illustrations that weaken the professional AI agency positioning