anchor.diff:            }
           mixin colorBox(color)
             section.o-Box.-w-1o2(class=[color.bg_class, (color.is_dark) ? 'h-darkbg' : ''])
  +            mixin description()
  +              p Sample description.
  +            block
               h4.ColorTitle= color.name
               p: code.ColorCode
                 | .#{color.bg_class}
                 br
                 | #{color.code_dfn} == #{color.code_hex}
  -            block
  +            +description()
               if (color.uses && color.uses[0])
                 ul
                   each el in color.uses
  
positive.code:             , sample: 'The quick brown fox jumps over the lazy dog.'
              }
            }
          mixin fontBox(typeface)
            section.o-FlexContainer
              h3.-w-1o1= typeface.name
              div.a-w-p1
                p
  
negative.code:                   input(type="range" name="fw" min="100" max="900" step="100" value="400")
                    input(type="text" value="400 (normal)" disabled="")
                  input.-d-bk(type="reset")
              if footer
                +footer()
          h2 Typeface Scheme
          +fontBox(font_scheme.base)
            mixin description()
              p.
                Used for the main body copy, Avenir Next
                is a sans-serif type with little to no thick/thin transition.
                Being a sans-serif, its #[i italic] is actually an oblique, which just slants the glyphs.
          +fontBox(font_scheme.heading)
            mixin description()
              p.
                Optima is used only for headings of body copy
                (not table headings, #[i(lang="la"): abbr(title="et cetera") etc.]).
                It is a sans-serif polyweight type with a moderate thick/thin transition.
                Because of this, it goes well with both monoweight types and serif types, which
                makes it perfect for headings.
          +fontBox(font_scheme.prose, true)
            mixin description()
              p.
                Baskerville is used for text in formal documents and articles.
                It is a serif oldstyle type, which is easy on the eyes and can be read at extensive length.
                Like the #[i heading] font family, it, too, has a moderate thick/thin transition, but has diagonal stress and
                serifs, and true italics, which means it uses a whole new set of glyphs.
                #[sup: a.Rf#rf-baskerville(rel="this" href="#fn-baskerville") 1]
            mixin footer()
              footer.-w-1o1
                ul.c-ListFootnotes
                  li.
                    #[sup: a.Fn#fn-baskerville(rel="this" href="#rf-baskerville") 1]
                    #[b Baskerville], though considered an #[b oldstyle] type, actually has
                    a straight, vertical stress, which is typically a feature of #[b modern] types.
                    However #[b Palatino] and #[b Cochin] indeed have diagonal stresses.
          +fontBox(font_scheme.accent)
            mixin description()
              p.
                Helvetica Neue is used for typographical and #[abbr(title="user interface") UI]
                components such as ledes, pull quotes, captions, alerts, labels, buttons, and keys.
                Like #[b Avenir], it is a monoweight sans-serif, yet slightly heavier.
          +fontBox(font_scheme.code)
            mixin description()
              p.
                Menlo is a monospace type used for sample code on the site. Personally, I dislike
                monospace fonts with serifs, so I chose a sans-serif.
          +fontBox(font_scheme.math)
            mixin description()
              p.
                Didot is a serif modern type use for mathematical spans and spans in foreign
                languages. It has a radical thick/thin transition, vertical stress, and
                straight horizontal serifs. With a cold yet elegant look, this font family makes
                long spans of text hard to read, but that&rsquo;s okay because this font is
                used only for short expressions.
          +fontBox(font_scheme.script)
            mixin description()
              p.
                Zapfino is used for very fancy elements such as drop-caps and subheadings.
                Use this font family sparingly.
        section#font-sizes
          h2 Font Sizes
          p.
  