Design System

Component Library & Brand System

Every component, variant, state, and design token in the Embark brand system. Use this page as a reference to replicate the Embark look on any product.

Colours

Core Palette (Light Mode)

Background

--background: 0 0% 96%

Foreground

--foreground: 0 0% 13%

Primary

--primary: 0 100% 50%

Primary Foreground

--primary-foreground: 0 0% 100%

Card

--card: 0 0% 100%

Secondary

--secondary: 0 0% 93%

Muted

--muted: 0 0% 96%

Muted Foreground

--muted-foreground: 0 0% 41%

Accent

--accent: 0 0% 98%

Border

--border: 0 0% 92%

Destructive

--destructive: 357 100% 45%

Link

--link: 0 0% 32%

Dark Mode Palette

Background

0 0% 4%

Foreground

0 0% 97%

Primary

0 0% 100%

Card

0 0% 11%

Secondary

0 0% 14%

Muted

0 0% 13%

Muted FG

0 0% 68%

Border

0 0% 17%

Destructive

0 100% 68%

Link

0 0% 87%

Chart Colours

Chart 1

--chart-1

Chart 2

--chart-2

Chart 3

--chart-3

Chart 4

--chart-4

Chart 5

--chart-5

Accent Gradients

The brand accent gradient uses five CSS custom properties. These power the rainbow button, shine border, typewriter, and all gradient effects.

Gradient Colours

Color 1

--color-1: #ff0000

Color 2

--color-2: #8b00ff

Color 3

--color-3: #cc0066

Color 4

--color-4: #6600cc

Color 5

--color-5: #ff3333

Full Gradient Bar

linear-gradient(90deg, --color-1, --color-5, --color-3, --color-4, --color-2)

Gradient Bullet

Used in service bullet lists for brand-consistent list markers

Typography

Font Family

Inter for both body and headings.
--font-body-family: Inter --font-heading-family: var(--font-body-family)

Heading Scale

text-6xl / font-heading / font-semibold / tracking-tight / leading-tighter

Heading 1

text-5xl / font-heading / font-semibold / tracking-tight

Heading 2

text-4xl / font-heading / font-semibold / tracking-tight

Heading 3

text-3xl / font-heading / font-semibold / tracking-tight

Heading 4

text-2xl / font-heading / font-semibold / tracking-tight

Heading 5

text-xl / font-heading / font-semibold / tracking-tight

Heading 6

Body Text

text-lg / leading-relaxed / tracking-tight / text-muted-foreground (page descriptions)

This is the standard page description style used below hero headings across all pages.

text-base / tracking-tight (default body)

Regular body text for content paragraphs and general reading.

text-sm / leading-relaxed / text-muted-foreground (card content)

Smaller text used inside cards and component descriptions.

text-xs / text-muted-foreground (captions, metadata)

Caption text for metadata, timestamps, and small labels.

Tracking Tokens

tracking-tighter-0.05emTight hero text

tracking-tight-0.025emDefault body tracking

tracking-normal0emNormal tracking

tracking-wide0.025emSlightly wider

tracking-wider0.05emWider tracking

tracking-widest0.1emUPPERCASE LABELS

Custom Line Heights

leading-tighter = 1.125 (custom utility for hero headings)

Buttons

Variants

Sizes

With Icons

States

Full Width

As Link (asChild)

Link as Button Secondary Link

All Variants × Sizes Matrix

Variant	xs	sm	default	lg
default
secondary
outline
destructive
ghost

Rainbow Buttons

Primary CTA button with animated gradient border and glow effect. Uses --color-1 through --color-5 accent gradient.

Variants

Sizes

As Link (asChild)

Book a Discovery Call

Inside Dark Section

Rainbow button automatically inverts to white inside .section-dark

Badges

Variants

DefaultUppercaseFilledOutline

Sizes

XSSmallMediumLarge

Outline Sizes

Small OutlineMedium OutlineLarge Outline

Gradient Badge (Custom)

Discount

Inline gradient badge used in navigation and pricing — not a Badge component, but a common brand pattern.

Form Elements

Input

Default Input

Disabled Input

With Value

Textarea

Default Textarea

Disabled Textarea

Select

Select Option

Checkbox

Unchecked

Checked

Disabled

Accordion

Animations: animate-accordion-down / animate-accordion-up (0.2s ease-out)

Tabs

Identity systems that position you for growth.

Active trigger: data-[state=active]:text-foreground. List bg: bg-muted

Tooltips

Background: bg-primary. Text: text-primary-foreground. Entrance: zoom-in-95 + slide from opposite side.

Cards

Basic Card

Card Title

Standard card with rounded-xl, border, bg-card, and p-6. Automatic soft shadow elevation on light backgrounds.

Tag

With Badge

Cards commonly include a Badge at the top for categorization.

Interactive Card

Interactive cards (links/buttons) get a hover shadow with red accent tint.

Service Card Pattern

Brand

Identity systems that position you for growth.

Positioning, visual identity, typography, and color systems — designed together.

Logo system
Color + typography
Brand voice guide

Card Shadow Behaviour

Static cards: box-shadow: 0 0 0 1px rgb(0 0 0 / 0.03), 0 2px 4px rgb(0 0 0 / 0.02), 0 8px 24px rgb(0 0 0 / 0.05)
Interactive hover: border-color shifts to hsl(0 100% 50% / 0.12) (red accent tint).
Skipped inside .section-dark.

Shine Effects

ShineBorder

Animated gradient border that rotates around the element. Used on pricing cards, promo badges, and featured content.

Card with ShineBorder

Persistent animated gradient stroke around the container.

ShineBorder Props

borderWidth — default 1px

duration — animation speed in seconds (default 14)

shineColor — single color or array of gradient stops

ShineCard (Hover Reveal)

Wraps any card to add ShineBorder on hover only. Default colors use the accent gradient.

Hover me

Shine border appears on mouse enter.

Copy Command

npx create-embark-app@latest

npm install @embark/ui

Mono font, h-10/h-11, copy-to-clipboard with check animation. Uses useCopyToClipboard hook.

Animated Text

AnimatedGradientText

Animated gradient background-clip text effect. Configurable speed, colorFrom, and colorTo.

Default colours (#ffaa40 → #9c40ff)

Gradient Text Effect

Brand colours (--color-1 → --color-2)

Brand Gradient Text

Typewriter

Cycles through words with type/delete animation. Text uses the accent gradient with shimmer. Includes blinking cursor.

We build

typeSpeed — ms between character types (default 80)

deleteSpeed — ms between character deletes (default 50)

pauseDuration — ms pause before deleting (default 2000)

Reveal Animations

GSAP-powered scroll-triggered reveal animations. Elements animate into view when they cross 92% of viewport. Powered by ScrollTrigger.

Reveal — Single Element

Each box triggers independently when scrolled into view. Scroll down to see them animate.

fade-up

opacity: 0, y: 32 → visible

fade-in

opacity: 0 → visible

blur-in

opacity: 0, y: 12, blur: 8px → visible

scale

opacity: 0, scale: 0.92 → visible

slide-left

opacity: 0, x: -40 → visible

slide-right

opacity: 0, x: 40 → visible

delay — ms delay before animation starts (default 0)

duration — seconds (default 0.8)

RevealGroup — Staggered Children

Parent container staggers all direct children with a configurable delay between each.

Item 1

Item 2

Item 3

Item 4

stagger — ms between each child (default 100)

as — 'div' | 'ul' | 'ol' | 'section'

Section Themes

The .section-dark class flips the colour context to dark mode tokens. Used on CTA sections, hero backgrounds, and footers. All child components adapt automatically.

Light Section (Default)

Light

Default section styling

Background: bg-background. Text: text-foreground.

Dark Section (.section-dark)

Dark

Dark section styling

Buttons, badges, and text auto-adapt. Outline button gets white border/text.

Alternating Background

Alternating sections use bg-[#fafafa] for subtle contrast against the default bg-background (hsl 0 0% 96%). Some sections use shadow-[0_8px_32px_rgba(0,0,0,0.06)] for elevation separation.

Page CTA

Reusable dark-section CTA block with video/image on the right and text on the left. Used at the bottom of every service page. Responsive: video on top (mobile), side-by-side (desktop).

badge — top label (default "Next Step")

heading — main heading text

description — paragraph below heading

primaryLabel / primaryHref — RainbowButton CTA

secondaryLabel / secondaryHref — optional outline button

videoSrc — optional video (falls back to static image)

Spacing & Layout

Border Radius Tokens

radius-sm

calc(var(--radius) - 4px)

radius-md

calc(var(--radius) - 2px)

radius-lg

var(--radius)

radius-xl

calc(var(--radius) + 4px)

radius-2xl

calc(var(--radius) + 8px)

Button Radius Tokens

b-rounded-xs

0.125rem (2px)

b-rounded-sm

0.25rem (4px)

b-rounded-md

0.375rem (6px)

b-rounded-lg

0.5rem (8px)

Container Width

Max width: max-w-7xl (80rem / 1280px)
Horizontal padding: px-5 md:px-8

Section Vertical Spacing

Standard: py-16 md:py-20 lg:py-24 xl:py-28
Compact: py-12 md:py-14 lg:py-16 xl:py-20

Custom Variables

--sticky-header-height: 3.25rem

--footer-safe-area-spacing: 0rem

--radius: 0.375rem (base radius)

Button Hover Effects

All buttons with [data-slot='button'] receive a premium hover lift and shadow effect.

Hover Behaviour

Hover: translateY(-2px) + subtle red-tinted shadow

Active: translateY(0) + no shadow (instant press)

Dark section: stronger black shadow instead of red tint

Transition: cubic-bezier(0.16, 1, 0.3, 1) — springy deceleration

Secondary Button Rainbow Border

Secondary variant includes .btn-rainbow-border — a hidden rainbow gradient border that fades in on hover.

Visual Effects

Background visual effects used across hero sections and feature areas. All are pointer-events-none absolute inset-0 canvases positioned behind content.

HeroAtmosphere

Sunbeam glow + floating particles. CSS gradients + lightweight canvas (~28 particles). Used in dark hero sections.

Sunbeam: radial-gradient ellipses with drift animation (14s alternate)

Red fringe: subtle halo with blur-2xl

Particles: canvas-rendered circles with wrap-around movement

MagneticDots

Interactive dot grid with spring physics. Dots follow mouse cursor and burst outward on click.

spacing — grid gap (default 32px)

dotSize — base dot radius (default 1.2px)

influenceRadius — mouse influence range (default 150px)

pullStrength — magnetic pull force (default 0.35)

Click creates accent-coloured ripple rings with connection lines between displaced dots

LightRays

WebGL shader-based light rays radiating from a configurable origin. Mouse-reactive with smooth follow.

raysColor — hex colour for ray tinting

lightSpread / rayLength / raysSpeed — shape controls

pulsating — enable brightness pulsing

followMouse / mouseInfluence — mouse reactivity

noiseAmount / distortion — organic feel

Uses IntersectionObserver — only renders when visible

GradientWave

WebGL light streaks radiating from a configurable origin with gradient color blending and mouse influence.

colorFrom / colorTo — gradient endpoints (default #8b00ff → #ff0000)

origin — 'bottom-right' | 'center-right' | 'top-right' | 'bottom-center'

speed / amplitude / layers / opacity — animation controls

variant — 'light' | 'dark' (dark gets brightness boost)

mouseInfluence — how strongly cursor shifts the origin point

RippleGrid

Interactive square grid with hover glow and click ripple effect. Accent gradient colours on click.

squareSize / gridGap — grid dimensions

variant — 'light' (white hover + red/purple ripple) | 'dark' (blue glow + cyan ripple)

maxOpacity / rippleRadius / rippleDecay — effect tuning

Hover: white squares with drop shadow. Click: expanding gradient-coloured ring.

Edge fade mask applied via CSS mask-composite.

FlickeringGrid

Subtly flickering square grid as ambient background texture.

squareSize — default 4px

gridGap — default 6px

flickerChance — probability per frame (default 0.3)

color — square fill colour

maxOpacity — max opacity per square (default 0.3)

Uses IntersectionObserver + ResizeObserver for performance

AnimatedBeam

SVG beam connecting two DOM elements with animated gradient. Uses Framer Motion for gradient animation.

containerRef / fromRef / toRef — required ref connections

curvature — bezier curve amount

reverse — flip gradient direction

gradientStartColor / gradientStopColor — beam colours

duration / delay — animation timing

ImageSlider

Infinite-loop carousel with peek side slides, drag/swipe, progress dots, and auto-advance.

images — array of {src, alt, width, height}

duration — auto-advance interval in ms (default 5000)

aspectRatio — Tailwind aspect class (default 'aspect-video')

75% width active slide, 92% scale for inactive, smooth cubic-bezier transitions

Supports both images and videos (.mp4 / .webm auto-detected)

Pause on hover, drag threshold 15% of container width

Separator

Horizontal

Vertical

Left

Right

bg-border colour, 1px thickness. Horizontal: h-px w-full. Vertical: h-full w-px.

Sheet

Radix Dialog-based side panel overlay. Used for mobile navigation. Slides in from any side with backdrop overlay.

side — 'top' | 'bottom' | 'left' | 'right' (default 'right')

Overlay: bg-black/80. Panel: bg-background, p-6, shadow-lg.

Animate in: 500ms ease-in-out. Animate out: 300ms.

Max width on left/right: sm:max-w-sm. Close button: top-4 right-4.

Subcomponents: Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription.

CSS Animations

animate-accordion-down / up

Height transition 0.2s ease-out for Radix accordion content.

animate-logos (marquee)

translateX(0) → translateX(-50%), 60s linear infinite. Used for logo strips and testimonial sliders.

animate-marquee

Same as logos but 45s. Used for the testimonial wall horizontal scroll.

animate-shine

background-position 0%→100%→0%, duration from --duration variable. Powers ShineBorder.

animate-rainbow

background-position 0%→200%, speed from --speed variable (default 2s). Powers RainbowButton gradient rotation.

animate-gradient

background-position to var(--bg-size), 8s linear infinite. Powers AnimatedGradientText.

typewriter-shimmer

background-position 0%→100%, 8s ease-in-out infinite alternate. Powers Typewriter gradient text.

sunbeam-drift

Subtle translate + scale + opacity, 14s ease-in-out infinite alternate. Powers HeroAtmosphere glow.

text-shimmer

background-position 0%→100%, 8s ease-in-out infinite alternate. Powers .hero-text-lit gradient text.

Component Index

Complete list of all UI components in src/components/ui/.

Component	File	Type
Accordion	accordion.tsx	Radix UI
AnimatedBeam	animated-beam.tsx	Canvas/SVG
AnimatedGradientText	animated-gradient-text.tsx	CSS Animation
Badge	badge.tsx	CVA Variants
Button	button.tsx	CVA Variants
Carousel	carousel.tsx	Interactive
Checkbox	checkbox.tsx	Radix UI
Collapsible	collapsible.tsx	Radix UI
CopyCommand	copy-command.tsx	Interactive
Dialog	dialog.tsx	Radix UI
Drawer	drawer.tsx	Radix UI
Reveal / RevealGroup / FadeIn	fade-in.tsx	GSAP Animation
FlickeringGrid	flickering-grid.tsx	Canvas
Form	form.tsx	React Hook Form
GradientWave	gradient-wave.tsx	WebGL (OGL)
HeroAtmosphere	hero-atmosphere.tsx	CSS + Canvas
ImageSlider	image-slider.tsx	Interactive
Input	input.tsx	Form Element
Label	label.tsx	Form Element
LightRays	light-rays.tsx	WebGL (OGL)
Link	link.tsx	CVA Variants
MagneticDots	magnetic-dots.tsx	Canvas
PageCTA	page-cta.tsx	Layout
PageTransition	page-transition.tsx	Animation
Preloader	preloader.tsx	Animation
RainbowButton	rainbow-button.tsx	CVA Variants
RippleGrid	ripple-grid.tsx	Canvas
ScrollArea	scroll-area.tsx	Radix UI
SearchBar	search-bar.tsx	Interactive
SearchDialog	search-dialog.tsx	Interactive
Select	select.tsx	Radix UI
Separator	separator.tsx	Radix UI
Sheet	sheet.tsx	Radix UI
ShineBorder	shine-border.tsx	CSS Animation
ShineCard	shine-card.tsx	Interactive
SmoothScroll	smooth-scroll.tsx	Utility
SnapSlider	snap-slider.tsx	Interactive
Tabs	tabs.tsx	Radix UI
TextDecode	text-decode.tsx	Animation
TextSplitReveal	text-split-reveal.tsx	GSAP Animation
Textarea	textarea.tsx	Form Element
Tooltip	tooltip.tsx	Radix UI
Typewriter	typewriter.tsx	JS Animation

Component Library & Brand System

Colours

Core Palette (Light Mode)

Dark Mode Palette

Chart Colours

Accent Gradients

Gradient Colours

Full Gradient Bar

Gradient Bullet

Typography

Font Family

Heading Scale

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Text

Tracking Tokens

Custom Line Heights

Buttons

Variants

Sizes

With Icons

States

Full Width

As Link (asChild)

All Variants × Sizes Matrix

Rainbow Buttons

Variants

Sizes

As Link (asChild)

Inside Dark Section

Badges

Variants

Sizes

Outline Sizes

Gradient Badge (Custom)

Links

Variants

Sizes

With Arrow Animation

With External Icon

Form Elements

Input

Textarea

Select

Checkbox

Accordion

What services does Embark offer?

How do care packages work?

Can I upgrade from a care plan to a partnership?

Tabs

Tooltips

Cards

Basic Card

Card Title

With Badge

Interactive Card

Service Card Pattern

Identity systems that position you for growth.

Card Shadow Behaviour

Shine Effects

ShineBorder

Card with ShineBorder

ShineBorder Props

ShineCard (Hover Reveal)

Hover me

Copy Command

Animated Text

AnimatedGradientText

Typewriter

Reveal Animations

Reveal — Single Element

RevealGroup — Staggered Children

Section Themes

Light Section (Default)

Default section styling

Dark Section (.section-dark)