========================================================================
CLEM ZIROLI III — IDENTITY
========================================================================

Everything in this archive is published at https://clemziroli.com/identity.
Questions, or a use this does not cover: clem@clemziroli.com


COLOUR
------------------------------------------------------------------------
  Paper     #F6F4EF   --color-paper    The page. Every surface starts here.
  Ink       #0F1720   --color-ink      Body text and headings.
  Navy      #0B2D5B   --color-navy     The dark bands, the solid button, focus rings, the seal.
  Bronze    #8A6A3F   --color-bronze   Eyebrows, numerals, the ornament, rare hairline emphasis.
  Rule      #D8D6D2   --color-rule     Hairlines and borders. Never text.

  Every intermediate tone is an opacity of one of the five above.
  No other colour appears anywhere.
    text-ink/65      The lowest tone allowed for text on paper. 5.43:1.
    text-ink/60      Placeholder em-dashes only. 4.61:1.
    text-paper/80    Secondary text on a navy band. 8.43:1.
    text-paper/70    The floor for body text on navy. 6.81:1.


TYPE
------------------------------------------------------------------------
  EB Garamond — Headings, numerals, small caps, the wordmark
    Variable 400–800. The site uses 460–600.
    Open source (SIL OFL). Self-hosted — the site makes no font requests.

  Inter — Body copy, ledes, captions, button labels
    Variable. The site uses 400–600.
    Open source (SIL OFL). Self-hosted.

  Scale:
    display-xl   52 → 124px     Serif  The home hero. One per site.
    display-lg   42 → 86px      Serif  Interior page headings.
    display-md   34 → 58px      Serif  Major sections, pull quotes.
    display-sm   28 → 42px      Serif  The default section heading.
    heading-lg   23 → 31px      Serif  Entry names, card titles.
    heading-md   20 → 24px      Serif  Small card titles.
    lede         18 → 22px      Sans   The standfirst under a heading.
    body         16px           Sans   Default body copy.
    body-sm      14px           Sans   Captions, metadata, footer.
    eyebrow      12px, 0.16em   Sans   Labels and button text.


USING THE MARK
------------------------------------------------------------------------
  · Do not recolour the seal. The four tints above are the whole set.
  · Do not stretch, rotate, crop, or add effects to the mark. No shadow, no gradient, no outline.
  · Keep clear space around the mark of at least half the width of its circle.
  · Bronze is never used for text on navy — it falls to 2.74:1. On navy the mark is white.
  · The smallest the seal is used is 32px. Below that the laurel closes up.
  · The establishment line reads Est. MMXXV. It dates the site, and is not a company founding date.


FILES
------------------------------------------------------------------------
  mark/logo.png                      The seal with white behind the circle. This is the masthead and favicon artwork. PNG, 684px.
  mark/seal-navy.svg                 Full colour. For paper backgrounds. The temple is knocked out, so put white behind it.
  mark/seal-white.svg                Single colour white. For navy and other dark backgrounds.
  mark/seal-bronze.svg               Single colour bronze. An accent, used rarely.
  mark/seal-ink.svg                  Single colour dark. Used for the ghosted watermark on paper.
  mark/seal-navy.png                 Transparent PNG of the navy seal, where an SVG will not do. 1080px square.
  lockups/lockup-navy.svg            Seal and wordmark together. The default.
  lockups/lockup-navy-alt.svg        A second navy arrangement.
  lockups/lockup-bronze.svg          For bronze-accented collateral.
  lockups/lockup-black.svg           Single colour. For one-colour print and fax-grade reproduction.
  lockups/lockup-white.svg           Single colour white, for dark backgrounds.
  icons/favicon.svg                  
  icons/favicon.png                  
  icons/favicon.ico                  
  icons/apple-touch-icon.png         
  social/og-default.png              
