• Get the High Five Wine Scoring System
  • About Me
  • Blog
  • Contact Me
  • 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 ✅