Skip to content
Pixelvise
Pixelvise Atlas

Pixelvise Atlas Design System

A practical blueprint of the tokens and UI blocks used across Pixelvise.com — built for clarity, consistency, and systems-first delivery.

Principles

Built for systems, not aesthetics.

Pixelvise uses a minimal, high-contrast visual language with a disciplined grid and IBM-inspired sharpness. The goal is to reduce ambiguity, increase trust, and make complex systems feel navigable.

Clarity
Readable hierarchy, explicit labels, predictable UI patterns.
Discipline
Consistent spacing, limited palette, reusable blocks.
Accountability
Motion and interaction choices support outcomes, not decoration.
Logos

Primary & reverse marks

Prefer SVG for scalability. Use light PNG on dark surfaces.

Logo (dark / SVG)
Pixelvise logo (dark)
Download SVG
Logo (light / PNG)
Pixelvise logo (light)
Download PNG
Tokens

Colors

A single primary accent + disciplined neutrals for calm, readable interfaces.

Accent
#1061FE
Primary actions, highlights, focus.
Accent (light)
#3B82F6
Soft states + gradients.
Accent (dark)
#0D52D7
Hover/pressed.
Background
#FFFFFF
Background (secondary)
#F9FAFB
Foreground
#111827
Semantic colors
Success
#22C55E
Warning
#EAB308
Error
#EF4444
Typography

Inter (Variable)

InterVariable is the primary typeface across Pixelvise.com. We use tight tracking for headings and relaxed leading for body text to maintain a premium, product-grade reading experience.

Font stacks
Sans
InterVariable, Inter, system-ui
Mono
SF Mono, Fira Code, Menlo
Hierarchy
Overline / label
System label
Heading
Premium product typography
Body
Readable body copy with generous line-height and muted neutrals.
Why we use it
Variable weights let us control hierarchy without switching fonts. Combined with strict spacing and restrained color usage, typography becomes the main tool for clarity.
Layout

Grid, spacing, surfaces

A consistent container + gutter system ensures every page feels like part of the same product. Spacing follows an 8px rhythm to keep layouts predictable.

Container
Max width1280px
Gutterclamped 20–48px
Implementation`Container` / `Section`
This keeps layouts aligned across hero sections, cards, grids, and long-form pages.
Spacing scale
4--space-1
8--space-2
12--space-3
16--space-4
24--space-6
32--space-8
48--space-12
Radius
Default
~3px
Cards
6–8px
Pills
Full radius
Surfaces
White cards with subtle borders for structure.
Inset highlights (`shadow-[inset_0_1px_0_...]`) for premium depth.
Muted gray sections to separate narrative blocks.
Motion

Timing & easing

Motion is subtle and outcome-driven: hover lift, section fades, and clear focus states. We avoid gratuitous animation.

Durations
micro120ms
short180ms
medium260ms
long420ms
Easing
enterpower2.out
exitpower1.out
emphasispower2.out
Why it aligns with the brand
The Pixelvise brand is crisp and deliberate. Motion reinforces confidence: small feedback that communicates state, structure, and responsiveness.
Library

Components & UI blocks

These are the reusable blocks already used throughout the site. Each block exists to keep pages consistent, faster to build, and easier to maintain.

Component library (rendered)
Buttons
Badges
Enterprise partners Proven delivery Default Accent Success Warning Error
Icons
sparkles
globe
code
palette
rocket
users
Inputs + labels
Card primitive
Bordered card
Default surface for grouping information.
Elevated card
Used when you want stronger depth and hover affordance.
Highlight
Pattern examples (from site)
Service / capability cards
Web Design & Development
High-performance builds with product-like UX.
Branding & Visual Identity
Systems-first identity that scales across touchpoints.
Industry cards
Enterprise & Corporate
Governance-led delivery for complex orgs.
Technology & SaaS
Product interfaces and scalable platforms.
Financial Services
Trust, security, and performance constraints.
FAQ (accordion pattern)
How do you keep UI consistent across pages?

We standardize tokens (color, type, spacing) and reuse a small set of composable primitives (cards, buttons, inputs) across all blocks.

Why is the accent color used sparingly?

Limiting the accent keeps interfaces calm and ensures the blue reliably signals action, focus, and emphasis.

Core primitives
Container
Locks pages to a consistent max width and responsive gutters.
Section
Standardizes vertical rhythm and background treatments.
Card
Primary surface primitive for grouping content and actions.
Button / Badge / Input
Standard components for actions, status labels, and form entry.
UI kit (src/components/ui)
Accordion
Structured disclosure for FAQs and dense content while staying scannable.
Table
Clear information layout for comparisons, specs, and structured data.
Icon
Consistent icon sizing and stroke weight for a crisp, system feel.
Card / Button / Badge / Input
Composable primitives used to build most of the site’s UI surfaces.
Section
Standard spacing + background variants for consistent page rhythm.
Separator
Quiet visual dividers that keep layouts tidy without heavy lines.
Forms
Label system
Small, muted labels keep forms readable without adding noise.
Inputs + selects
Soft borders, clear focus rings, and controlled padding for stability.
Page sections used across Pixelvise.com
Hero
Sets the promise and establishes visual authority with controlled gradients and clear CTA.
Clients / Social proof
Builds trust quickly by showing recognizable brands and outcomes.
Stats
Compresses credibility into measurable signals and reduces uncertainty.
Expertise
Structured capability map with a consistent interaction model.
Industries
Clarifies relevance by mapping expertise to industry contexts.
Case studies
Demonstrates execution quality with proof-driven narratives.
Newsroom
Keeps the brand active and publishes high-signal updates.
FAQ
Reduces friction by answering objections at the point of intent.
Final CTA
Closes the journey with a single, focused action and minimal noise.
Header / Footer
Persistent navigation and trust anchors for enterprise clarity.
Why the system works
A small set of well-designed blocks reduces inconsistency across pages, keeps new additions on-brand, and speeds up delivery. The result is a site that feels engineered — not assembled.