Buttons

.3d-btn-yellow

USE CASES

  • Use case 1
  • Use case 2
  • Use case 3
  • Use case 4

.3d-btn-yellow


USE CASES

  • Use case 1
  • Use case 2
  • Use case 3
  • Use case 4

.3d-btn-green


USE CASES

  • Use case 1
  • Use case 2
  • Use case 3
  • Use case 4

.3d-btn-light-pink


USE CASES

  • Use case 1
  • Use case 2
  • Use case 3
  • Use case 4

.3d-btn-med-pink


USE CASES

  • CTA in the menu
  • Use case 2
  • Use case 3
  • Use case 4

.3d-btn-neon-red


USE CASES

  • Use case 1
  • Use case 2
  • Use case 3
  • Use case 4

.3d-btn-dark-red


USE CASES

  • Use case 1
  • Use case 2
  • Use case 3
  • Use case 4

.3d-btn-purple


USE CASES

  • Use case 1
  • Use case 2
  • Use case 3
  • Use case 4

Primary colors | Shades | Hex Codes | hsl

Primary colors and shades

Yellow

--clr-yellow: #f6d34e
--clr-yellow-100: #fdf6dc
--clr-yellow-200: #fbedb8
--clr-yellow-300: #fae595
--clr-yellow-400: #f8dc71
--clr-yellow-500: #f6d34e
--clr-yellow-600: #c5a93e
--clr-yellow-700: #947f2f
--clr-yellow-800: #62541f
--clr-yellow-900: #312a10

Green

--clr-green: #e2e24c
--clr-green-100: #f9f9db
--clr-green-200: #f3f3b7
--clr-green-300: #eeee94
--clr-green-400: #e8e870
--clr-green-500: #e2e24c
--clr-green-600: #b5b53d
--clr-green-700: #88882e
--clr-green-800: #5a5a1e
--clr-green-900: #2d2d0f

Light Pink

--clr-light-pink: #edb3b4
--clr-light-pink-100: #fbf0f0
--clr-light-pink-200: #f8e1e1
--clr-light-pink-300: #f4d1d2
--clr-light-pink-400: #f1c2c3
--clr-light-pink-500: #edb3b4
--clr-light-pink-600: #be8f90
--clr-light-pink-700: #8e6b6c
--clr-light-pink-800: #5f4848
--clr-light-pink-900: #2f2424

Neon red

--clr-neon-red: #e81154
--clr-neon-red-50: #fab7cc
--clr-neon-red-100: #f8a4be
--clr-neon-red-200: #f67ea3
--clr-neon-red-300: #f17098
--clr-neon-red-400: #f0326d
--clr-neon-red-500: #e81154
--clr-neon-red-600: #b40d41
--clr-neon-red-700: #7f092e
--clr-neon-red-800: #4b061b
--clr-neon-red-900: #170208


Dark red

--clr-neon-red: #c0004d
--clr-neon-red-50: #ff79af
--clr-neon-red-100: #ff64a2
--clr-neon-red-200: #ff3b8a
--clr-neon-red-300: #ff1371
--clr-neon-red-400: #e9005d
--clr-neon-red-500: #c0004d
--clr-neon-red-600: #880037
--clr-neon-red-700: #500020
--clr-neon-red-800: #18000a
--clr-neon-red-900: #000000


Purple

--clr-purple-palette: #370226
--clr-purple-palette-50: #f84ac0
--clr-purple-palette-100: #f836ba
--clr-purple-palette-200: #f60fac
--clr-purple-palette-300: #d40893
--clr-purple-palette-400: #ad0678
--clr-purple-palette-500: #86055c
--clr-purple-palette-600: #5e0341
--clr-purple-palette-700: #370226
--clr-purple-palette-800: #010001
--clr-purple-palette-900: #000000


Gray

--clr-gray-50: #151a1e
--clr-gray-100: #2b333b
--clr-gray-200: #39444d
--clr-gray-300: #4d5e6b
--clr-gray-400: #59677e
--clr-gray-500: #657991
--clr-gray-600: #788da3
--clr-gray-700: #9ba9b6
--clr-gray-800: #c2c6cc
--clr-gray-900: #e1e2e5
--clr-gray-1000: #f4f4f5







Typeography

Header 1

ACCENT FONT PRIMARY
Accent font secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id massa eros. Donec et rutrum elit. Aenean vulputate, massa vel fringilla blandit, leo quam efficitur libero, non varius orci elit in ex. Sed id lobortis tortor.

Header 2

ACCENT FONT PRIMARY
Accent font secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id massa eros. Donec et rutrum elit. Aenean vulputate, massa vel fringilla blandit, leo quam efficitur libero, non varius orci elit in ex. Sed id lobortis tortor.

Header 3

ACCENT FONT PRIMARY
Accent font secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id massa eros. Donec et rutrum elit. Aenean vulputate, massa vel fringilla blandit, leo quam efficitur libero, non varius orci elit in ex. Sed id lobortis tortor.

Header 4

ACCENT FONT PRIMARY
Accent font secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id massa eros. Donec et rutrum elit. Aenean vulputate, massa vel fringilla blandit, leo quam efficitur libero, non varius orci elit in ex. Sed id lobortis tortor.

Header 5
ACCENT FONT PRIMARY
Accent font secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id massa eros. Donec et rutrum elit. Aenean vulputate, massa vel fringilla blandit, leo quam efficitur libero, non varius orci elit in ex. Sed id lobortis tortor.

Header 6
ACCENT FONT PRIMARY
Accent font secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id massa eros. Donec et rutrum elit. Aenean vulputate, massa vel fringilla blandit, leo quam efficitur libero, non varius orci elit in ex. Sed id lobortis tortor.


My notes

Typeography


Rules
Header font - Playfair ✅
Body font - Georgia/Montserrat ✅
Accent font (on bold)- Lato ✅
Accent font 2 (on italic) - caliway regular ✅

  • Desktop - Paragraphs are 50-75ch wide ✅
  • Body Font size - 17-23 px ✅
  • Body Line height 25-31 px7 ✅
  • Paragraph spacing 7-18px ✅
  • Header font size - 55 - 75px ✅
  • Accent font - uppercase, bold, letter spacing 0.4px, opacity 75-90%, font-size 17-18px ✅
  • White space - When adding whitespace in a design like this, think of one simple rule: outer spacing is greater than inner spacing.
    The space between any group of related elements should be greater than the space within the group ✅

Cards

Shadows

Note - you may need to use 

margin: 0px;
max-width: 100%;
box-shadow: 6px 6px 1px 1px #dddddd;

box-shadow20px 20px 1px 1px #dddddd; 


box-shadow30px 30px 5px 1px #dddddd; 


box-shadow: 10px 10px 20px 1px var(--clr-gray-100);

box-shadow: 10px 10px 20px -8px var(--clr-gray-100);


box-shadow30px 30px 5px 1px #dddddd; 


box-shadow: var(--shadow-elevation-low);

box-shadow: var(--shadow-elevation-medium);


box-shadow: var(--shadow-elevation-high);


Angled backgrounds

Cards - try shadow from josh comeau with button animation 

Organize by static, dynamic and interactive elements

container 16px for cell phone ✅

menus

Program the editor so the color swatch has brand colors in it


Mouseover buttons like the sketch and psd buttons for outline button in menu - https://cssgradient.io/gradient-backgrounds/

Click to copy class name or text expander keyboard shortcut to clioboard

forms fields formatted like a phone app. Address bar of chrome on my windows laptop

Ornaments

Graphics/Watermarks/logos/icons


Proper color combinations for all elements

Spacing/whitespace

background colors

dark mode

asides

drop shadows

map out sections based on design concepts like this - https://typ.io/s/8p11

Buttons ✅