Cards.Motion.
OneCTA.
The design system, condensed. One CTA, one card pattern, one headline pattern, one constellation visual. Every snippet is in production.
The Corbez design system, condensed. One CTA. One card pattern. One headline pattern. One constellation visual.
Every piece below is in production. Copy the snippet, paste it into a new surface, and the brand carries.
01 · Button
One navy CTA.
Three surfaces.
The button decision is mechanical. Light surface → navy fill, white text. Dark surface → white fill, navy text. Branded card on dark → navy fill again so the button connects to the brand.
Light surface
style={{ background: '#041737' }}
className="text-white"Dark surface
style={{ background: '#fff',
color: '#041737' }}Glass on dark
background: 'rgba(140,180,235,0.12)' border: '1px solid rgba(140,180,235,0.25)'
02 · Headline
The SplitHeadline.
Sans plus serif italic.
Every section headline uses this pattern. Two lines, same size, only the family changes. Sans first, serif italic underneath in #8cb4eb on navy or #1e4d99 on light.
On navy
Verifyonce.
Recognizedeverywhere.
On light
Partnerrates,
notcoupons.
03 · Card
The navy gradient card.
With the accent stripe.
The signature dark card. Navy gradient (082558 → 041737), 1px light-blue inset border, and a top-edge accent stripe that fades from transparent through bright blue to light blue.
01
Identity
Verified once.
Your work email becomes a portable credential. Show the pass anywhere we partner.
02
Recognition
At the counter.
Walk in. Get the rate. No code entry, no app fumbling, no awkward conversation.
03
Rail
Behind the scenes.
We never own the transaction. We carry the verification and the recognition signal.
<div
className="rounded-2xl p-7 relative overflow-hidden"
style={{
background: 'linear-gradient(148deg, #082558 0%, #041737 100%)',
border: '1px solid rgba(140,180,235,0.18)',
}}
>
<span
aria-hidden="true"
className="absolute left-0 top-0 h-0.5 w-full"
style={{
background:
'linear-gradient(90deg, transparent 0%, #1e4d99 40%, #8cb4eb 70%, transparent 100%)',
}}
/>
{/* content */}
</div>04 · Visual
The partner constellation.
A rail, in pictures.
The signature illustration. Corbez sits at the center. Companies and partner businesses radiate out. Lines draw on scroll. Use it on the marketing site for the 'how we connect three sides' moment.
05 · Motion
Reveal on scroll.
Stagger across cards.
Reach for the primitives in MotionSection.tsx. Reveal wraps anything that animates once on scroll. StaggerReveal does the card grid. SplitHeadline does the headline. Do not roll your own animations.
import {
Reveal,
StaggerReveal,
MotionChild,
SplitHeadline,
CountUp,
cardPop,
EASE,
} from '@/components/landing/MotionSection'
<StaggerReveal className="grid md:grid-cols-3 gap-5" staggerMs={0.07}>
{items.map((it) => (
<MotionChild key={it.id} variants={cardPop}>
{/* navy gradient card */}
</MotionChild>
))}
</StaggerReveal>Reveal
Wrap a block that fades up on scroll.
StaggerReveal
Parent for a grid of MotionChild cards.
SplitHeadline
Headline split into per-word reveal.
CountUp
Animated number that counts up on scroll.
06 · Eyebrow
The pill label.
On dark and light.
The eyebrow component above every section. On navy: light-blue text on a translucent light-blue chip. On light: navy text on a thin border.
Back to
Brand overview.