Description

Add the base components to Cryptic.

Custom controls are to be developed for the game, so that the user interface can be adapted to a custom design. Another advantage is the possibility to create different themes and styles later.

For questions about the design please contact Philipp or Nibiru by Cryptic-Discord
For questions about the frontend development please contact @MaxiHuHe04

Additional context

All designs for the base components: In picture format
All base components in one overview: Live view

Icons for sidebar and inputs: Tabler Icons | Tabler icon npm

Typeface

Font 1: Jost
Font 2: Nothing You Could Do
Font size: 20px

General information

Small border radius: 8px (Button, Input etc.)
Big border radius: 16px (Pop-Up, Kacheln etc.)

Colors

Primary (Main Color)

Color	HEX	Description
	#2ECC70	Default
	#1F8C4C	Hover
	#2E473E	Disabled

Success

Color	HEX	Description
	#3ABB18	Default
	#277A10	Hover
	#2F5629	Disabled

Warning

Color	HEX	Description
	#F1C30E	Default
	#B3910B	Hover
	#675926	Disabled

Danger / Error

Color	HEX	Description
	#F00040	Default
	#B0002F	Hover
	#671E35	Disabled

Info

Color	HEX	Description
	#3281F6	Default
	#245EB5	Hover
	#2D456C	Disabled

Background / Font / Other

Color	HEX	Description
	#748781	Checkbox, radio, switch and light font disabled
	#222D2D	Button font dark disabled
	#25252B	Input background disabled
	#2B2B31	Background sidebar submenu
	#2F2F36	Background
	#1A1C23	Font dark
	#1D1D24	Background inputs Popup background dark
	#1E1E24	Background sidebar
	#434349	Font placeholder disabled
	#888888	Placholder Button font disabled
	#BEBEBE	Font grey
	#FFFFFF	Font light Popup background light

Base components

Please check off finished control

• Buttons #279
• Dropdown #280
• Inputs
  • Checkbox, Switch #281
  • Number #282
  • Range #290
  • Search #289
  • Text #288
• Popups #287
• Progressbar #286
• Radio #285
• Sidebar #284
• Tooltip #283
• Alerts #301
• Tab Navigation #302