AcadloLegacy format

Acadlo is an academic social workspace where personal identity meets school operations. The interface should feel like a calm daily hub for teachers, students, and staff — not a generic SaaS dashboard or a consumer social network. The home feed is the center of gravity; navigation separates daily workspace actions from school context, learning workflows, and administration. Information is dense but breathable: flat cards with subtle borders, no decorative gradients, and stable dimensions for loading states.

Headline
Aa
Search
Body
Aa
Label
Aa
Label

Typography

displayBricolage Grotesque · 32px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headlineBricolage Grotesque · 24px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

titleBricolage Grotesque · 18px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyBricolage Grotesque · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

section-labelBricolage Grotesque · 11px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

Acadlo is an academic social workspace where personal identity meets school operations. The interface should feel like a calm daily hub for teachers, students, and staff — not a generic SaaS dashboard or a consumer social network. The home feed is the center of gravity; navigation separates daily workspace actions from school context, learning workflows, and administration. Information is dense but breathable: flat cards with subtle borders, no decorative gradients, and stable dimensions for loading states.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Nav Item

default

Elevation & Depth

default
dropdown
focus

Do's & Don'ts

Do

keep the feed central on home — rails are supporting context, not competing hero areas
use sidebar token colors for shell chrome and card tokens for social content
separate announcements from social posts in navigation and copy
use stable skeleton dimensions on post cards and composer
group sidebar items by user mental model (daily → school → learning → admin)

Don't

use rainbow gradients on profile headers or decorative hero bands
use oversized border radius (>12px) on feed cards
place more than one filled primary button per card section
mix admin workflows into the home feed layout
use pure black or harsh contrast blocks in light mode
Information Architecture

Reflect the Acadlo academic model:

1. Home — daily social workspace (posts, profile context, messages preview)

2. Organization — tenant/workspace context (institution, intents, people)

3. Calendar / Events — operational intents and schedules

4. Announcements — official school communication (separate from informal posts)

5. Messages — conversations (separate from post comments)

6. Assessments — learning evaluation within workspace org

7. Admin surfaces — org-scoped and platform-scoped, visually separated
Download .md
Ahmad Qadoura Ahmad Qadoura @AhmadQadourah
License MIT
Uploaded today
Version v1
File size 5.5 KB
Downloads 2
Copies 0
accessible clean dashboard education saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/AhmadQadourah/acadlo and implement it in my code

Don't have the MCP? Install it here