top of page

Saas Interface Design System

Design Tokens Chart – Structured reference for styling/theming Typography Guide – Font hierarchy, scales, and text styling Color Tool & Spacing Diagram – Customizable palettes & layout grids

a1.jpg
MacBook Air - 2.png
MacBook Air - 1.png

TutorConnect Design System

  1. Colors: Primary green (#44c692), blue (#3692c3), white (#FFFFFF), error red (#dc062a).

  2. Typography: H1 Bold (24px), H2 Semibold (18px), body Regular (16px), labels Light (14px).

  3. Buttons: Primary (green fill), Secondary (blue outline), hover states (+10% darkening).

  4. Cards: White bg, blue-100 border (#ccdbe6), subtle shadow.

  5. Icons: Active (green), inactive (grey #b8b8b9).

  6. Spacing: 8px grid, 16px card margins, 24px section padding.

  7. Navigation: Active tab (blue underline), inactive (grey text).

  8. Microcopy: Friendly tone ("Good Morning, [Name]"), clear CTAs.

  9. Accessibility: Text contrast ≥4.5:1, avoid pure black.

  10. Assets: Figma kit, JSON tokens, Gold Door illustrations.

iPhone 13 Pro Max - 17.jpg
bottom of page