Educore Design System

Overview

Educore presents a striking high-contrast aesthetic built around a deep dark canvas punctuated by a vibrant electric purple accent system. The typography relies entirely on Apple's SF Pro Display family — using its Semibold weight for commanding display and heading roles while the Regular weight handles all body and UI text with crisp legibility. This single-typeface approach creates visual cohesion through weight contrast rather than family juxtaposition. The dominant color story centers on pure black backgrounds making white headlines pop, with the signature violet (#5e41e4) driving all interactive elements from primary buttons to status badges. The overall mood is premium, modern, and conversion-focused — designed to feel like a top-tier design education platform that takes itself seriously without sacrificing approachability.

Color Palette

Core Colors

| Token | Hex | Usage | |---|---|---| | --color-primary | #0000ee | Links, interactive text states | | --color-secondary | #5e41e4 | Primary CTA backgrounds, brand accent | | --color-accent | #c7cbfe | Light lavender tints, subtle highlights | | --color-bg | #ffffff | Page background | | --color-surface | #5e41e4 | Elevated surfaces, card accents | | --color-text-primary | #000000 | Headlines, primary body text | | --color-text-secondary | #0000ee | Secondary text, links | | --color-text-muted | #484848 | Descriptive captions, metadata | | --color-text-dark | #0f0f0f | Dark-mode headings | | --color-border-light | #dbdbdb | Subtle dividers | | --color-border-subtle | #ededed | Card borders, input outlines | | --color-dark-surface | #1c1c1c | Dark panel backgrounds | | --color-pure-black | #000000 | Hero/section backgrounds |

Semantic

• Page background: #ffffff
• Hero/Dark sections: bg #000000
• Primary CTA: bg #5e41e4, text #ffffff
• Secondary/Ghost CTA: bg #ffffff, text #000000, subtle border
• Badge/Pill: bg #c7cbfe (light lavender), text #000000
• Hover states: opacity shifts, smooth color transitions at 400ms
• Navigation bar: transparent over dark hero, white text

Typography

Font Families

--font-display: ".SFNSDisplay-Semibold", SFProDisplay-Semibold, SFUIDisplay-Semibold, ".SFUIDisplay-Semibold", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
--font-sans:    ".SFNSDisplay", SFProDisplay-Regular, SFUIDisplay-Regular, ".SFUIDisplay", -apple-system, BlinkMacSystemFont, sans-serif;

The entire typographic system is built on Apple's SF Pro Display — a geometric humanist sans-serif optimized for screen readability. The Semibold cut (weight ~600) commands attention in hero headlines and section headings, establishing clear hierarchy through weight alone rather than switching typefaces. Body text uses the Regular weight at 14px with generous 21px line-height (1.5 ratio) ensuring comfortable reading on all screens. This unified approach eliminates cognitive load from mixed families while maintaining strong hierarchy through size and weight modulation. Fallbacks gracefully degrade to system fonts (-apple-system, BlinkMacSystemFont) ensuring consistent rendering across platforms.

Type Scale

| Role | Family | Size | Weight | Line-height | Color | |---|---|---|---|---|---| | Display / H1 | SF Pro Display Semibold | 62px | 599 (~600) | 68.2px | #ffffff (on dark) | | H2 / Section heading | SF Pro Display Semibold | 40px | 599 | 44px | #0f0f0f | | H3 / Article title | SF Pro Display Semibold | 20px | 599 | 28px | #0f0f0f | | Body | SF Pro Display Regular | 14px | 400 | 21px | #000000 | | UI Label | SF Pro Display Regular | 12px | 400 | auto | #000000 | | Small / Caption | SF Pro Display Regular | 12px | 400 | auto | #484848 |

Typography Notes

• Display headings (H1) render exclusively in white (#ffffff) against dark backgrounds — never inverted
• H2/H3 headings use near-black (#0f0f0f) rather than pure black for slightly softer contrast
• H3 includes negative letter-spacing of -0.25px for tighter, more headline-like appearance
• Body text maintains strict 14px baseline — no smaller sizes except for explicit label/caption roles
• All text uses normal letter-spacing except where noted above
• Font rendering leverages system-level antialiasing via -webkit-font-smoothing

Spacing Scale

2px   — micro-adjustments, tight gaps
4px   — icon padding, internal element gaps
8px   — small component spacing, button padding-y
10px  — most common gap (dominant frequency)
12px  — form gaps, compact spacing
16px  — standard padding, gutters
20px  — card internal padding
24px  — section sub-spacing
32px  — medium vertical rhythm
40px  — larger section spacing
48px  — major section gaps
80px  — section vertical rhythm (hero padding)
88px  — extra-large section breaks

Container widths:

• Max content width: 1440px (viewport)
• Article/content width: 1280px
• Section content width: 755px
• Side padding: 60px desktop
• Section vertical padding: 80px–180px (hero)
• Nav horizontal padding: 60px

Border Radius Vocabulary

--radius-none:  0px          — sharp containers, nav items
--radius-sm:    7px          — default cards, inputs, small elements (most frequent)
--radius-md:    20px         — profile cards, feature cards, large panels
--radius-lg:    100px        — large pill shapes, wide rounded elements
--radius-full:  9999px       — fully rounded pills, avatar circles, tags

The radius system favors pronounced rounding — even the "small" radius at 7px is noticeably soft. Cards and profile images use 20px for a modern friendly feel. Pill-shaped elements (buttons, badges) go fully rounded or near-fully-rounded at 100-1000px, creating the distinctive capsule appearance visible throughout the interface.

Shadow Vocabulary

--shadow-inset:   inset 0 0 0 1px rgb(0 0 0);
--shadow-card:    rgba(0,0,0,0.17) 0px 0.6px 1.6px -1.5px,
                  rgba(0,0,0,0.14) 0px 2.3px 6px -3px,
                  rgba(0,0,0,0.02) 0px 10px 26px -4.5px;

Shadow philosophy is intentionally restrained. The primary shadow technique is an inset border simulation for focus states or bordered elements. When elevation shadows appear, they use a sophisticated three-layer diffusion creating gentle lift without harsh edges. Most UI elements remain flat against their backgrounds, relying on color contrast rather than depth for separation.

Component Recipes

Primary CTA Button

background-color: #5e41e4;
color: #ffffff;
border: none;
border-radius: 1000px; /* fully rounded pill */
padding: 14px 28px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
transition: all 400ms cubic-bezier(0.44, 0, 0.56, 1);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;

Secondary / Ghost Button

background-color: #ffffff;
color: #000000;
border: none;
border-radius: 7px; /* soft rectangle */
padding: 14px 28px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
transition: all 400ms cubic-bezier(0.44, 0, 0.56, 1);
cursor: pointer;

Badge / Status Pill

background-color: #c7cbfe; /* light lavender */
color: #000000;
border: none;
border-radius: 1000px; /* full pill */
padding: 6px 14px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 400;
display: inline-flex;
align-items: center;
gap: 6px;

Input

/* Not prominently featured in visible viewport — standard form styling assumed */
background-color: #ededed;
border: none;
border-radius: 7px;
padding: 12px 16px;
font-family: var(--font-sans);
font-size: 14px;
color: #000000;

Card (Profile/Instructor)

- Background: transparent (overlays dark hero) or white
- Border-radius: 20px (large rounding)
- Overflow: hidden for image containment
- Image: object-cover, fills card area
- Content overlay: gradient fade at bottom
- Text: white on dark images, positioned absolute bottom
- Shadow: optional elevated shadow when on light background
- Min-width: ~280px per card

Navigation Header

- Position: fixed or sticky top
- Height: auto, padded vertically 20px
- Background: transparent (over dark hero)
- Layout: flex row, space-between
- Left: Logo mark (graduation cap icon) + "Educore" wordmark, white
- Center: Nav links (Overview, Curriculum, Instructor, etc.), white, 14px
- Right: "Enroll Now" primary CTA button (purple pill)
- Padding: 20px 60px horizontal
- Z-index: high for overlay behavior
- No visible border or shadow

Feature Badge Row

- Layout: horizontal flex row
- Items: icon + uppercase label pairs
- Icon: small, left of text
- Text: 12px, uppercase, letter-spaced subtly, white
- Gap between items: 24-32px
- Background: none (sits on hero dark)

Featured On Logo Bar

- Background: dark (#000000 or very dark gray)
- Layout: flex row, centered, items spaced evenly
- Logos: grayscale or muted treatment
- Label above: "FEATURED ON", 12px, uppercase, muted color
- Full-width container with generous padding

Motion & Animation

Transition Tokens

--transition-fast:     all 150ms ease;
--transition-base:     all 400ms cubic-bezier(0.44, 0, 0.56, 1);
--transition-fill:     fill 0.1s cubic-bezier(0.4, 0, 1, 1), fill-opacity 0.1s cubic-bezier(0.4, 0, 1, 1);
--transition-color:    color 0.4s cubic-bezier(0.44, 0, 0.56, 1);

Keyframe Animations

No custom keyframe animations detected in the extracted data. Motion is limited to CSS transitions on hover/focus states.

Interaction Patterns

• Button hover: Subtle opacity reduction or brightness shift at 400ms timing
• Link hover: Color transition on the --color-primary blue tone
• Card hover: Potential slight scale or shadow increase (inferred from shadow presence)
• Nav scroll behavior: Likely background opacity shift on scroll (standard pattern)
• Focus rings: Inset shadow technique for accessible focus indication
• All transitions: Use the custom bezier cubic-bezier(0.44, 0, 0.56, 1) for natural deceleration

Layout System

Grid

• Mobile (<768px): Single column, stacked layout, reduced padding
• Tablet (768px+): Two-column where applicable (hero text + image cards)
• Desktop (1024px+): Full multi-column layouts, 1440px max viewport width

Header Architecture

[🎓 Educore]              [Overview] [Curriculum] [Instructor] [Testimonials] [Pricing] [FAQ]         [Enroll Now →]
←———————————————————————————————————————————————————————————————————————————————————————————————————————————————→
                                          (transparent over dark hero)

Hero Section

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│  [New] Registrations are now open!                              │
│                                                                 │
│  Master UI Design                                              │
│  From Scratch                                                  │
│                                                                 │
│  The only design course you need to be among top 1%            │
│  designers...                                                   │
│                                                                 │
│  [🔵 Enroll Now →]  [⚪ See Curriculum]                         │
│                                                                 │
│  📺 ONLINE   ✋ HANDS-ON   🏆 CERTIFICATE                       │
│                                                                 │
│                           ┌──────┐ ┌──────┐ ┌──────┐           │
│                           │ Card │ │ Card │ │ Card │           │
│                           └──────┘ └──────┘ └──────┘           │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
       ↑ text column (left)              ↑ image cards (right)

Featured On Section

FEATURED ON
[  hues  ] [ Rise ] [ Sitemark ] [ Product. ] [ PinPoint ] [ hues ]  [Get this template →]
←———————————————————————————————————————————————————————————————————————————————————————→

Imagery Style

• Photography: Professional headshots/portraits with shallow depth of field
• Treatment: Natural lighting, authentic expressions, diverse subjects
• Framing: Contained within heavily rounded cards (20px radius), often cropped closely
• Color palette of images: Warm skin tones, neutral backgrounds, professional attire
• Role: Supporting — images reinforce credibility and community without dominating
• Profile cards: Overlay text at bottom with name, role, company affiliation
• Flag icons: Small emoji-style flags next to names indicating nationality
• No illustrations or graphics detected — purely photographic + typographic

Icon System

• Library: Custom SVG (no external library detected in framework analysis)
• Specific icons observed:
  • Graduation cap (logo mark)
  • Arrow right (CTA buttons)
  • Monitor/screen (ONLINE badge)
  • Hand (HANDS-ON badge)
  • Ribbon/certificate (CERTIFICATE badge)
• Treatment: Small inline icons, monochrome (white on dark, black/dark on light), stroke-based style
• Size: Approximately 16-18px, aligned middle with adjacent text
• Consistency: Thin stroke weight (1.5-2px), geometric construction

Recommended Frontend Stack

- Framework:      Next.js 15 or Astro (for marketing/landing pages)
- Styling:        Tailwind CSS v4 (utility-first, rapid prototyping) or CSS Modules
- Fonts:          SF Pro Display via system fallback stack (Apple devices)
                   Fallback: Inter Tight loaded from Google Fonts for non-Apple
- Animation:      Vanilla CSS transitions (no heavy library needed)
- Icons:          Custom SVG components or Lucide React (closest match to observed style)
- Component lib:  None (build custom for precise control) or Radix Primitives for accessibility

Design Principles

1. Contrast as Structure — Pure black backgrounds against white headlines and electric purple CTAs create unmistakable visual hierarchy without needing decorative flourishes.
2. Single-Family Typography — One typeface (SF Pro Display) handles everything; hierarchy comes from extreme size differential (62px down to 12px) and bold/regular weight pairing.
3. Pill-Shaped Everything — Buttons, badges, and tags use fully rounded radii (9999px), creating a cohesive "capsule language" that feels modern and friendly.
4. Dark Canvas Dominance — The hero and key sections own the darkness, letting content glow forward; this isn't just aesthetic — it focuses attention ruthlessly on conversion elements.
5. Social Proof Integration — Instructor profiles and "Featured On" logos are woven directly into the hero fold, not relegated to lower pages, leveraging immediate trust signals.
6. Generous Whitespace — Despite information density (nav, badges, cards, CTAs), the 80-88px vertical rhythms and 60px side padding prevent crowding.
7. Restraint in Effects — Minimal shadows, no gradients (except functional overlays), no animations beyond hover states; the design speaks through composition not motion.