Designhub[Design Hub]

|

Explore all components from the Academic Index design system

New

Score Color System

The signature 7-tier color gradient for academic performance

235
Exceptional
215
Excellent
190
Strong
170
Solid
150
Promising
130
Emerging
100
Limited

Premium Buttons

The signature cross-hatch hover effect with badge indicators

Gradient Button with Badge

New

With Icon and Dot Badge

Shimmer Effect

Animated Gradient 0

Hot

Animated Gradient 1

Animated Gradient 2

Auth Components

Self-contained authentication components

Premium Form Card

Glassmorphism card with shimmer effect for auth forms.

Sign In

Auth Divider

Or continue with

Google OAuth Button

Form Links

Create an account

Start your journey

Already have an account? Sign in

Welcome back

Forgot password?

Reset access

Resend confirmation

Get verification

Grade Selection

What grade are you currently in?

This helps us tailor your college recommendations and timeline

9th Grade Freshman
10th Grade Sophomore
11th Grade Junior
12th Grade Senior
Gap Year / Post-Graduate
Transfer Student

Email Confirmation View

Account Created

We've sent a verification email to user@example.com. Click the link to activate your account.

Check spam if you don't see the email.

Timeline

Scroll-driven timeline with text fill effect

2024

Application Journey Begins

Start your college application process with comprehensive planning.

2025

Academic Excellence

Focus on maintaining strong grades and test scores.

Future

Dream School Awaits

Submit applications and await admission decisions.

Animated Icons

Icon components for various UI states

Upload

ML

Report

Papers

Timer

Dual Upload Section

Two-step PDF upload with transcript and Common App documents

1. Upload Transcript

Upload your most recent high school transcript (unofficial OR official) as a PDF

Drop your transcript PDF here

or click to browse

PDF only • Extracts courses by grade level

2. Upload Common App PDFs

In Common App, download the preview of all 6 main sections:
1.Profile | 2.Family | 3.Education | 4.Testing | 5.Activities | 6.Writing

Please do NOT upload one PDF with your entire application. Upload each section individually!

Upload a transcript first

Transcript must be uploaded first

Upload transcript first to enable

Processing Documents

0 of 7 PDFs uploaded

No files uploaded yet

Upload 7 more PDFs (0/7)

Infinite Slider

Continuous scroll slider

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6

Text Effects

Animated text components

Text Roll (Hover over me)

Hover to see text roll effect
Hover to see text roll effect

Typing Text

Wave Text (Hover)

Hover me for wave effect

Radial Orbital Timeline

Interactive orbital timeline with score ring

0

LIMITED

Individual Scores

Circular score progress rings

Where You Stand

Click on score ranges for context

213

/ 240

Your Score

EXCELLENT

Very strong overall; competitive for highly selective colleges.

60120140160180200220240
you

Your Potential

Unlock your full academic potential by improving key areas across your profile

213

Current Score

EXCELLENT
225

Potential Score

EXCEPTIONAL
060120180240

+12 points potential increase

Score Snapshot

View your current academic performance across all key areas

225/ 240
Potential
88/ 100
Academic
75/ 100
Personal
75/ 100
Alignment
80/ 100
Awards
82/ 100
Testing

School Recommendations

Personalized school recommendations

School Recommendations

Based on your academic index, here are recommended schools tailored to your profile

Safety

Schools where you have a strong chance of admission

Your profile is excellent!

You'd be a strong candidate anywhere

Target

Schools that fit your academic profile perfectly

Duke University

Duke University

Columbia University

Columbia University

Reach

Ambitious schools that may be a stretch, but possible

Yale University

Yale University

Princeton University

Princeton University

Stanford University

Stanford University

* These recommendations are purely predictive based on academic index scores and do not guarantee admission. Actual admissions decisions depend on many factors.

Leaderboard

Complete leaderboard with navigation

Rankings
New
School
Soon
Fit
Soon

Class of 2026 Rankings

Academic Index Distribution
Live Data

Dot Shader Background

Interactive Three.js dot shader with mouse trails

Portable UI Components

Self-contained components ready to drop into any project

Award Badges

Default BadgeGold AwardBlue BadgeWinnerGrade 11Grade 12NationalState

Delete Buttons

Empty States

No Awards Added

Add your awards to populate this section.

No Achievements Yet

Your achievements will appear here.

File Upload Zone

Drop transcripts here

or click to browse

PDF, DOC files only • Max 10MB

File Status Cards

transcript.pdf(Transcript)

Complete ✓

essay.pdf(Essay)

Uploading... 65%

recommendation.pdf(Recommendation)

Ready to upload

report.pdf(Report)

File too large

School Search Input

Interactive school search with dropdown suggestions, selected chips, and skip button.

What schools are you thinking about?

Type a few schools you already know. We'll use this to personalize your recommendations.

Interests Selector

Progressive disclosure interest selector with "I'm Exploring" option and collapsible grid. Max 3 selections.

What interests you?

Pick what you're curious about. Or skip if you're still exploring.

Select up to 3 interests

Processing Sidebar

Right sidebar showing file upload progress with animations. This component pairs with DualUploadSection.

Processing Documents

0 of 7 PDFs uploaded

No files uploaded yet

Upload 7 more PDFs (0/7)

Score Loading Panel

Animated loading panel with spinning rings, progress steps, and success state. Click the button to toggle between loading and ready states.

Survey Area

This represents the main content area (75% width) where the survey form would be.

Calculating your score...

Your Academic Indexis being calculated

We're analyzing your transcript, activities, and achievements to generate your comprehensive score.

Validating your transcript...

Analyzing course rigor...

Evaluating activities...

Calculating your score...

Please stay on this screen. You will be redirected once your score is ready.

Edit/View Toggle

Student Name: Alex Chen

Grade: 11 • GPA: 3.8

Interests: Computer Science, Debate Club, Robotics

Save Status Toast

Click buttons to trigger toast notifications:

Interaction Prompts

Mobile tap/swipe prompts (check on mobile):

Tap any element to explore

Swipe to navigate

Bento Grid

Flexible grid layout for feature cards

Academic Index

Calculate your academic standing.

Leaderboard

See how you rank among peers.

School Match

Find your best-fit colleges.

Progress Tracker

Track your application journey.

AI Analysis

Get intelligent insights.

Awards

Discover scholarship opportunities.

Progress Indicators

Steps, progress bars, and completion indicators with Academic Index animations

Application Progress

Score Distribution

235
Exceptional220-240 points
210
Excellent200-219 points
185
Strong180-199 points
170
Solid160-179 points

Profile Completion

65%

Documents

80%

Essays Reviewed

40%

Component Showcase

Built with the Academic Index design system