Active users
12,438+18.4%
vs prior 7 days
Card gallery
Every card the plugin can produce.
All using tokens, all dark-mode aware, all accessible. Hover, focus-visible, and reduced-motion respected on every interactive surface.
- 14 variants
- 0 hard-coded values
- WCAG AA verified
Stat card
A KPI tile with delta pill and inline sparkline. Use in dashboards and on marketing stat rows. Brand for positive deltas, accent for negative — color is never the only signal.
Profile card
Centered avatar, name, role, three-stat strip, and a primary + secondary action. Drop-in for member directories and hover-cards.
Ada Reyes
Senior Product Designer
- Posts
- 128
- Followers
- 4.2k
- Following
- 318
Product card
Tokenized illustration in lieu of raster — full token coverage, zero asset pipeline. Hover lifts the surface; the rating is text-and-icon, not color-only.
Footwear
Drift Runner v2
Engineered for long miles with a foam midsole and a recycled mesh upper.
4.6 · 218
Pricing card
Two tiers side-by-side with a gradient-bordered featured tier. Spend the loud pattern (gradient border) on the page's single most important card — the one we want users to pick.
Starter
$9/seat/mo
Everything to get the first project shipped.
- Unlimited projects
- Up to 25 collaborators
- Custom domains + SSL
Team
$29/seat/mo
For growing teams that need more room and roles.
- Unlimited projects
- Up to 25 collaborators
- Custom domains + SSL
- Priority email support
- Daily backups
Status card
Status pill + title + body + tertiary action. Three tones — operational, degraded, outage — using brand, accent, and a token-mixed red.
All systems normal
All 14 services responding under target latency. Last check 12s ago.
Elevated latency in EU-WEST
Average response time +180ms. Investigation in progress.
Checkout API unreachable
Payments are failing. On-call engineer paged 4 minutes ago.
Gradient card
Full-bleed brand gradient with decorative orbs and a faint grid. White-on-brand contrast verified; CTAs swap to a white surface for AA on the gradient.
Pro plan
Ship faster with shipit Pro.
Unlimited projects, custom themes, and priority refine queues.
Glass card
Glassmorphism only over a tinted scene — never on body content. backdrop-filter falls back gracefully when unsupported.
Crafted on the glass
Glassmorphism lives on overlays — sticky nav, command palettes, sheets — never on body cards. This one sits over a brand-tinted hero.
- Blur
- 20px
- Saturation
- 180%
Action card
Whole card is a link. Icon, title, body, ghost arrow CTA. One affordance per card — no nested clickable rows.
List card
A header with metadata + an ordered list with right-aligned deltas. Tabular numerals throughout — counts and percentages line up across rows.
Top pages
Last 7 days · across all properties
- +18.4%
Pricing page A/B
12,488 views
- +6.1%
Onboarding tour
9,210 views
- -2.4%
Changelog v3.2
4,506 views
- +4.0%
API reference
3,118 views
- —
Status page
2,884 views
Alert card
Info, warn, danger banners with icon, title, body, dismiss. Each tone has matched bg/border/foreground at AA; the icon doubles the color signal.
New tokens available
Your design system was updated last night — review the new accent ramp before publishing.
Trial ends in 3 days
Pick a plan to keep your team's projects active. No data is deleted during the grace period.
Couldn't publish theme
Two CSS variables are unresolved: --color-success-500 and --color-success-700. Fix and retry.
Comment card
Avatar + name + handle + timestamp, body, reactions row. Each reaction is a real toggle button with aria-pressed.
Mira Kapoor
@mira
Love how the new tokens make the dark mode feel less “inverted” — the slate tint at L=20 is doing a lot of quiet work here. Shipping the audit feedback today.
Project card
Gradient cover, title, due-date pill, stacked member avatars, and a real progressbar with aria-valuenow.
Marketing site
Q3 launch — pricing rework
New plan structure, gradient-bordered featured tier, comparison table.
Progress72%
Calendar card
Date block with month label + day, time, title, location, attendees, and primary/secondary actions. The date block uses brand-on-fg for AA in both themes.
Tuesday · 10:30 – 11:00 AM
Design review — pricing redesign
Zoom · meet.shipit/pricing-q3
Walkthrough of the gradient-border featured tier, then async Q&A in #design.
Upload card
Native <input type='file'> hidden under a styled drop-zone label. Four states — idle, hover, error, success — token-mixed for missing danger/success tokens.
Built with shipit-ui-design.