Back to site

Design System

Brand

Positioning

“LinkedIn for young Europeans who haven't started their career yet.” A pan-European learning community (ages 15–35) backed by Erasmus+, where young people build evidence-based professional identities through learning, contribution, and community — not job titles.

Audience

Young Europeans aged 15–35 who are students, early-career professionals, volunteers, or gap-year explorers. They want to grow, contribute, and build a meaningful professional identity before (or alongside) traditional employment.

Voice

  • Empowering — not patronizing
  • Direct — not corporate
  • Warm — not sycophantic
  • Evidence-based — not hype-driven

Key Phrases

Replace mindless scrollingYour growth storySkills PassportEvidence, not claimsContribute to belongAll Human NetworkWhat comes nextBuild your future

Colors

Warm Colorway (Primary)

--teal-deep

#0a7e72

Primary dark teal

--teal

#0d9488

Primary teal, section labels

--teal-light

#5eead4

Light teal accents

--teal-muted

#99f6e4

Very light teal backgrounds

--coral

#ef6a4a

Warm accent

--orange-warm

#f97316

Orange accent, gradient end

--orange-light

#fdba74

Light orange

--node-warm

#ef4444

Central node glow (warm)

Cool Colorway (Dark/Alt)

--pink-soft

#f9a8d4

Soft pink accent

--pink

#f472b6

Pink gradient start

--pink-deep

#ec4899

Deep pink

--blue-electric

#2563eb

Electric blue

--blue-bright

#3b82f6

Bright blue

--blue-light

#93c5fd

Light blue

--cyan-node

#06b6d4

Central node glow (cool)

Neutrals

--ink

#0f172a

Primary text, headings

--ink-soft

#334155

Secondary text

--ink-muted

#64748b

Muted text, captions

--slate

#94a3b8

Borders, placeholders

--mist

#f1f5f9

Light backgrounds

--mist-warm

#fafaf9

Warm section backgrounds

--white

#ffffff

White

Dark Surfaces

--bg-dark

#0c1220

Dark section background

--bg-dark-elevated

#131c2e

Elevated dark surface

--bg-dark-card

#1a2540

Card on dark bg

--bg-dark-border

#1e3050

Border on dark bg

CTA & Semantic

--lime-cta

#d1e349

Primary CTA button

--lime-cta-hover

#c5d93f

CTA hover state

--success

#10b981

Success states

--warning

#f59e0b

Warning states

--error

#ef4444

Error states

--info

#3b82f6

Info states

Gradients

--gradient-warm

--gradient-cool

Typography

Display — Outfit

Used for all headlines. Weights: 600, 700, 800, 900.

Hero h1 — 4.5rem / 800

Building futures

Section h2 — 3rem / 700

Section headline

Section h3 — 1.75rem / 700

Card headline

Body — DM Sans

Used for paragraphs and UI text. Weights: 400, 500, 600.

Body large — 1.25rem / 400

The professional network for young Europeans who are building themselves — not just a resume.

Body — 1.125rem / 400

Every challenge you complete, every peer you mentor, every project you ship — it all compounds.

Caption — 0.875rem / 500

Backed by Erasmus+ · 20+ organizations · 15+ countries

Mono — JetBrains Mono

Used for stats, badges, labels. Weights: 400, 500.

Mono stats — 3rem / 500

24+

Section label — 0.8125rem / 500 / uppercase / tracking-widest

YOUR JOURNEY

Badge / micro text — 0.6875rem / 400

Erasmus+ Verified

Spacing

Section Padding

py-24 md:py-32 lg:py-40
py-24 (96px)
md:py-32 (128px)
lg:py-40 (160px)

Content Container

max-w-7xl mx-auto px-6 lg:px-8
max-w-7xl (1280px)

Common Gaps

Card grid gapgap-6 (24px)
Section heading to contentmb-16 (64px)
Card internal paddingp-6 to p-8 (24-32px)
Two-column gapgap-12 lg:gap-16 (48-64px)

Components

Section Label

YOUR JOURNEY

THE SHIFT

Gradient Text

Warm gradient text

Cool gradient text

Cards

Light Card

Card Title

Card content with body text styling on a light background.

Glassmorphism Card

Glass Card Title

Card content with glassmorphism effect on dark background.

Badges & Tags

Project ManagementInterculturalPublic Speaking
Design ThinkingPeer MentoringLeadership

Progress Bars

Leadership85%
Communication92%
Problem Solving78%

Day Card

MON

Opportunity Drop

Fresh Erasmus+ exchanges, hackathons, grants, and volunteer calls curated weekly.

Testimonial Card

“I came for an Erasmus exchange. I stayed because Youth Link gave me something LinkedIn never could.”

Ana, 23

Lisbon

Motion

All animations use Framer Motion with whileInView and viewport={{ once: true, amount: 0.2 }}. Respects prefers-reduced-motion.

fadeUp

{
  hidden: { opacity: 0, y: 24 },
  visible: {
    opacity: 1, y: 0,
    transition: { duration: 0.65, ease: [0.25, 0.46, 0.45, 0.94] }
  }
}

scaleIn

{
  hidden: { opacity: 0, scale: 0.92 },
  visible: {
    opacity: 1, scale: 1,
    transition: { duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] }
  }
}

slideInLeft

{
  hidden: { opacity: 0, x: -32 },
  visible: {
    opacity: 1, x: 0,
    transition: { duration: 0.65, ease: [0.25, 0.46, 0.45, 0.94] }
  }
}

fadeIn

{
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { duration: 0.5 }
  }
}

Logo Usage

youth-link-logo1.png — Full lockup (light background)

Youth Link full lockup

Use on hero light backgrounds, about sections. Includes icon + wordmark + tagline.

youth-link.png — Dark wordmark

Youth Link dark wordmark

Navbar scrolled state, light backgrounds.

youth-link-dark.png — Light wordmark

Youth Link light wordmark

Navbar hero state, footer, dark backgrounds.

YL-square.png — Warm colorway icon

Youth Link warm icon mark

Favicon reference, mobile nav, social share.

YL-square-dark.png — Cool colorway icon

Youth Link cool icon mark

Dark/alternative contexts, design system showcase.

Iconography

All icons from Lucide React. Used at 16–24px depending on context.

SparklesOpportunity Drop
TargetMicro-Challenge
HelpCircleI Need Help
CoffeeDeep Talk Café
TrophyLet's Brag
MountainOffline Challenge
UsersAll Human
SlidersHorizontalNo Algorithms
HandHeartContribute
ShieldCheckModerated
GlobeEU Data
HeartWellbeing
UserPlusJoin step
FlameLearn step
AwardPassport step
BriefcaseLinkedIn card
RocketYouth Link card
StarWhy It Matters
QuoteTestimonials
ChevronDownScroll indicator
ExternalLinkExternal links
ShieldVerified badge
MenuMobile nav
XClose