GFS Design System — Cards & Badges

01 Card System Overview 10 card types, flip animations, wallet stack

02 Employee ID Card Apple Wallet style badge with flip animation

Interactive — Click to flip

Employee ID cards use the primary cobalt gradient. Photo placeholder renders as a circle avatar. Front shows identity, back shows access and emergency info.

03 Vendor Access Card Facility access passes with zone badges

Access Level Variants

Vendor access cards color-code zone permissions. "Escort Required" uses a red accent to signal restricted access. Frosted overlay demonstrates tap-to-activate interaction.

04 Delivery Pass Boarding-pass style with route visualization

Delivery passes use the boarding-pass metaphor with origin/destination codes, a route progress indicator, and a tearoff divider with circular cutouts. Temperature requirements are badged.

05 Event Badge Conference and trade show badges — 3 role variants

Role Variants

Event badges use a split layout: gradient header for identity, white body for role and QR check-in. The colored stripe between sections indicates the track/role.

06 Product Certification Card Digital certificates with gradient border and verification QR

Certification Types

Certification cards use a gradient border (CSS mask technique) instead of a gradient fill. The gold-glow animation pulses subtly on USDA cards. QR codes link to verification endpoints.

07 Customer Loyalty Card Rewards tiers with points display and flip for benefits

Tier Variants

Loyalty cards use distinct gradient themes per tier: Silver (neutral), Gold (warm amber), Platinum (cobalt to sky). Large point balance is the focal element. Flip reveals benefits summary.

08 Shipment Tracking Card Live status with animated progress and temperature

Status Variants

Shipment tracking cards feature an animated progress indicator with pulsing dots for active status. Temperature readings show a live indicator. Delivered cards switch to the success gradient.

09 Training Certificate Card Completion certificates as wallet cards with verification seal

Certificate Variants

Training certificates feature an SVG starburst seal element. The card back reveals instructor, duration, and renewal details with a verification QR code.

10 Meeting Room Card Conference room booking passes — light theme variant

Room Cards

Meeting room cards use the light theme variant (white gradient, dark text) to differentiate from personal/identity cards. Status badges indicate availability. QR code links to room booking.

11 Card Stack Demo Apple Wallet stacked layout with hover fan and click expand

Card stacks use CSS transforms with cubic-bezier easing for the Apple Wallet spread effect. Hover fans cards slightly; click fully expands. Each card maintains its gradient identity in the stack.

12 Card Size & Print Reference Dimensions, bleed areas, and safe zones

All cards follow ISO/IEC 7810 ID-1 dimensions (standard credit card). The 16px border-radius is a special exception for this card system only -- all other GFS components use 8px max.

Digital Wallet Cards