Afrofuturist Design × Techno-Futurist Graphics

Combine interface graphics and chrome with ancestral pattern so technology feels owned rather than imported.

From the research on Afrofuturist Design

Mix them and make something Afrofuturist Design Techno-Futurist Graphics

A sample layout drawn from the recipe: shapes from Techno-Futurist Graphics, their arrangement from Afrofuturist Design, the finish from Afrofuturist Design. Not a real work, and not an image of either style.

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

Afrofuturist Design Techno-Futurist Graphics

Type from Techno-Futurist Graphics: Grotesque & neo-grotesque
Geometric sans
Colour from Afrofuturist Design: Jewel & metallic
Dark ground
Form from Techno-Futurist Graphics: Pictogram
Emblems & badges
Composition from Afrofuturist Design: Central symmetry
Radial & concentric
Surface from Afrofuturist Design: Chrome & 3D render
Painterly brushwork

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Techno-Futurist Graphics

Signal

Inter Tight, standing in for Helvetica

Text · Afrofuturist Design

A visual language of Black futures that fuses African and diasporic iconography (pyramids and ankhs, Adinkra and Nsibidi glyphs, textile patterning) with spacecraft, cosmic fields and technology. From Sun Ra's Saturn records and Parliament-Funkadelic's comic-book sleeves to the Wakanda of Black Panther, it uses regal central figures, jewel and metallic colour on deep-space grounds, and pattern as technology to imagine liberation beyond history.

Jost; Afrofuturist Design used Wakandan script and Hand-lettered comix titling

The colours

The ground and leading colours come from Afrofuturist Design, with a counter-accent from Techno-Futurist Graphics. The ink reads on the ground at 4.5:1 or more.

Afrofuturist Design Techno-Futurist Graphics

#0b0a1a ground · 36%
#d4a017 ink · 14%
#c2185b accent · 18%
#fff200 accent · 14%
#00a6a6 accent · 10%
#00aeef accent · 8%

As CSS

:root {
  --ground: #0b0a1a;
  --ink: #d4a017;
  --accent-1: #c2185b;
  --accent-2: #fff200;
  --accent-3: #00a6a6;
  --accent-4: #00aeef;
  --font-display: "Inter Tight", sans-serif;
  --font-text: "Jost", sans-serif;
}

Use it with care

Afrofuturist Design: Afrofuturism is a self-authored vision of Black futures that draws on meaning-bearing symbols (Adinkra, Nsibidi, Kemetic and textile motifs) tied to specific peoples. Use glyphs for what they mean rather than as generic 'tribal' texture, and commission, credit or collaborate with Black and African designers.

The two styles

A woman with a star-filled afro, elaborate gold jewelry and purple-and-turquoise robes raises her open hands beneath the gold title “SOLARA.” Planets, flying saucers, celestial symbols and futuristic towers with waterfalls surround her, with a sunlit waterway pictured down the center of her robes.

1970–present · North America, Sub-Saharan Africa, Global / networked Afrofuturist Design A visual language of Black futures that fuses African and diasporic iconography (pyramids and ankhs, Adinkra and Nsibidi glyphs, textile patterning) with spacecraft, cosmic fields and technology. From Sun Ra's Saturn records and Parliament-Funkadelic's comic-book sleeves to the Wakanda of Black Panther, it uses regal central figures, jewel and metallic colour on deep-space grounds, and pattern as technology to imagine liberation beyond history.

A dense futuristic transport poster headed “ORBIT LINK” features a large cyan planet with pink and white orbital rings on a black circular field. Bright geometric icons, a spacecraft silhouette, a world map with routes, technical labels and barcodes fill the surrounding white layout.

1986–2002 · Western Europe, East Asia Techno-Futurist Graphics Electronic-music and video-game graphics of the late 1980s and 1990s that turned corporate modernism into a sci-fi consumer fantasy. Grids, Helvetica, pictograms, barcodes, warning labels and invented corporate logos were recombined with katakana, manga cuteness and early 3D, producing slick, flat, information-saturated surfaces that both celebrated and satirised technology and branding.

More combinations

With Afrofuturist Design

With Techno-Futurist Graphics

Every style combination