LineBadge

Example#

Usage#

Use a line badge wherever something belongs to a line of work: an eyebrow, a card head, a tag, a table row. It is the meaning unit (D-C2): the line's ink, its letter and its shape together, so it reads in any colour vision and in print.

• Lines. websites (K, circle), growth (R, triangle), software (A, bars), custom-apps (M, diamond) and maxos (the wood with "//").
• Sizes. 16 px prints the shape alone, 24 px an 18 px letter, 32 and 48 px the letter and the shape (DF-39, D-N146).
• Names. Standalone it is named by the line; beside the line's name in text, pass decorative so it is not read twice.

Anatomy#

Volume#

Reading layer: the badge is identical at every volume, in the colourway's inks.

• Quiet

  K R A //

  Docs, forms, legal and long reads. Flat inks, no art in motion.

• Studio

  K R A //

  The site default. Art on its own plates, one display moment per view.

• Press

  K R A //

  Hero moments, covers and campaigns. Halftone fields and the second ink.

• Rave

  K R A //

  Launches, posters and the 404. Every ink, and the words still win.

Content#

• Next to a badge, write the line's name exactly: Websites, Growth, Software, Custom apps.

Do and don't#

Accessibility#

• Standalone it is named by its line; beside the visible name pass decorative.
• Ink, letter and glyph together: meaning never by colour alone (D-C2).
• Letters follow APCA: the 16 px badge prints its shape glyph alone (a letter there would be 9 px, under the 14 px floor), the 24 px badge an 18 px letter, and the 32 and 48 px badges the letter with the glyph in the corner. Anybody at 850 needs 18 px before APCA allows it for words (DF-39).

Props#

Tokens#

Changelog#