```
**Message Animation:**
```css
.message-bubble {
animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
```
**Interactive States:**
- Hover: Add `shadow-md` or `shadow-lg` lift
- Active: `scale-95` for tactile feedback
- Focus: 2px outline with `focus:outline-2 focus:outline-[var(--color-primary)] focus:outline-offset-2`
- Disabled: `opacity-50 cursor-not-allowed`
### Special Effects
**Texture Overlay (Header/Hero):**
```css
.texture-overlay {
position: relative;
}
.texture-overlay::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230A4D8C' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
border-radius: inherit;
}
```
**Gradient Text:**
```css
.gradient-text {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
```
**Stage Badge Glow (Active):**
```css
.stage-badge-active {
box-shadow: 0 0 0 3px rgba(10, 77, 140, 0.1),
0 2px 8px rgba(10, 77, 140, 0.15);
}
```
**Custom Scrollbar:**
```css
.nice-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.nice-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary));
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
.nice-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
background-clip: padding-box;
}
.nice-scroll::-webkit-scrollbar-track {
background: var(--color-surface-alt);
border-radius: 999px;
}
```
### Accessibility
**Contrast:**
- Text on white: Use `--color-text` (1A2332) - AAA rated
- Muted text: Use `--color-text-muted` (5F6C7B) - AA rated (minimum 14px)
- Button text on primary: White text on primary blue - AAA rated
**Focus States:**
All interactive elements must have visible focus:
```css
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
```
**ARIA Labels:**
- Add `aria-label` to icon-only buttons
- Use `aria-current="step"` for active navigation items
- Use `aria-hidden="true"` for decorative elements
**Motion:**
Respect `prefers-reduced-motion`:
```css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
```
### Implementation Checklist
When implementing Educational Lab UI:
- [ ] Install fonts: DM Sans, Inter, JetBrains Mono
- [ ] Define CSS custom properties in `:root`
- [ ] Set body gradient background
- [ ] Apply `.surface` class to card components
- [ ] Use `.heading` class for display typography
- [ ] Standardize spacing: p-6/p-7 for cards, gap-3/gap-4 for layouts
- [ ] Use `rounded-xl` consistently (not rounded-lg)
- [ ] Apply border-2 to inputs (not border)
- [ ] Use text-sm for all helper text (not text-xs)
- [ ] Add staggered `scale-in` animations (0.05s-0.3s delays)
- [ ] Implement custom scrollbar styles
- [ ] Add hover shadow elevation
- [ ] Use active:scale-95 for tactile button feedback
- [ ] Define focus states with 2px outline
- [ ] Test color contrast (WCAG AA minimum)
- [ ] Add ARIA labels to icon buttons
- [ ] Verify responsive behavior (mobile-first)
### When to Use This System
**Perfect for:**
- Educational platforms and learning management systems
- Data science tools and analytics dashboards
- Student-facing applications (ages 13+)
- Academic project builders and submission systems
- STEM learning environments
- Coding education platforms
- Research and scientific tools
- Proposal generators and documentation systems
**Less suitable for:**
- Marketing landing pages (consider more expressive designs)
- Creative portfolios (too structured)
- Gaming or entertainment apps (needs more personality)
- Financial/enterprise software (may need more formal aesthetic)
### Customization
To adapt for different domains:
**More playful (younger audiences):**
- Increase color saturation by 10-15%
- Use `rounded-2xl` instead of `rounded-xl`
- Add more accent colors (purple, teal)
- Increase animation scale (0.94 instead of 0.96)
**More formal (enterprise/academic):**
- Reduce saturation by 10%
- Use single-color buttons (no gradients)
- Decrease animation speed (0.4s instead of 0.3s)
- Increase spacing (p-8 instead of p-7)
**Dark mode adaptation:**
```css
@media (prefers-color-scheme: dark) {
:root {
--color-surface: #1A2332;
--color-surface-alt: #242D3C;
--color-text: #E6EDF3;
--color-text-muted: #9BA6B2;
/* Adjust other colors as needed */
}
body {
background: linear-gradient(135deg, #0D1117 0%, #1A2332 100%);
}
}
```
---
## Example: Complete Card Component
```html
Section Title
2 / 5
Helper text that explains what this section does.
```
---
This design system provides a complete, cohesive foundation for building polished educational interfaces that feel both professional and approachable.