Kick-ass style patterns to include in every project

kas.css

/* Recommended font stack for neutral, modern look */
:root { --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

body { font-family: var(--ui-font); }

/* Self-hosted font (or just comment out) */
@font-face{
  font-family: 'YourCoolFont';
  src: url('/fonts/yourcool.woff2') format('woff2');
  font-display: swap;
}

/* Typography sizes */
root{
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --lead: 1.45;
}

/* Fluid heading */
h1 {
  font-size: clamp(var(--fs-lg), 2.5vw, 2.25rem);
  line-height: var(--lead);
}
p { font-size: var(--fs-base); line-height: 1.6; }

/* Spacing with gap, logical properties, and spacing variables */
:root{
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
}

/* grid with consistent gaps */
.cards { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
  gap: var(--space-2); 
}

/* logical properties for localization correctness */
.title { 
  margin-block-end: var(--space-1); 
  padding-inline: var(--space-2); 
}

/* Nice subtle elevation for depth (shadows and borders) */
:root { 
  --elevation-1: 0 1px 4px rgba(12,16,24,0.06); 
  --elevation-2: 0 6px 20px rgba(12,16,24,0.08); 
}

.card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--elevation-1);
  border: 1px solid rgba(10,12,20,0.04);
}
.card--hover { 
  box-shadow: var(--elevation-2); 
  transform: translateY(-2px); 
  transition: .18s transform, .12s box-shadow; 
}

/* Use an HSL color system and small modulation helpers */
:root{
  --h: 215;
  --s: 90%;
  --primary: hsl(var(--h) var(--s) 50%);
  --primary-700: hsl(var(--h) var(--s) 35%);
  --muted: hsl(210 8% 96%);
}

.btn {
  background: var(--primary);
  color: white;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--primary-700);
}

/* subtle disabled state with same hue */
.btn:disabled { 
  background: color-mix(in srgb, var(--primary) 10%, white); 
  opacity: .9; 
}

/* Micro-interactions with transform and composited properties */
.btn {
  transition: transform .16s cubic-bezier(.2,.9,.2,1), box-shadow .12s;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(12,16,24,0.08);
}

/* Prevent layout shift with aspect-ratio and explicit sizes */
/*
  Example:
  <!-- HTML: preferred -->
  <img src="/img/hero.jpg" width="1200" height="675" alt="Hero image" style="width:100%;height:auto;aspect-ratio:16/9;">

*/

/* 
  Using container queries for component-level responsiveness
  Example:
  [ container (200px) ] -> .card (1 column)
  [ container (450px) ] -> .card (2 columns)
*/
.card {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr;
}
@container (min-width: 420px) {
  .card { 
    grid-template-columns: 1fr 2fr; 
    gap: 1rem; 
  }
}

/* 
Don't forget to inline minimal critical CSS in the head, then preload the full stylesheet
<link rel="preload" href="/css/main.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></noscript> 
*/