UI Kit
Design system & components — Spreent Academy
Typography
Skills, practice, knowledge
Where Our Graduates Work
Basic Plan
1000+
89%
Aggregator that helps you find the right educational course.
Body copy — the default paragraph text used across the page.
Get Started
Small caption text, e.g. form disclaimers.
Design
Colors
$color-blue
Primary / CTA
#1859ff
$color-indigo
Deep blue
#0039cc
$color-dark
Base dark / text
#0d1627
$color-secondary
Accent lime
#d9f243
$color-light
Light background
#eef4f6
$color-stroke
Borders / dividers
#dee9ed
$color-light-blue
Decorative
#d1deff
$color-error
Validation error
#ff4949
$color-white
White
#ffffff
Buttons
:hover,:active and:focus-visible are interactive — hover, click, or Tab to a button to see them.
Press scales the button and darkens its background; hover fades in a soft shadow via a ::before opacity —GPU, not an animated box-shadow. The three button flavours — magnetic (hero), shimmer (submit), and this base press — are in the Motion catalogue below.
Form Elements
Cards
- Card tag
Card title
Supporting copy — a line or two describing the card.
visual → <slot />
The three about cards share this reusable<AboutCard> scaffold —tag,title,text via props; each card's bespoke visual (a photo, CSS-drawn decor, a rotating logo) is projected through a<slot>. The full cards are catalogued in Motion below and seen live on the landing — one of them, the CSS-drawn "skills" card, is exhibited next.
- What will I gain?
Hands-On Skills
Hands-on, profession-specific knowledge. Train on real projects and build your own product
The decorative scene is drawn entirely in code — no images. The circle (border-radius), the frosted-glass panel (backdrop-filter) and the Figma-style selection frame with four corner handles — a single::before layering twelvebackground-image gradients, noborder oroutline — are all pure CSS. Only the two cursors are inline SVG icons (<Icon>). It scales with the card and adds zero network requests.
Basic Plan
- Lifetime access to materials
- With feedback and assignments
- Portfolio and resume review
- Start immediately or with a group
- 24% discount when paying in full
- Certificate upon completion
Certificate
Top performance on the course
- Awarded to
- Ilya Petrov
- Completion date
- July 15, 2024
- Course author
- Innokentiy Bodrov
Icons
Interface
Logos
Motion
Every animation is physics-based (strong easing / springs), GPU-composited ontransform &opacity wherever it can, and respectsprefers-reduced-motion. Best experienced live on the landing page.
| Effect | Where | What it does | Principle & a11y |
|---|---|---|---|
| Logo paint-fill | Header + Footer | Brand colour paints across the wordmark, neon glow on hover + tap | two-layer masked reveal on transform (GPU, no repaint); blue (header) / lime (footer); mobile tap → instant colour + glow |
| Sticky header + blur | Header | Header sticks, gains a frosted blur once scrolled | backdrop-filter; the colour fade is kept under reduced-motion |
| Scroll progress | Header | Bar fills across the header on scroll | transform scaleX (not width) → runs on the GPU |
| Burger ↔ X | Header | Icon morphs, timed to land with the drawer | transitions (interruptible) + spring pop; reduced-motion → plain crossfade |
| Mobile drawer | Header | Menu grows open, fades-then-snaps closed | grid 0fr→1fr; ease-out (never ease-in); fade-then-snap avoids flicker |
| Frosted glass menu | Header | Blurred translucent backdrop behind the open menu | backdrop-filter: blur + a solid fallback colour |
| Nav underline | Header | Underline sweeps left→right on hover | scaleX from left, interruptible; GPU, hover-gated |
| Magnetic button | Hero | Hero CTA drifts toward the cursor | lerp + rAF (spring-like); GPU translate, hover-only, reduced-motion |
| Parallax | Hero + About | Hero photos & about cards shift on scroll + mouse | additive layers, lerp smoothing; GPU translate, passive, reduced-motion |
| Logo rotation | About | About circle logo spins with scroll direction | JS writes --rotation, CSS applies it; GPU, reduced-motion |
| Count-up | Community | Community stats animate 0 → 78% / 89% | ease-out cubic, once on view; reduced-motion → jumps to final value |
| Gradient-spin | Community | Conic-gradient border rotates on the community + icon | @property + linear (continuous motion); reduced-motion → static |
| Ambient glow | Work | Soft glow sweeps across the work logos | opacity of a pseudo-element (not box-shadow) → GPU; reduced-motion |
| Shimmer CTA | Footer | One-time glint on Submit once the user settles on it | IO + 2s dwell + cancel on scroll-away / form engage; GPU, reduced-motion |
| Certificate cascade | Footer | The completion-certificate block reveals in sequence — heading, text, then the card | grouped scroll-reveal, 120ms stagger; clip-path wipe (heading) + scale (card) + fade; reduced-motion → static |
| Scroll-reveal | Global | Section headings fade & slide up as they enter view | IntersectionObserver, 70ms stagger; opacity/transform, reduced-motion |
| Button press | Global | Scale on :active + shadow-lift on hover | scale(0.95) ease-apple; shadow-lift via ::before opacity (composite, not box-shadow); bg darkens on press; reduced-motion |
| Smooth scroll | Global | Eased scroll to anchor links | rAF easeInOutQuart, interruptible; reduced-motion → instant jump |