Design Specs

Jump to bottom

Flacial edited this page Aug 22, 2022 · 4 revisions

Mock based on Design

Old Design Link

Global Style

Colors
- Primary: hsl(248, 66%, 55%) | #5440d8
- Text
  - Dark purple: hsl(248, 56%, 16%) | #181240
  - Gray purple: hsl(249, 11%, 37%) | #575469
  - Light: hsl(0, 0%, 100%) | #ffffff
- Background
  - purple: hsl(248, 66%, 55%) | #5440d8
  - Green: hsl(170, 66%, 38%) | #21a18c
  - Light Gray: hsl(0, 0%, 96%) | #f5f5f5
  - Light Purple: hsl(232, 100%, 97%) | #f0f2ff
  - White: hsl(0, 0%, 100%) | #ffffff
  - Dark Gray: hsl(248, 10%, 42%) | #636076
Font: Inter
Brand Font: PT Mono
Code Font: Fira Code
Display Font: Rubik

Page Breakdown

Landing

Components - Shared

Button
- Primary
- Secondary
Card
- Default
- Success
Input
- Success
- Error - Input Invalid
Link Text
Logo
NavBar

Login / Signup

Used in Login, Signup, Success, Reset Password

Components

Card
Layout - Box
Link Text
Title

Nav (logged In)

Nav Links: Home, Lessons, Community, Profile

Lesson List

Components

LessonCard
- Toggle On/Off state
SideNavLinks
SideNavTitle
StatusCard

Lesson Challenge

Components

Color States
Number Badge
Status Badge

Appreciation

50/50 section split
User Search / Filter box
Remove Stars -> Should not be rating users

Components

Modal

Mentor Page

Review -> Dropdown to see the code

Mentor Review Page

Should show multiple submissions

Lesson Content - Put Off

Ignore the Lesson card (Doesn't provide any value)
Markdown Renderer ( Research )
- Toggles
- Tables
- Table Of Content

Low Priority

Comments on Lesson Content
Lesson FAQ