Eras

Every era in this library, oldest first. Each is blended from several real sites of its time.

• 

  Desktop grey

  1995 to 2001

  Web pages dressed as the desktop of 1995 to 2001: silver-grey windows with a navy title bar, raised and sunken bevels on every button and field, a small pixel-sized sans, and dialogs, tabs and tree lists borrowed from the operating system.

  Generate Open
• 

  Table-era web

  1996 to 2000

  The first commercial web, 1996 to 2000: narrow fixed pages built from tables, blue underlined links on white or grey, Times and Arial at their default sizes, bevelled form buttons, and flat colour strips where a designer wanted emphasis.

  Generate Open
• 

  Personal home pages

  1996 to 2001

  The amateur web of 1996 to 2001: tiled patterned backgrounds, bright text on black or deep colours, centred everything, big coloured headings, ruled dividers, link lists, visitor counters, guestbooks and web rings, all in the browser default fonts.

  Generate Open
• 

  Y2K futurism

  1999 to 2003

  The turn of the millennium, 1999 to 2003: techno blues and silvers, glassy aqua buttons, tiny pixel-sharp type, thin tech lines and rounded capsule shapes on dark or brushed backgrounds.

  Generate Open
• 

  Early-2000s portals

  2000 to 2004

  Start pages and news portals, 2000 to 2004: dense fixed-width sheets cut into columns of small boxes, solid colour bars with bold white titles, 10 to 13px Arial and Verdana, and almost no empty space.

  Generate Open
• 

  Bulletin-board forums

  2002 to 2007

  Hosted forum software, 2002 to 2007: full-width tables of boards and topics with one-pixel gaps, tinted cells, a dark title bar on every block, and everything set in 10 and 11px Verdana.

  Generate Open
• 

  Weblogs

  2002 to 2007

  Hand-built personal weblogs, 2002 to 2007: a fixed reading column with a link sidebar, small Verdana or Georgia text on white, dotted rules between entries, and one or two muted colours of the author's own.

  Generate Open
• 

  Wiki

  2003 to 2010

  Collaborative reference sites of 2003 to 2010: a narrow column of links at the left, tabs above a white article sheet, blue and red links, grey bordered boxes for contents and facts, small sans text and tables of plain data.

  Generate Open
• 

  Frutiger Aero

  2004 to 2010

  The glossy optimism of 2004 to 2010: sky blue and grass green, glass panels with a bright top highlight, bubbles and soft glows, rounded corners, humanist sans type and reflections under everything.

  Generate Open
• 

  Web 2.0 gloss

  2005 to 2009

  The start-up web, 2005 to 2009: glossy gradient bars and buttons, rounded hairline boxes, friendly lower-case wordmarks, big claims in a pale hero, and badges that say new.

  Generate Open
• 

  Skeuomorphism

  2009 to 2013

  App-era product sites, 2009 to 2013: pages that imitate materials, with linen and paper textures, bevelled glossy keys, inset wells, stitched edges and engraved text.

  Generate Open
• 

  Framework default

  2011 to 2014

  The framework look of 2011 to 2014: a dark or white bar across the top, a big grey hero block, rows of three columns, wells and bordered panels, blue primary and coloured status buttons, Helvetica at 14px.

  Generate Open
• 

  Editorial minimalism

  2012 to 2018

  Reading-first pages of 2012 to 2018: one narrow column of large serif text on white, a thin header, generous white space, hairline rules, a single accent colour and almost no boxes.

  Generate Open
• 

  Flat design

  2013 to 2016

  Product marketing, 2013 to 2016: full-width bands of solid colour, light sans-serif headings, thin one-pixel rules, and no gloss, bevel or drop shadow anywhere.

  Generate Open
• 

  Material Design

  2014 to 2018

  Paper and ink, 2014 to 2018: flat sheets that cast soft shadows, a coloured app bar, uppercase medium-weight buttons, two-pixel corners and one bright accent for the floating action.

  Generate Open
• 

  Web brutalism

  2014 to 2019

  The reaction to polish, 2014 to 2019: raw default-looking pages, system and monospace type, hard black rules, harsh or absent colour, and layouts that show their structure instead of hiding it.

  Generate Open
• 

  Terminal

  2015 to 2026

  The text-terminal look of 2015 to 2026: a monospace face for everything, bright text on a dark screen, boxes and rules drawn with borders like character frames, prompts and cursors, status lines and key hints instead of buttons with chrome.

  Generate Open
• 

  SaaS gradient

  2016 to 2021

  The start-up product page of 2016 to 2021: slanted or curved bands of purple-to-blue gradient, white rounded cards with soft wide shadows, friendly geometric sans, pill buttons and flat illustration blocks.

  Generate Open
• 

  Neumorphism

  2019 to 2021

  Soft UI, 2019 to 2021: controls pressed out of, or into, a single pale surface by a pair of light and dark blurred shadows, with low contrast and very round corners.

  Generate Open
• 

  Dark developer tools

  2019 to 2026

  Developer products of 2019 to 2026: a near-black page, hairline borders in translucent white, small precise sans type, subtle glows and gradients behind a hero, monospace details and one bright accent.

  Generate Open
• 

  Glassmorphism

  2020 to 2026

  Frosted glass, 2020 to 2026: translucent panels with a blurred backdrop, a thin light border and a soft shadow, floating over a colourful gradient.

  Generate Open
• 

  Modern product

  2020 to 2026

  The big-brand product page of 2020 to 2026: very large tight headlines, full-bleed sections that alternate black, white and one saturated colour, generous rounded cards and pill buttons, product shown huge and centred, and motion on scroll: sections that fade and slide in, sticky stories, numbers that reveal.

  Generate Open
• 

  Material You

  2021 to 2026

  The tonal design of 2021 to 2026: every surface a tint of one key colour, large 16 to 28px corners, pill buttons and navigation indicators, filled tonal controls instead of shadows, big friendly type and plenty of space.

  Generate Open
• 

  Neubrutalism

  2021 to 2026

  Loud and flat, 2021 to 2026: thick black outlines, hard offset shadows with no blur, saturated colour blocks and bold type.

  Generate Open
• 

  Bento grids

  2022 to 2026

  Feature grids, 2022 to 2026: rounded cells of unequal size, each holding one idea, packed into a tight grid on a dark or very pale page.

  Generate Open