Copied!

ICS Design System

Component & brand reference

Active

Color Palette

Click any swatch to copy the hex value to your clipboard.

Typography

Font families, type scale, and weight specimens.

Font Families
Bricolage Grotesque var(--font-heading) · Headings, display, logo "Immigration"
Immigration Case Support
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789
Outfit var(--font-body) · Body text, UI elements, logo "Case Support"
Clear, credible documentation
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789
Type Scale
--fs-display Aa
--fs-hero Heading
--fs-h2 Section Title
--fs-h3 Subsection
--fs-body Body text at 1rem / 16px
--fs-small Small text at 0.875rem / 14px
--fs-caption Caption at 0.8125rem / 13px
--fs-label Label at 0.75rem / 12px
Font Weights (Outfit)
300 Light The documentation behind a strong immigration case.
400 Regular The documentation behind a strong immigration case.
500 Medium The documentation behind a strong immigration case.
600 Semibold The documentation behind a strong immigration case.
700 Bold The documentation behind a strong immigration case.

Spacing & Layout

Spacing scale, container widths, and border radii.

Spacing Scale
--space-xs
0.5rem / 8px
--space-sm
1rem / 16px
--space-md
1.5rem / 24px
--space-lg
2rem / 32px
--space-xl
3rem / 48px
--space-2xl
4rem / 64px
--space-3xl
6rem / 96px
--space-4xl
8rem / 128px
Border Radii
--radius-sm
0.25rem
--radius-md
0.5rem
--radius-lg
1rem
--radius-xl
1.5rem
--radius-full
9999px
Container Widths
--container-max: 1440px
--container-narrow: 800px
--container-padding: clamp(1.25rem, 4vw, 2rem)

Components

Live specimens of the UI components used across the landing page.

Buttons
Default sizes
Accent Button Accent Small
Variants
Ghost Dark (Teal) Charcoal
On light background
Outline Dark Dark (Teal) Charcoal
With icon
WhatsApp Our services
Header Nav Pill
Transparent state (over hero)
Immigration Case Support
About Services
WhatsApp
Scrolled state (white pill)
Immigration Case Support
About Services
WhatsApp
Section Labels
// Our Services
// About
// Get Started
Language Toggle
Service Card
Most requested

Psychological Evaluations

A licensed clinician conducts a trauma-informed clinical interview and delivers a signed report suitable for immigration court or USCIS filing.

Asylum VAWA U Visa T Visa
Stat Counters
Case types supported 6
Bilingual team 100%
Avg. turnaround 48h
Client satisfaction 5/5
Section Background Patterns
--color-darker (Hero, Services)
--color-warm (About, Steps)
Gold gradient (CTA)
--color-dark (Footer)
--color-primary (Mobile menu)
White to warm (Audience)

Shadows & Effects

Elevation scale and glass/blur effects used throughout the site.

Shadow Scale
Small --shadow-sm
Medium --shadow-md
Large --shadow-lg
Glass / Blur Effects
backdrop-filter: blur(16px) · rgba(255,255,255,0.07) · border: 1px solid rgba(255,255,255,0.1)
Used on the floating header pill and mobile menu overlays. The header transitions from glass (transparent) to solid white on scroll, controlled by the .header--scrolled class.