styleguide-design.md

Style Guide

The Style Guide defines visual design standards, typography, color palette, dimensions, shape and other aspects, ensuring uniformity and simplifying the development process.

Please follow the rules and tokens provided in the guide.

General rules

1. Use kebab case notation for tokens naming.

🎨 Colors

Usage

{
  background-color: rgba($color-yellow, $opacity-8);
  color: $color-black;
}

Token Name

1. Token type: $color
2. The name of the color.
3. Tone (optional).

List of Tokens Used

	Token	HSL	HEX
	$$Primary$$
	$color-black	hsl(0, 0%, 0%)	#000
	$color-white	hsl(0, 0%, 100%)	#fff
	$$Yellow$$
	$color-yellow	hsl(50, 100%, 56%)	#ffdb20
	$color-yellow-700	hsl(40, 58%, 25%)	#664d1b
	$color-yellow-500	hsl(49, 87%, 53%)	#efc91f
	$color-yellow-100	hsl(39, 100%, 93%)	#fff2d9
	$color-yellow-50	hsl(40, 100%, 97%)	#fffaf0
	$$Red$$
	$color-red	hsl(6, 65%, 52%)	#d44333
	$$Purple$$
	$color-purple-400	hsl(257, 45%, 54%)	#7356bf
	$color-purple-50	hsl(260, 47%, 96%)	#f4f1fa
	$$Gray$$
	$color-gray-600	hsl(0, 0%, 33%)	#545454
	$color-gray-500	hsl(0, 0%, 46%)	#757575
	$color-gray-400	hsl(0, 0%, 69%)	#afafaf
	$color-gray-200	hsl(0, 0%, 90%)	#e6e6e6
	$color-gray-100	hsl(0, 0%, 95%)	#f2f2f2

🫧 Opacity

Usage

{
  background-color: rgba($color-yellow, $opacity-8);
  color: rgba($color-black, $opacity-80);
  opacity: $opacity-100;
}

Token Name

1. Token type: $opacity
2. The opacity value (as a percentage).

List of Tokens Used

Token	Value
$opacity-100	1
$opacity-80	0.8
$opacity-70	0.7
$opacity-50	0.5
$opacity-20	0.2
$opacity-10	0.1
$opacity-8	0.08
$opacity-0	0

🇦 Fonts

🚧 The section is in development 🚧

⬆️ Size

🚧 The section is in development 🚧

✨ Effect

🚧 The section is in development 🚧