Lab signal
Families tracked
7 shared shells
Product cards, KPI cards, trading controls, and feature cards are documented here together.
Loading page
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.
Pattern lab signals
Lab signal
Families tracked
Product cards, KPI cards, trading controls, and feature cards are documented here together.
Lab signal
Motion model
Entry timing, hover lift, and reduced-motion settings come from the shared motion file.
Lab signal
Adoption map
Platform, Solutions, Workspace, Prism, and Services have live references so designers and developers know where the system is already carrying work.
System charter
Use cards for information, links, evidence, or actions. Remove empty cards.
Token goal
Accent, radius, and shadow identify the card family before the user reads a word.
State goal
A read-only signal, linked card, and actionable card feel different immediately.
Adoption goal
The same shell changes tone and copy when it moves from Platform to Solutions, Workspace, or Prism.
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.
Cyan marks primary actions, blue marks system state, yellow marks sequence, lime marks success, sunset marks warnings, and ink anchors the layout.
Uppercase mono headlines give the cards a control-room feel, while body text stays readable on smaller screens.
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.
White cards use black shadows. Feature cards use color to show their category.
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
Use these for product overviews, hero sections, examples, and status boards.
Best used in
State note
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
Use this state when the page needs to explain readiness before it asks for a click.
Default state
Feature cards can explain an option without forcing the reader onto another page.
Best for service details, policies, and product explanations.
The motion file already gives the system its rhythm. These are the rules the cards page expects every route to respect.
01
Reveal timingMost 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 behaviorDefault lift is around 6px with a matching shadow. Avoid combining lift, rotation, and a large glow on the same card.
03
Scroll disciplineLooping effects are kept away from the main reading area.
04
Safety ruleIf 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
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
/The home page uses cards for product choices, account access, status, payments, and help.
Live page
/solutionsSolutions uses cards for services, project examples, pricing, and customer handover.
Live page
/workspaceWorkspace uses cards to keep projects, payments, and notices easy to scan.
Live page
/prismPrism uses the same card system for market data, sources, and research tools.
Live page
/services/*Service pages use the same cards for package choices, project examples, and next steps.
Usage reference
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.