Brutalism

/* via superdesign.dev/styles/brutalism */
:root {
  --bg: #ffffff;
  --ink: #000000;
  --link: #0000ee;            /* the browser's default unvisited-link blue: links must look like links */
  --rule: 2px solid var(--ink);
}

body {
  background: var(--bg);
  color: var(--ink);
  /* The raw-terminal variant. For the plainer flavor swap to: system-ui, Arial, sans-serif */
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size: 1rem;            /* never below 16px, mono reads slower at small sizes */
  line-height: 1.45;
  margin: 8px;                /* keep browser-default margin energy, do not reset to 0 */
}

h1, h2, h3 {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 1.5rem 0 0.5rem;
}

a {
  color: var(--link);
  text-decoration: underline; /* removing underlines is the first step away from brutalism */
}

button, input, select, textarea, .card, table {
  border: var(--rule);
  border-radius: 0;           /* no rounded corners, anywhere */
  box-shadow: none;           /* shadows are the first thing brutalism deletes */
  background: var(--bg);
  color: var(--ink);
}

button {
  font: inherit;              /* buttons default to the OS UI font, force the page font */
  padding: 0.5rem 1.25rem;
  text-transform: uppercase;
  cursor: pointer;
}
button:hover, a:hover {
  background: var(--ink);
  color: var(--bg);           /* hover = hard inversion, no transitions, no easing */
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;        /* a raw border is the most on-brand focus style there is */
}

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--ink); padding: 4px 8px; text-align: left; }