Browse Foundations to understand the token system — colors, spacing, and typography.
Find a component or pattern that fits your use case.
Copy the HTML structure and apply the exact class names shown in each example.
Colors
Click any swatch to copy the hex value to clipboard.
Brand — Teal
Teal
--teal
#007f99
Teal Dark
--teal-dark
#00464c
Teal Ink
--teal-ink
#124e5d
Neutral
Text
--text
rgba(0,0,0,.85)
Muted
--muted
#999999
Muted 2
--muted-2
#4a4a4a
Surface
Background
--bg
#f5f7f8
Card
--card
#ffffff
Chip
--chip
#f0f3f5
Chip Active
--chip-active
#e1f1f4
Semantic
Success
--success
#3fae4a
Warn
--warn
#f6a623
Danger
--danger
#e4572e
Link
--link
#1f87a0
Orange BG
--orange-bg
#f5b556
Border
Border
--border
#e6e8ea
Border 2
--border-2
#d9dde0
Typography
Typeface: Lato — sans-serif. Weights used in this system: • 400 Regular — body copy, inputs, labels • 700 Bold — buttons, headings, filters, table headers • 900 Black — stat numerals, FLOW AI wordmark
✓ Do: Use primary for main page action. Max one primary per view. Icon + label for clarity. ✗ Don't: Use all-caps labels. Don't use primary for destructive actions (use danger red).
Filter Pills
Pill buttons with count badges
Top-level filters on dashboard pages. Count badge only when an active filter exists.
Date2UniversitiesIntakes
✓ Do: Always use icons. Keep labels 1–2 words. Show count only when active. ✗ Don't: Use without icons. Don't stack badges inside badges.
Filter Pills with Dropdowns
Clickable filters that open popover menus
Monash University
Application Deadline
✓ Do: Add search for lists >7 items. Show selected value in button label. ✗ Don't: Nest dropdowns. Don't use for primary actions.
Tabs
Pill-style tabs
Page-level view switcher. Gray track, white active pill with shadow.
Active
All students
Deactivated
Showing: all view
✓ Do: Use for 3–5 related views. Keep labels 1–2 words. ✗ Don't: Nest tabs. Don't use for actions (use buttons). Max 5 tabs.
Segmented Control
Toggle between view modes
Binary/tertiary toggle. Tighter than tabs. Exactly one active.
ColumnsFilters
✓ Do: Use for 2–3 mutually exclusive options. ✗ Don't: Use for navigation (use tabs). Don't mix with tabs in same toolbar.
Stats Card
Clickable metric — hover to lift
Dashboard metrics. Grid: 5 col desktop, 3 col tablet. Hover lifts with shadow.
62
Total Students
122
Total Applications
0
A1: Added
18
A3: Processing
✓ Do: 28px bold numbers. Include stage codes (A1, A2). Show skeleton while loading. ✗ Don't: Use decimals in large numbers (use 1.2K). Don't fake hover on non-clickable stats.
Stat Cards with Top Border
Metric cards with colored accent strip (Query dashboard)
4
Open
+2 this week
7
Pending
Awaiting reply
12
Resolved
Avg 6.2 hrs
✓ Do: 3px top border via absolute div. Delta optional — show when meaningful. 28px/900 weight. ✗ Don't: Use bottom border. Don't show delta without icon.
Chips & Badges
Degree type chips, count badges, result count
UndergraduatePostgraduateMBA21556 students match
✓ Do: Degree chips in tables only. Count badges inside filter pills. ✗ Don't: Make chips clickable (use filter pills). Don't use count badges standalone.
Priority Pills
Priority indicators for tickets / queries
Urgent High Medium Low
✓ Do: Always include colored dot. Use semantic colors. Stick to 4 levels. ✗ Don't: Make interactive. Don't add custom priorities.
Status Indicators
Application status (icon + label)
Not Submitted Submitted
✓ Do: Always pair icon + label. Use semantic colors. Be specific. ✗ Don't: Use color alone (needs icon for accessibility).
Navigation Badge
Notification count on nav icons
4
99+
✓ Do: Danger red only. Clear on interaction. Cap at 99+. Use dot for binary "has updates". ✗ Don't: Show 0 (hide badge). Don't use other colors.
Warning Banner
Contextual info / warnings
Upon signup all users need to provide permission to use the Flow AI platform according to our Privacy Policy.
Info variant: Use teal-soft background for neutral information.
✓ Do: Use in form/drawer context. Keep 2–3 sentences. Link to docs when needed. ✗ Don't: Use for errors (use inline field validation). Don't stack multiple warnings.
Toast Notification
Success confirmation — auto-hides after 3s, click to dismiss
Trigger Toast ↗
✓ Do: Success only. 5–8 words. Teal-dark bg. Auto-hide 3s. Fixed bottom-center. ✗ Don't: Use for errors. Don't make permanent. No icons needed.
Search Bar
Global search (pill radius)
✓ Do: Descriptive placeholder. Icon always left. Focus border: teal. ✗ Don't: Use "Search..." alone. Don't use for filters (use filter pills).
Form Fields
Text input, select, textarea
Select an option
Please enter a valid email address
✓ Do: Red asterisk for required. Error message below field. Validate on blur. ✗ Don't: Placeholder as label. Don't validate on every keystroke.
Form Fields — Grid Layout
Field grid (160px label column)
Used in drawers and settings panels where label and input are side-by-side. Label column is fixed at 160px; input stretches to fill remaining space.
Undergraduate
✓ Do: Use in drawer/settings context. 160px label is fixed — never shrink. ✗ Don't: Use stacked fields (label above) for this pattern — that's the standard Form Fields.
Loading States
Skeleton shimmer + spinner
✓ Do: Skeleton for known content shapes. Spinner for <3s inline actions. Match skeleton to content shape. ✗ Don't: Show spinner + skeleton at once. Don't block UI unless critical load.
Progress Bar
Linear progress indicator — drag slider to adjust
Processing documents...
65%
✓ Do: Animate width smoothly (0.4s ease). Show % label. Height: 6px. ✗ Don't: Use for unknown duration (use spinner). Don't jump progress.
SLA Progress Bars
First Response Time + Resolution Time tracking
FRT
2h 15m
RES
4h left
✓ Do: Show time remaining. 3 color states (ok/warn/breach). 4px height. Label FRT/RES. ✗ Don't: Show elapsed time. Bar height must be exactly 4px.
Upload Zone
Click to toggle drag-over state · drag a file onto it to see live
Drag & Drop Documents Here
or click to browse files from your computer
Browse Files
PDFJPGPNG
✓ Do: Show accepted file types. Validate on drop. Large icon + clear CTA. ✗ Don't: Hide accepted formats. Include max file size in description.
Stepper
Vertical · Click completed steps to go back · Next Step to advance
✓
Personal Info
✓
Academic Info
3
Guardian
4
Review
Next Step →Reset
Horizontal · Click completed steps to go back · Next to advance
✓
Upload
✓
Process
✓
Auto-Fill
4
Complete
5
Review
6
Submit
Next →Reset
✓ Do: 3–5 steps max. 1–2 word labels. Show ✓ for completed. Allow clicking back to done steps. ✗ Don't: Make upcoming steps clickable. Don't skip validation on Next.
Switch
Binary toggle for settings
Off = gray track; On = teal track with 200ms transition. Use for settings that apply immediately without a submit button.
Off
Disabled
✓ Do: Label the toggle state clearly. Apply change immediately (no submit). ✗ Don't: Use for form submit choices (use checkbox). Don't use for multi-option selection.
Avatar
User portrait — initials or image
Circular portrait using 2-letter initials when no photo. 36px standard, 56px large. Supports presence dot and stacked overflow.
NK36px
AB56px
JR Presence
SAPK+4
Stack
✓ Do: Use 2-letter initials (first + last). Vary background color per user for easy identification. ✗ Don't: Use single initial. Don't show >3 before overflow count.
Status Badge
Semantic status labels
Compact categorical tag for statuses and review states. Five semantic variants. Read-only — not interactive.
SubmittedDraftIn ReviewNewClosing
✓ Do: Green = positive/complete. Red = critical/closing. Orange = attention needed. Teal = informational. ✗ Don't: Use for counts (use count chip in filter pills). Don't make interactive.
Interest Chips
Multi-select tags for interests and topics
Selectable labels for academic preferences, interests, or topics. Active state shows teal fill with a leading colored dot.
Business Arts Engineering Computer Science Medicine + Add interestDisabled
✓ Do: Show dot only in active state. Allow multiple active simultaneously. Use for preference selection. ✗ Don't: Use for navigation (use tabs). Don't use for single-select (use segmented control).
Status Dot
Color-coded admission likelihood indicator
Small dot for admission probability classification. Always pair with a visible text label or tooltip — never color alone.
Likely
Target
Reach
Far Reach
Unset
✓ Do: Always pair with text label. Use only for admission likelihood classification. ✗ Don't: Use color alone (fails accessibility). Don't use for other status types — use Status Indicators instead.
View Toggle
List / Grid view switcher
Icon-based toggle to switch between list and grid layouts. Used in toolbars alongside search and filters. Always exactly one active state.
Active: grid
✓ Do: Icons only — no text labels. Default to grid for card views, list for table views. ✗ Don't: Allow no active state. Don't mix with Segmented Control in the same toolbar.
Accordion
Collapsible content groups
Groups application sections (In Progress, Submitted). Supports badge count in header and optional trailing switch. Chevron rotates 180° when open.
In Progress 3
3 applications awaiting student action.
Submitted 1
1 application submitted and under review.
With Switch 2
Show withdrawn
2 active applications showing.
✓ Do: Show count badge in header. Animate chevron on toggle. ✗ Don't: Nest accordions. Don't hide critical content — use for secondary groupings only.
Alert Banner
Informational callout with optional action
Platform announcements, promotions, or contextual info. Three variants: info (teal), warning (amber), dark (teal-dark CTA).
Direct Apply is now live
Submit applications in one step.
Explore
⚠️
Application deadline in 3 days
Review pending tasks before the deadline.
🎁
Get a free Kickstart bundle
›
✓ Do: Teal for platform news. Amber for time-sensitive alerts. Keep under 20 words. ✗ Don't: Use for errors (use inline validation). Don't stack more than 2 banners per page.
Dropdown Menu
Floating context menu
Anchored to a trigger (avatar, kebab icon). Supports header, divider, icon + label items, and disabled state. Max-height 360px with scroll.
NK Menu ▾
Messages 2
Default
Hovered
Selected
Disabled
✓ Do: Header for grouped sections. Divider before destructive actions. Max 7 items before scroll. ✗ Don't: Use for navigation (use sidebar). Don't exceed 360px height without scroll.
Modal
Blocking dialog for focused tasks
Centered on a scrim. 560px max-width, 10px radius. Head / body / footer structure. Destructive variant uses danger red confirm. Max 2 footer actions.
Form modal
Open Add Application
Destructive modal
Open Remove Student
✓ Do: Use for confirmation dialogs and focused data entry. Short title (3–5 words). ✗ Don't: Nest modals. Don't use for success feedback (use toast). Never more than 2 footer buttons.
Empty State
Zero-state placeholder and drop zone
Used for empty lists, drag-and-drop targets, and no-results states. Drag-over switches to teal border + teal-soft fill.
Drop here to add
click to toggle state
No students match
Try clearing filters or broadening your search.
Reset filters
✓ Do: Always include a next-step action. Explain why it's empty. ✗ Don't: Show a blank space with no context. Don't omit the "Reset filters" action on search empty states.
✓ Do: Color Last Signed In (green = recent, gray = never). Link student name in teal. Avatar for visual identification. ✗ Don't: Truncate names without tooltip. Don't show more than 6 columns by default — use column toggle.
--shadow-drawer: -6px 0 20px rgba(0,0,0,.1) — side drawer
Student Dashboard — FlowAI Surface
Patterns used on the FlowAI student-facing portal. The page sits on a lavender-to-sky gradient. Three key components: the AI assistant banner, the student profile card, and the Discovery Centre navigation grid.
Live preview — lavender-to-sky page background
F
I'm Flow AI – your personal AI guide
Here to help you unlock the university of your dreams! Unlike the other AI assistants, I tailor every recommendation based on the goals and interests you've shared with Flow AI.
Ask Flow AI
I can help you with...🎓 Best-Fit Universities📚 Application Process📋 Entry Requirements💰 Scholarships
Tayyab Kaaiser Student five
Profile completion: Strong
Complete profile
Longlist
1
Shortlist
0
Applying
9
Applied
2
Discovery CentreExplore videos, career guides, and articles picked for your interests
Go to →
Videos
Go to →
Careers
Go to →
Study guides
Go to →
Articles
Sidebar Navigation — FlowAI Counselor Portal
Two-panel nav: 110px icon-rail main sidebar + 220px sub-nav panel. Active main item uses flowteal icon + label. Active sub-item gets a soft teal fill with a 3px flowteal right border.
Live preview
F
Dashboard
Students
Universities
Manage apps
More
Configurations
My Org
Student profile
University
List building
Notifications
Page content area
Main sidebar
Width: 110px, fixed
Active icon + label: flowteal (#007f99)
Inactive icon + label: gray-400 (#9ca3af)
Label: 11px, semibold, centered below icon
Sub sidebar
Width: 220px, fixed
Active bg: flowteal-soft (#eaf6f8)
Active border: 3px right, flowteal
Inactive icon: gray-600 · label: gray-700, 14px medium
Settings & Configuration Patterns
Two reusable shapes: a key-value data card for displaying entity details, and a settings card with ON/OFF toggle rows grouped under a gray header.
Key-value data card — Org details
Org detailsAll users
NameFlow AI Education
Logo
F
Flow AI
Emailadmin@flowai.com
Phone+65 9123 4567
CountrySG
Postal code018956
CitySingapore
Address1 Raffles Place, #20-61
Settings card — ON / OFF toggle rows
Student profile
Allow students to add...
Guardian contactsON
Test scoresON
Personal informationON
Education detailsON
GradesON
Application detailsStudents
Allow students to...
Select the enrollment yearON
Select the application yearON
Allow students to edit their application detailsOFF
Card header
bg: #f5f7f8 border: #e6e8ea 14px bold, gray-900
ON badge
bg: #dcfce7 color: #166534 3px 8px · radius: 4px
OFF badge
bg: #f3f4f6 color: #6b7280 3px 8px · radius: 4px
Career Suggestion Cards
Used on student-facing discovery surfaces. Each card shows a career title, a short description, a thumbnail illustration, a "Great if you prefer something" label, and personality-type chips. Available individually and as an interactive 4-up carousel.
Individual card
Quantum Algorithm Developer - Computer Science
Quantum Algorithm Developers create algorithms for quantum computers, solving complex problems that classical computers cannot handle efficiently.
Great if you prefer something
RealisticInvestigativeConventional
Interactive carousel — 4-up with prev / next
Suggested careers for you
Quantum Algorithm Developer - Computer Science
Quantum Algorithm Developers create algorithms for quantum computers, solving complex problems that classical computers cannot handle efficiently.
Great if you prefer something
RealisticInvestigativeConventional
Data Science Consultant - Computer Science
Data Science Consultants leverage expertise in data analysis, machine learning, and statistical modelling to help organisations make data-driven decisions.
Great if you prefer something
RealisticInvestigativeConventional
Drone Fleet Manager - Computer Science
Drone Fleet Managers oversee the operation of a fleet of drones, coordinating missions for surveillance, delivery, and inspection tasks.
Great if you prefer something
RealisticInvestigativeConventional
AI Ethics Consultant - Computer Science
AI Ethics Consultants address the ethical considerations of AI development and deployment, ensuring systems are fair, transparent, and accountable.
Great if you prefer something
RealisticInvestigativeConventional
Discovery Centre — Content Cards
Article and video cards used in the Discovery Centre feed. Each card shows a thumbnail with a read-time badge, title with platform icon, author, content type and date, and topic/grade tags.
Individual card
3 min read
Study in Tokyo in English
Lara Ray
Article • 3 Dec
Student lifeCity life+3
5-up grid — Discovery Centre feed
3 min read
Study in Tokyo in English
Lara Ray
Article • 3 Dec
Student lifeCity life+3
2 min read
The Friendliest Countries to Study Abroad
Lara Ray
Article • 13 Oct
Social LifeGrade 12
2 min read
The Great College Ethics Debate: What Happens When…
Lara Ray
Article • 13 Oct
Grade 12
3 min read
Can Taking High School Classes Early Actually Help?
Lara Ray
Article • 13 Oct
Grade 12
3 min read
The $65K Dream School Dilemma: Is Prestige Worth It?
Lara Ray
Article • 13 Oct
Grade 12Money Matters
Hero Banners
Feature a new section, personalise a greeting, or announce a platform update. Always uses the dark gradient mesh background regardless of page theme. Three content layouts: centre, left-aligned, split. Two formats: full-width and card.
Feature — full-width, centre
Large heading + subtitle + dual CTA. Use to launch a new section or capability.
✦ New Feature
Discover Your Perfect University Match
AI-powered recommendations tailored to your academic profile, test scores, and career ambitions.
✓ Do: Lead with the benefit, not the feature name. Keep subtitle under 2 lines. ✗ Don't: Use more than 2 CTAs. Avoid placing this below the fold.
Announce — full-width, left-aligned
Badge-led, deadline-focused. Use for time-sensitive announcements.
📣 Announcement
Applications Now Open for 2025–26 Intake
Early applicants receive priority review. Submit before 31 March to secure your spot.
✓ Do: Include the deadline in the subtitle. Left-align when content is action-heavy. ✗ Don't: Use for evergreen content — this pattern implies urgency.
Personalise — full-width, split
Greeting left, status + action right. Use on dashboard or home surfaces.
👋 Welcome back
Good morning, Nistha
You have 3 pending applications and 2 upcoming deadlines this week.
✓ Do: Use a real name token. Keep status copy under 2 lines. ✗ Don't: Use split layout in modal or sidebar contexts — it needs horizontal space.
Card variants
Same three layouts in a contained card — use when the banner sits alongside other content.
✦ New Feature
Discover Your Perfect Match
AI-powered recommendations tailored to your profile.
📣 Announcement
Applications Now Open
Early applicants get priority review. Deadline: 31 March.
👋 Welcome back
Good morning, Nistha
3 pending applications, 2 deadlines this week.
✓ Do: Use card format when the banner shares a row or column with other components. ✗ Don't: Use split layout at card width — requires minimum 500px.
Content Cards
University Card
Five formats from Figma, optimised for different surfaces. Cover gradients are generated server-side from institution brand colours (135° 2-stop). Crest shows the first initial in warm neutral. Country badge uses white/88% bg in light mode; dark bg in dark mode.
Format 1 — Compact (240px) · No cover · Drawers, suggestion panels
294px card from the Courses page and Saige feeds. 170px cover hosts institution name + location in white overlay. Uni-Fit shield (pentagon clip-path) top-right. Body: course title + DA portal chip + 4-cell stat grid + "+5" expand + teal candy-stripe footer.