Design System

Style Guide

A living reference for the visual language of X2Y.DEV, the colors, typography, components, and layout tokens that keep every marketing page consistent, accessible, and unmistakably ours.

Explore the system

01 · Brand

Logo & identity

The X2Y wordmark pairs a solid mark with a fuchsia dot separator and the DEV suffix. It inverts automatically for dark backgrounds.

X2Y DEV

02 · Color

Palette

Fuchsia is our accent, used for calls to action, links, tags, focus rings, and text selection. Slate carries everything else: backgrounds, surfaces, and text across light and dark modes.

Fuchsia · accent

fuchsia-50

fuchsia-100

fuchsia-400

fuchsia-600

fuchsia-800

fuchsia-900

Slate · neutral

slate-50

slate-100

slate-200

slate-400

slate-600

slate-800

slate-900

slate-950

Utility

Selection

bg-fuchsia-800

CTA gradient

#7775D6 → #E935C1

indigo-600 (legal)

slate-950 (hero)

03 · Typography

Type scale

Set in Figtree (weights 400 / 500 / 600). Headings run uppercase with tight tracking; body copy stays generous at text-lg leading-8.

Hero H1: Automation Development
text-4xl font-bold uppercase tracking-tight sm:text-6xl
Eyebrow: Grow Faster
text-base font-semibold text-fuchsia-600
Section H2: The team you need to deploy your strategy.
text-3xl font-bold tracking-tight sm:text-4xl
Body: Unleash the full potential of your online business with our comprehensive suite of services, from strategy to the deployment of powerful integrations.
text-lg leading-8 text-slate-600
Small / meta: Published Monday, July 6th, 2026.
text-sm leading-6 text-slate-500

04 · Actions

Buttons & links

The fuchsia primary link is our main CTA. Form buttons and the Breeze button set are used inside authenticated and utility flows.

Speak with us today Let's Talk Inline text link

05 · Badges

Badges & tags

B2B & B2C Ecommerce Ecommerce Automation

06 · Cards

Service card

The icon-led card is the workhorse of our services and navigation flyout: a rounded icon tile, a bold title, and supporting copy.

Ecommerce & Web Development: Tailored web solutions designed to scale your business and help you reach your goals faster.
Customer Experience & Design: Data-driven design that resonates with your audience and keeps them coming back for more.

07 · Forms

Inputs & newsletter

08 · Testimonial

Quotes

X2Y rebuilt our storefront and our conversion rate followed. The team treated our growth like their own.

⸻ Jane Merchant, Founder, Example Co.

09 · Notice

Announcement bar

Now booking Q3 Reserve a free assessment before slots fill up.

10 · Layout

Spacing & container tokens

Content container: mx-auto max-w-7xl px-6 lg:px-8
Prose width: max-w-2xl
Section rhythm: py-24 sm:py-32
Corner radius: rounded-md · rounded-lg · rounded-2xl
Focus ring: focus-visible:outline-fuchsia-900
Dark mode: class strategy · dark:*