This document provides design guidelines for a coding platform, including color palettes, typography, buttons, fields, boxes, progress indicators, and other interface elements. It specifies colors, sizes, states, and additional details to maintain a consistent and user-friendly design across the platform.

1. Coding
The
The
Coding
TheCoding
The
#FFFFFF #000000
#222222
#250042 #3D2C6F #695A94 #BDAFD6 #ΒDAFE4
#FFB509#FFE3A2#FFCF60
#F2F2F2 #A7A6A5 #4F4F4F
Heading 1
Heading 2
Heading 3
Heading 4
INPUT
Montserrat
Bold/Semibold
72px, 48px, 36px, 28px, 24px, 18px
Ubuntu Mono
Regular
20px
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euis-
mod tincidunt ut laoreet dolore magna ali-
quam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcor-
per suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feu-
giat nulla facilisis at vero eros et ac-
cumsan et iusto odio dignissim.
Qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facili-
si.Used diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volut-
pat. Ut wisi enim ad minim veniam.
Display 1
Design Guidelines
Coding Ninja
The

2. NORMAL
LOADING
HOVER
PRESSED
NORMAL
LOADING
HOVER
PRESSED
NORMAL
LOADING
HOVER
PRESSED
NORMAL
LOADING
HOVER
PRESSED
NORMAL
LOADING
HOVER
PRESSED
NORMAL
LOADING
HOVER
PRESSED
NORMAL
LOADING
HOVER
PRESSED
NORMAL
LOADING
HOVER
PRESSED
NORMAL
LOADING
HOVER
PRESSED
NORMAL
LOADING
HOVER
PRESSED
NORMAL
LOADING
HOVER
PRESSED
NORMAL
LOADING
HOVER
PRESSED
ACTION
ACTION
BUTTONS, TEXT FIELDS ETC
Border radius: 3px
Height: 60px
Width: 200px
Design Guidelines
Coding Ninja
The

3. LEADERBOARD HELPCOURSES USERNAME
#th #
AVATAR
Color combo: 1 Light & 1 Dark
Skin combo: 1 expression & 1 color & 1 nose color
Ninja type: Ash & Snow & Fire & Yeti & Christmas & Zombie etc
GAMIFICATION OPORTUNITY:
UNLOCK SPECIAL AVATARS AS A
REWORD & XP LEVEL
DEPENDENT AVATARS!!!!!!!!!!!
.etc...
#e9a9b5#c72846 #99c69f#45b545
USERNAME
#th #
CONTACTCOURSES
TERMS OF USE PRIVACY POLICY© Copyright 2019 - All rights reserved.
CONTACTCOURSES
TERMS OF USE PRIVACY POLICY© Copyright 2019 - All rights reserved.
THIS VECTOR IS FROM FREEPIC. COPYRIGHT ISSUE
Design Guidelines
Coding Ninja
The

4. Selection
Text
Error Field T i t l e !
Lorem ipsum dolor sit
amet. Consectetuer.
Text
Filled-in Field
Placeholder/Text
Focused Field
Placeholder
SEARCHSearch Box
Lorem ipsum
dolor sit amet.
T i t l e !
Lorem ipsum dolor sit amet, consec-
tetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim
T i t l e
Lorem 12% Dolor
Lorem ipsum dolor sit amet, consec-
tetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim
T i t l e
Lorem 12% Dolor
T i t l e
Lorem 12% Dolor
Lorem ipsum dolor sit amet, consec-
tetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim
LARGE BOXES
Border radius: 5px
Width: 350px
Height: 275px
Lorem ipsum dolor sit amet, consec-
tetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim
T i t l e
Lorem 12% Dolor
Design Guidelines
Coding Ninja
The

5. Step 1
Step 2
Step 3
Step 4
Step 5
Step 6
Step 7
Step 8
Available
Hover
Selected
Special
Disabled
POGRESS BULLETS
Border: a1px
Outer Circle Width: 30px
Inner Circle Width: 17px
Outer Square Width: 34px
Inner Square Width: 17px
Middle Square Width: 27px
Privacy Policy & Terms of Service
START CODING NOW
Username
Password
E-mail
GET STARTED
Design Guidelines
Coding Ninja
The

6. MonSunSatFriThurWedTue
Lorem ipsum
dolor sit
amet,
56/60
ALorem ipsum
dolor sit
amet,
42/250
USER STATISTICS
Design Guidelines
Coding Ninja
The

7. Design Guidelines
Coding Ninja
The