Attnom Cards

The card system is now a lab,
not a loose gallery.

Attnom Cards documents the rules behind the card system: token logic, state behavior, motion discipline, and where each family is already live across the product.

Open state labInspect adoption map

Pattern lab signals

The documentation now lives inside the same visual language it describes.

Lab signal

Families tracked

Source of truth

7 shared shells

Product cards, KPI cards, trading controls, and feature cards are documented here together.

Lab signal

Motion model

Shared motion

4 rules

Entry timing, hover lift, and reduced-motion settings come from the shared motion file.

Lab signal

Adoption map

Live pages

5 live route groups

Platform, Solutions, Workspace, Prism, and Services have live references so designers and developers know where the system is already carrying work.

System charter

Every card needs a clear job.

Use cards for information, links, evidence, or actions. Remove empty cards.

Open servicesOpen account

Token goal

Recognizable fast

Accent, radius, and shadow identify the card family before the user reads a word.

State goal

Clear state

A read-only signal, linked card, and actionable card feel different immediately.

Adoption goal

Route-aware

The same shell changes tone and copy when it moves from Platform to Solutions, Workspace, or Prism.

Token docs

A small set of visible rules keeps the whole card system coherent.

If a new card breaks one of these rules, treat it as a new family and document it instead of slipping it in as a one-off.

Accent logic

Meaning rides in the tint, shadow, and chip.

Cyan marks primary actions, blue marks system state, yellow marks sequence, lime marks success, sunset marks warnings, and ink anchors the layout.

Cyan = primary actionBlue = trust/systemYellow = sequence
Type system

Display Mono handles authority; body copy stays readable.

Uppercase mono headlines give the cards a control-room feel, while body text stays readable on smaller screens.

Mono for labels + titlesBody font for detailAvoid long all-caps paragraphs
Shape + edge

Rounded shells stay generous, but borders stay hard.

Most cards sit in the 28-36px radius band with a black 2px keyline. That contrast keeps the system feeling premium without turning soft or anonymous.

28px utility cards32px feature cards2px black edge
Shadow discipline

Offset shadows help separate card levels.

White cards use black shadows. Feature cards use color to show their category.

Black for neutral shellsTone shadow for premium shellsHover lift stays physical
State lab

Preview the default, linked, and actionable versions before using a card family in a route.

The right question is not which card looks good, but which state best matches the next job the page has to do.

Card family

State behavior

Current guidance

Premium utility cards

Use these for product overviews, hero sections, examples, and status boards.

Best used in

Home pageSolutionsWorkspacePrism

State note

Default state

The card explains a signal without forcing the user to click immediately.

Last interaction

No live interaction yet. Open an actionable card state to see what the component emits.

Default state

Card state

Signal

Read-only signal

Use this state when the page needs to explain readiness before it asks for a click.

Default state

Evidence can stay self-contained.

Feature cards can explain an option without forcing the reader onto another page.

Best for service details, policies, and product explanations.

Motion rules

Animation should show state or guide attention.

The motion file already gives the system its rhythm. These are the rules the cards page expects every route to respect.

01

Reveal timing

Entrance rhythm sits in the 0.38s-0.52s band.

Most card entrances use spring easing 0.22 / 1 / 0.36 / 1 with fade-up behavior. Save larger blur reveals for section wrappers, not every child card.

02

Hover behavior

Hover lift stays physical and small.

Default lift is around 6px with a matching shadow. Avoid combining lift, rotation, and a large glow on the same card.

03

Scroll discipline

Cards animate once and then stay still.

Looping effects are kept away from the main reading area.

04

Safety rule

Reduced-motion and touch safety outrank flair.

If a control disappears behind scale-zero animation or lands below a 40px hit target, the motion is wrong. Safety and readability win over flourish every time.

Adoption map

Where the system is already live

These references point to real pages already importing the shared card families, so the lab stays grounded in actual adoption instead of aspirational design language.

Live page

/

Platform entry

The home page uses cards for product choices, account access, status, payments, and help.

MetricBandCardCommandCardSplitInsightCard
Open

Live page

/solutions

Solutions

Solutions uses cards for services, project examples, pricing, and customer handover.

MetricBandCardProofCardTimelineCard
Open

Live page

/dashboard

Account layer

Workspace uses cards to keep projects, payments, and notices easy to scan.

SplitInsightCardCommandCardProofCard
Open

Live page

/prism

Prism intelligence

Prism uses the same card system for market data, sources, and research tools.

MetricBandCardCommandCardTimelineCard
Open

Live page

/services/*

Service pages

Service pages use the same cards for package choices, project examples, and next steps.

Section shellCustom lab shellsCTA routing
Open

Usage reference

Start from the shared families before inventing a new card.

Reuse an existing card when it fits. Add a new one only when the current set cannot handle the content or action.

import {
  CardDock,
  CommandCard,
  MetricBandCard,
  ProofCard,
  SplitInsightCard,
  TimelineCard,
} from '@/components/ui';

// Compose the smallest family that fits the page job.
// Document new state behavior here before shipping it elsewhere.