Aech

I use it to hit the ground running on web projects, so that I don’t have to worry too much about styling. Aech is built for use with Source Serif Pro and Inter, but it falls back to system fonts out of the box. The best way to get started is by reading the source code:

/**
 * Variable definitions
 */
:root {
  /* Strokes, light backgrounds, and so on */
  --color-wash: #f4f4f4;
  /* Light text, low-importance elements, and so on */
  --color-light: #9393a8;
  /* Buttons and other interface elements you want to highlight */
  --color-accent: #8049ff;
  /* Body text */
  --color-dark: #282851;
  /* Interface text */
  --color-black: #101020;

  /* Margin, padding, or anything else that needs a size */
  --xxl: 60px;
  --xl: 40px;
  --l: 30px;
  --m: 20px;
  --s: 15px;
  --xs: 10px;
  --xxs: 5px;

  /* I usually use sans for interface elements and serif for body text */
  --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
    Helvetica Neue, sans-serif;
  --font-family-serif: Source Serif Pro, Iowan Old Style, Apple Garamond,
    Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

  /* I usually stick to at most three font weights, since loading fonts is expensive */
  --font-weight-thin: 400;
  --font-weight-light: 400;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Headings and large text */
  --line-height-tight: 1.25;
  /* Everything else */
  --line-height-normal: 1.5;

  /* Titles */
  --font-size-xxl: 36px;
  /* Headings */
  --font-size-xl: 30px;
  /* Subheadings */
  --font-size-l: 24px;
  /* Body text, especially text in serif */
  --font-size-m: 20px;
  /* Default for all interface elements */
  --font-size-s: 18px;
  /* Buttons, navbar links, footer content, and so on */
  --font-size-xs: 16px;
  /* Breadcrumbs, tags, and smallcaps */
  --font-size-xxs: 14px;
}

/**
 * Resets
 */

::placeholder {
  color: var(--color-light);
  opacity: 1;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

ol {
  padding-left: 1.5em;
}

/* Responsive media */
img,
video {
  height: auto;
  max-width: 100%;
}

/**
 * Base styles
 */
html,
body {
  font-size: var(--font-size-s);
  font-family: var(--font-family-sans);
  font-weight: var(--weight-normal);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--line-height-normal);
  color: var(--color-black);
}

main {
  padding: var(--xl) 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: var(--m) 0 var(--xs);

  font-family: var(--font-family-sans);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: var(--font-size-xxl);
}

h2 {
  font-size: var(--font-size-xl);
}

h3,
h4,
h5,
h6 {
  font-size: var(--font-size-l);
}

a {
  color: inherit;
  text-decoration: none;
}

hr {
  margin: var(--xs) 0;

  border: 0;
  border-top: 1px solid #f4f4f4;
}

blockquote {
  padding: 0 0 0 var(--m);
  margin: var(--m) 0 var(--m) var(--xs);

  border-left: 5px solid var(--color-accent);
}

table {
  width: 100%;

  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

input[type="email"],
input[type="password"],
input[type="text"],
textarea {
  padding: var(--s) var(--m);
  width: 100%;

  color: var(--color-black);
  border: 1px solid var(--color-wash);
  border-radius: 4px;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
textarea:focus {
  border-color: var(--color-accent);
}

.button,
button,
input,
textarea {
  padding: 0;

  resize: none;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  line-height: inherit;
  color: inherit;
}

.button,
button,
input[type="submit"] {
  display: inline-flex;
  align-items: center;

  cursor: pointer;
  font-weight: var(--font-weight-medium);
}

input[type="submit"] {
  margin-top: var(--l);
}

/**
 * Components
 */
/* Buttons */
.button--primary,
.button--secondary {
  padding: var(--s) var(--xl);

  border-radius: 4px;
}

.button--primary {
  background: var(--color-accent);
  color: #fff;
}

.button--secondary {
  border: 1px solid var(--color-wash);
}

/* Wrapper (wide) and container (narrow) */
.l-wrapper {
  max-width: 1300px;
  margin: 0 auto;
}

.l-container {
  max-width: 650px;
  margin: 0 auto;
}

/* Navbar */
.l-navbar {
  padding: var(--m) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-light);
  border-bottom: 1px solid var(--color-wash);
}

.l-navbar__logo {
  height: 48px;
  width: 48px;
  margin-right: var(--s);

  border-radius: 4px;
}

.l-navbar__brand {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 650px) {
  .l-navbar__info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.l-navbar__expand {
  display: none;
}

.l-navbar__expand > div {
  height: 3px;
  width: 24px;
  margin-bottom: var(--xxs);

  background: var(--color-light);
}

.l-navbar__expand > div:last-child {
  margin-bottom: 0;
}

.l-navbar__links ul {
  display: flex;
}

.l-navbar__links li {
  margin-left: var(--m);
}

@media screen and (max-width: 650px) {
  .l-navbar {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
  }

  .l-navbar__expand {
    display: block;
  }

  .l-navbar__links:not(.is-active) {
    display: none;
  }

  .l-navbar__links.is-active {
    display: block;
    position: absolute;
    top: 100%;
    width: 100%;
    padding: var(--m);

    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 15px -10px rgba(0, 0, 0, 0.5);
  }

  .l-navbar__links ul {
    flex-direction: column;
  }

  .l-navbar__links li {
    margin: calc(var(--xs) / 2) 0;
  }
}

.l-navbar__title {
  color: var(--color-black);
}

.l-navbar__brand:hover .l-navbar__title {
  color: var(--color-light);
}

.l-navbar a:hover {
  color: var(--color-black);
}

/* Page header */
.l-header {
  padding: var(--xl) 0;

  border-bottom: 1px solid var(--color-wash);
}

.l-header h1 {
  margin: 0 0 var(--xs) 0;
}

.l-header__logo {
  margin: 0 0 var(--m) 0;
  width: 128px;
  height: 128px;

  border-radius: 8px;
  box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.5);
}

.l-header__description {
  color: var(--color-light);
}

.l-header__action {
  margin: var(--m) 0 0 0;
}

/* Page footer */
.l-footer {
  padding: var(--xl) 0;

  font-size: var(--font-size-xs);
  border-top: 1px solid var(--color-wash);
  color: var(--color-light);
}

.l-footer__title {
  color: var(--color-black);
  font-weight: var(--font-weight-medium);
}

.l-footer__links {
  margin: var(--m) 0;
}

.l-footer__links li {
  margin: var(--xxs) 0;
}