CSS - Other

Font size to use for a responsive UI on Mobile & Desktop

Mobile

  1. Smallest: 12 px
  2. Details: 13 - 14 px
  3. Body Text: 16 - 18 px
  4. Subtitle: 18 - 20 px
  5. Title: 24 - 28 px
  6. Header: 32 - 38 px


Desktop

  1. Smallest: 16 px
  2. Details: 16 - 18 px
  3. Body Text: 20 - 21 px
  4. Subtitle: 21 - 24 px
  5. Title: 34 - 38 px
  6. Header: 40 - 48 px

Glassmorphism Effect 

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
}

Hide password reveal button in MS Edge 

::-ms-reveal {
  display: none;
}

Layout Debugging 

*{
  border: 2px solid red;
}

Neumorphic Button 

.neumorphic {
  background: #e0e0e0;
  border-radius: 12px;
  box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
  padding: 15px;
}

.neumorphic:hover {
  box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}

Neutral Grayscale Color System

A structured grayscale palette for text, borders, and backgrounds, ensuring clarity and accessibility.


  • AAA Text – #0F0F0F
  • AA Text – #1C1C1C
  • Disabled Text – #3C3C3C
  • Disabled Background – #5A5A5A
  • Border Hover – #7A7A7A
  • Form Border – #9B9B9B
  • Input Border – #BFBFBF
  • Hover State – #DCDCDC
  • Background – #F4F4F4

Night Mode

Container

color: black !important;
background: white !important;
filter: invert(1);


Element in container

filter: invert(1) hue-rotate(180deg);

Pure white for text in dark mode

High Emphasis

87% Opacity


Medium Emphasis

60% Opacity


Low Emphasis

38% Opacity

Quick circle 

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

Smooth Scroll 

html {
  scroll-behavior: smooth;
}

Sticky Navigation 

nav {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1000;
}

Stop Image Stretching 

width: 100%;
height: 100%;
object-fit: cover;