Brand guidelines for
new modules on livefront.com.

Read this first

Our assumptions.

This guide is a working document, not a contract with the design team. Where we extracted something verbatim, we say so. Where we had to substitute, we flag it. Treat anything below as a starting point for the new module — and a basis for a follow-up conversation with brand owners before launch.

• Extracted

  Color tokens

  All 50+ --color-* CSS custom properties were pulled directly from the production stylesheet on livefront.com. Names, RGB values, and aliases match the live site.

• Extracted

  The −6.9° slant

  Pulled from the production CSS literal in the Astro-bundled stylesheet. The angle, gradient stop, and transparent edge offset are preserved exactly.

• Extracted

  Voice & tone

  Derived from quoted copy across /, /about, /careers, /see–/scale, /livefront-and-zeal, and /contact. Every example is real.

• Extracted

  Real Tiempos & Onest

  The actual .otf / .ttf files are served locally from ./assets/livefront/fonts/, with the same per-weight family-name convention as the live site (e.g. bold = TiemposHeadline-Bold, not font-weight: 700).

• Internal-only

  Tiempos is licensed

  Tiempos Headline / Tiempos Text are commercial Klim Type Foundry fonts under Livefront's license. Don't commit the .otf files to a public repo or ship them to a third-party CDN — Onest is open source (SIL OFL) and is fine to redistribute.

• Out of scope

  Logo & brand assets

  We don't yet have access to wordmark / lockup files, clear-space rules, or photography license terms. Loop in the design team before shipping anything that uses the Livefront mark itself.

Section 2

Color tokens.

Always reference tokens by name, not by hex. The site exposes 50+ --color-* CSS custom properties; the most common are listed below.

Brand.

Neutrals.

Semantic accents.

Use sparingly. Green is not the primary CTA color — it's an accent reserved for success states and select case studies (e.g. Box Tops). Don't substitute it for the blue button system.

Section 4

Layout & spacing.

rem-based throughout. Containers, gutters, and vertical rhythm are all fluid — nothing scales in fixed pixels.

Prose max-width

--text-content-max-width: 60rem (960px). Full-bleed sections are allowed; constrain reading lines.

Page gutters

padding-inline: clamp(1.5rem, 0.8766rem + 1.2987vw, 2.5rem);

Section rhythm

margin-block: clamp(2.5rem, 0.9416rem + 3.2468vw, 5rem);

Breakpoints

48rem (768px, tablet) · 64rem (1024px, desktop). No 1280px container.

Section 8

Implementation.

The new module uses Tailwind. Extend the theme so token names match this guide and docs/BRAND.md. When the page already exposes a CSS variable, prefer bg-[var(--color-navy)] over duplicating the value.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        navy: 'rgb(36 68 89 / <alpha-value>)',
        'off-black': 'rgb(14 27 36 / <alpha-value>)',
        blue: {
          DEFAULT: 'rgb(43 145 217 / <alpha-value>)',
          accessible: 'rgb(0 119 193 / <alpha-value>)',
          medium: 'rgb(161 220 252 / <alpha-value>)',
          light: 'rgb(227 245 255 / <alpha-value>)',
        },
        body: 'rgb(55 73 82 / <alpha-value>)',
        secondary: 'rgb(102 116 122 / <alpha-value>)',
        border: 'rgb(225 228 229 / <alpha-value>)',
        grey: 'rgb(249 250 251 / <alpha-value>)',
      },
      // Production convention: one family per weight.
      // Switch weight by switching family, not via font-weight.
      fontFamily: {
        sans:        ['Onest', 'system-ui', 'sans-serif'],
        'sans-semi': ['Onest-SemiBold', 'Onest', 'system-ui', 'sans-serif'],
        'sans-extra':['Onest-ExtraBold', 'Onest', 'system-ui', 'sans-serif'],
        serif:       ['TiemposHeadline-Bold', 'Georgia', 'serif'],
        'serif-italic':['TiemposHeadline-RegularItalic', 'Georgia', 'serif'],
        body:        ['TiemposText', 'Georgia', 'serif'],
      },
      borderRadius: { card: '1.5rem', btn: '0.75rem' },
      boxShadow: {
        card:   '0 0.215625rem 1.7225rem rgba(0,0,0,0.08)',
        lifted: '0 0.25rem 1.5rem rgba(0,0,0,0.16)',
      },
    },
  },
};

@font-face (production-accurate).

/* Each weight is its own family. Switch family to switch weight. */
@font-face { font-family: TiemposHeadline;
  src: url('/fonts/TiemposHeadline-Regular.otf') format('opentype');
  font-weight: 400; font-display: fallback; }
@font-face { font-family: TiemposHeadline-Bold;
  src: url('/fonts/TiemposHeadline-Bold.otf') format('opentype');
  font-weight: 700; font-display: fallback; }
@font-face { font-family: TiemposHeadline-RegularItalic;
  src: url('/fonts/TiemposHeadline-RegularItalic.otf') format('opentype');
  font-weight: 400; font-display: fallback; }
/* …+ TiemposHeadline-BoldItalic, TiemposText{,-Bold,-RegularItalic},
        Onest{,-Medium,-SemiBold,-Bold,-ExtraBold} */

CSS variables (drop-in).

:root {
  --color-navy:            rgb(36, 68, 89);
  --color-off-black:       rgb(14, 27, 36);
  --color-blue:            rgb(43, 145, 217);
  --color-accessible-blue: rgb(0, 119, 193);
  --color-light-blue:      rgb(227, 245, 255);
  --color-medium-blue:     rgb(161, 220, 252);
  --color-white:           rgb(255, 255, 255);
  --color-grey:            rgb(249, 250, 251);
  --color-border:          rgb(225, 228, 229);
  --color-body-text:       rgb(55, 73, 82);
  --color-secondary-text:  rgb(102, 116, 122);
  --text-content-max-width: 60rem;
}

/* Production h1 — note `font-weight: unset`. Weight is in the family name. */
h1, .as-h1 {
  font-family: TiemposHeadline-Bold, serif;
  font-weight: unset;
  font-size:   clamp(2.5rem, 1.2532rem + 2.5974vw, 4.5rem);
  line-height: clamp(2.75rem, 1.0357rem + 3.5714vw, 5.5rem);
  letter-spacing: -0.0625rem;
  text-wrap: balance;
  color: var(--color-navy);
  margin: 0;
}

The slant.

.slant {
  width: 100%;
  height: var(--slant-height);
  background: linear-gradient(
    -6.9deg,
    var(--color-navy) 50%,
    transparent calc(50% + 1px)
  );
}