Foundations

Progressive enhancement

Progressive enhancement means starting with the most basic unit possible — in our case, plain HTML — and treating everything else as something that might optionally enhance the experience for those who can get it. This way, everything always works, period.

• We start with the cleanest, most semantic HTML that we can write. Semantic HTML makes it easier for other parties to use our markup. Critically, screen readers and other accessibility tools count among those “other parties,” so semantic HTML makes the single biggest difference possible to make our sites accessible.
• If you can load CSS, then you can see a styled page. Very few people should encounter problems with CSS, but if it happens, the page remains usable, even if unstyled.
• Some people will have wider screens. If you do, our CSS can respond to take advantage of that space with a better layout. As one part of this, the typography itself responds to the size of the window, using a technique called responsive typography.
• Most people will successfully download and execute JavaScript, allowing for client-side enhancements, like drag-and-drop file uploads. JavaScript can fail for a long list of reasons. When this happens, you still get a functional page, because our client-side JavaScript only enhances an existing experience.

Colors

Each of these colors also come in 1/6, 1/3, and 2/3 opacity variations (e.g., $red13 gives you $red with 1/3 opacity).

Typography

The Fifth World uses exljbris Font Foundry’s Fontin and Fontin Sans families. We picked free typefaces to reduce the barriers to entry to begin developing your own Fifth World projects. The tall x-height helps make the type readable, and its humanist balance of curves and straight lines speaks to something authentically human without compromising its sense of the future — and so helps embody the spirit of neotribalism.

We look to the proportions and characteristics of Fontin to inform other design elements. For example, the dimensions of the rounded corners on buttons, input fields, and asides come from Fontin’s serifs.

Primary heading

Secondary heading

Tertiary heading

Quaternary heading

Quinary heading

Iconography

Designers often overestimate how clearly icons communicate their meaning, causing confusion and frustration, but the Fifth World invites visitors to explore, rather than complete a task, and for that end the hints provided by icons might prove quite useful. We take our icons from the Noun Project’s Tribal collection, designed by Made × Made.

We show the black versions of each icon below because this page has a white background, but we also have white versions of each icon. Simply replace /black/ in each URL with /white.

Icon	Use
	We use this icon primarily for our favicon — the icon associated with our site in browser bookmarks and other such uses.
	We use this icon for the art section with the label See. The geometric pattern here evokes a rug or tapestry.
	We use this icon for the games section with the label Play. We use a fairly obscure referece here to Hadza gambling traditions (they wager arrows, which assign ownership of game animals killed, rather than the hunter who shot it).
	We use this icon for the map with the label Explore. This representation of a tent could mark a place on a map, but it also speaks to the sort of shelter one might use while exploring.
	We use this icon for the stories section with the label Hear, evoking the tradition of gathering around a fire to hear a story.
	We use this icon to like pages, evoking the idea of giving someone a feather as a token of appreciation.
	When you have already liked a page, the icon switches over to this filled variation to visually indicate that.