Design styles for apps and websites

Visual style changes how people perceive your product. Here are the most popular styles and a few unexpected ones: what they are, where they came from, where they usually show up, and sample screens in different colors.

Every sample screen was made for this page, so the interface text is in Portuguese. Brands and data are fictional.

The most common

Styles you see every day in apps, software and websites. Proven, easy to adapt to any brand and comfortable to use.

Minimalism

Era: Since the 1950s, on screens since 2010

Minimalism removes everything on screen that does not help people understand or act. You can spot it by the generous white space, a hierarchy made only with type size and weight, thin rules instead of boxes, and a single accent color. It feels calm, clear and refined.

A bit of history

The idea comes from 20th-century architecture and industrial design: "less is more" is associated with Mies van der Rohe, and Dieter Rams summed up his work at Braun as "less, but better". The International Typographic Style, from 1950s Switzerland, brought that grid and type discipline to graphic design, and on screens it took off with the flat design wave of the early 2010s.

How to spot it

  • Lots of white space
  • A single accent color
  • Sans-serif type
  • Thin rules instead of boxes
  • Thin line icons

Where it usually shows up

  • SaaS products and dashboards
  • Design-led online stores
  • Architecture studios
  • Wellness apps
  • Digital banks
Back to the index

Flat design

Era: Since 2010

Flat design strips out everything that imitates physical objects: no bevels, gloss, gradients or drop shadows. What is left are blocks of solid color, simple icons, geometric illustrations and sans-serif type. The result feels light, cheerful and easy to scan, loads fast and adapts well to any screen size.

A bit of history

It took off as a reaction to skeuomorphism, the style that dressed interfaces in leather, wood and paper. Microsoft's Metro design language in Windows Phone 7 (2010) and Windows 8 (2012), followed by Apple's iOS 7 (2013), put the flat look on billions of screens. Its roots go back to the Swiss typographic style and its pursuit of clarity and grids.

How to spot it

  • Solid, saturated colors
  • No shadows or gradients
  • Simple single-color icons
  • Geometric illustrations
  • Sans-serif typography

Where it usually shows up

  • Consumer and delivery apps
  • Admin dashboards
  • Company and course websites
  • Illustrations and infographics
Back to the index

Material Design

Era: Since 2014

Material treats the screen as stacked layers of material, using shadow or tone to show what sits in front. It comes with clearly defined components such as the floating action button, chips, navigation bars and cards, plus Roboto type and its own icon set. It feels organized, predictable and instantly familiar to anyone who uses Android or Google products.

A bit of history

Google introduced it at Google I/O in 2014 around a paper-and-ink metaphor: surfaces with elevation shadows and bold colors such as indigo and pink. In 2021 Material You, the third version (Material 3), arrived with Android 12. It builds the whole palette from a single seed color, rounds corners further and replaces most shadows with tonal shifts.

How to spot it

  • Surfaces separated by elevation or tone
  • Floating action button (FAB)
  • Tonal palette from one seed color
  • Rounded corners and chips
  • Roboto and Material Symbols

Where it usually shows up

  • Android apps
  • Internal tools and dashboards
  • SaaS products
  • Banking and service apps
Back to the index

Glassmorphism

Era: Since 2020

Glassmorphism makes cards, menus and bars look like sheets of frosted glass that let the background color through, blurred. You spot it by the blur behind each panel, the thin light border that mimics a glass edge and the vivid shapes floating underneath. It feels modern, light and premium, adding depth without weight.

A bit of history

Translucent interfaces trace back to Windows Vista's Aero (2007) and gained ground with iOS 7 (2013), Microsoft's Fluent Design (2017) and macOS Big Sur (2020). The name "glassmorphism" was popularized in late 2020 by designer Michał Malewicz, as the effect took over Dribbble. In 2025 Apple pushed the idea further with Liquid Glass.

How to spot it

  • Translucent panels that blur the background
  • Thin, light borders on cards
  • Vivid color shapes behind the glass
  • Generous rounded corners and soft shadows

Where it usually shows up

  • Finance and digital card apps
  • Smart home and IoT dashboards
  • Music players and media apps
  • Travel and hospitality sites
  • Landing pages for tech products
Back to the index

Bento grid

Era: Since 2022

Content is split into self-contained blocks, each holding a single piece of information or action, and block size signals what matters most. Corners are generously rounded, the gaps between blocks stay constant and each block can carry its own color. It feels organized and easy to scan: the whole screen makes sense at a glance.

A bit of history

The name comes from the Japanese bento lunch box and its compartments. Tile-based screens already showed up in Metro, the design language Microsoft used for Windows Phone (2010) and Windows 8 (2012). The bento format took off around 2022, when tech product pages and keynotes started summing up features in grids of blocks, and it quickly became a staple of landing pages and dashboards.

How to spot it

  • Blocks of different sizes in one grid
  • Generously rounded corners
  • Even spacing between blocks
  • One idea per block, with a big number or icon
  • Color used to make key blocks stand out

Where it usually shows up

  • Product and app landing pages
  • Dashboards and admin panels
  • Startups and SaaS products
  • Portfolios and personal pages
  • Stores featuring several products
Back to the index

Neo-brutalism

Era: Since 2020

Neo-brutalism takes the rawness of web brutalism and makes it friendly: saturated color blocks, a black outline on everything and a hard shadow that makes buttons and cards look like paper cutouts stuck to the screen. Type is big and heavy, and touches like tilted stickers add humor. It feels young, direct and confident.

A bit of history

The style took off around 2020 and 2021, when digital products such as Gumroad redesigned their sites with black borders and vivid colors, and it quickly spread through portfolios and design communities. The name nods to the web brutalism of the 2010s, but swaps the raw look for an organized, colorful layout.

How to spot it

  • Thick black outlines
  • Hard offset shadows
  • Flat saturated colors
  • Big, heavy type
  • Sticker-like elements

Where it usually shows up

  • Startups and SaaS products
  • Apps for a young audience
  • Online stores for indie brands
  • Online courses and education
  • Creative portfolios
Back to the index

Aurora gradients

Era: Since 2021

In the aurora style, the background is made of large color blobs that melt into a soft gradient, usually on a dark canvas. Everything else stays restrained: clean type, quiet cards, gradient headlines and small glows on buttons, borders and charts. It feels techy, fresh and a little mysterious while staying easy to read.

A bit of history

Gradients made a strong comeback in the mid-2010s after years of flat design, with Instagram's 2016 icon as a landmark. Around 2021 the blurred-blob look was nicknamed "Aurora UI" in design communities. With the wave of AI products from 2023 on, it became almost the default visual identity of startup websites.

How to spot it

  • Large, blurred color blobs
  • Dark backgrounds with soft glows
  • Gradient-filled headlines
  • Subtle grain over the gradient

Where it usually shows up

  • Artificial intelligence products
  • Startups and SaaS products
  • Digital banks and fintechs
  • Wellness and meditation apps
  • Product launches and tech events
Back to the index

Neumorphism

Era: Since 2020

In neumorphism almost everything shares the background color and stands out only through lighting: a light shadow on one side and a dark one on the other make each element bulge out or sink in, like molded plastic. It feels calm, soft and very clean. Its weak spot is low contrast, so it works best with few elements, strong text and a single accent color for what matters.

A bit of history

The name is short for "new skeuomorphism" and appeared in late 2019, when concepts such as designer Alexander Plyuto's banking app went viral on Dribbble. In 2020 it took over portfolios and concept shots, but accessibility problems kept it out of most real products, where it shows up in details rather than whole screens.

How to spot it

  • Elements match the background color
  • Paired light and dark shadows
  • Controls that bulge out or press in
  • Generous rounded corners
  • A single accent color

Where it usually shows up

  • Smart home controls
  • Music and audio players
  • Personal finance apps
  • Watches and wearables
  • UI concepts and portfolios
Back to the index

Claymorphism

Era: Since 2021

In claymorphism, cards, buttons and icons look sculpted from clay: very round corners, a light inner highlight at the top, an inner shadow at the bottom and a soft colored drop shadow that makes everything float. It usually comes with cute 3D illustrations and a pastel palette. It feels playful, friendly and approachable, without the contrast problems of neumorphism, since each element can have its own color.

A bit of history

The term caught on around 2021 on Dribbble and in design articles, as a more colorful answer to neumorphism and glassmorphism. It rode the wave of 3D illustrations and icons made in tools like Blender, which became cheap to produce and spread across startup sites, kids apps and consumer products.

How to spot it

  • Puffy, very rounded shapes
  • Light and dark inner shadows
  • Soft colored drop shadows
  • Pastel colors
  • Cute 3D icons and illustrations

Where it usually shows up

  • Kids apps and learning platforms
  • Food delivery and consumer apps
  • Fintechs for a young audience
  • Pet shops and everyday services
  • Startup and launch websites
Back to the index

Skeuomorphism

Era: 2007 to 2013

Skeuomorphism copies the look of physical objects so people understand a screen through things they already know: the calendar has a leather cover, the notepad is ruled and the volume is a metal knob. Textures, gloss, shadows and letterpress text make it feel tactile, warm and handcrafted. It takes more art direction and dates quickly when overdone, so today it shows up mostly in products that want nostalgia, luxury or personality.

A bit of history

It was the dominant language of smartphones and personal computers from the iPhone launch in 2007 until 2013, with wooden bookshelves, felt game tables and leather-bound calendars. The iOS 7 redesign in 2013 replaced all of it with flat design and closed that era. The style lives on in music apps, games and brands that want to feel like a collector's item.

How to spot it

  • Leather, wood and metal textures
  • Glossy plastic buttons
  • Letterpress-style text
  • Knobs, dials and gauges
  • Realistic shadows and stitching

Where it usually shows up

  • Music and audio apps
  • Games and kids apps
  • Luxury and artisan brands
  • Tools modeled on real objects
  • Nostalgia-driven projects
Back to the index

The less common

Styles with a strong personality. They work great when a brand wants to be remembered and need extra care with readability and accessibility.

Bauhaus

Era: 1920s

Bauhaus style builds the screen from pure geometric shapes such as circles, squares, triangles and half circles in flat color: red, yellow, blue and black on a light ground. Type is geometric and sans-serif, often all lowercase, and blocks are arranged asymmetrically with heavy rules. It feels creative and handmade, yet rational.

A bit of history

It comes from the Staatliches Bauhaus, the school Walter Gropius founded in Weimar in 1919. It later moved to Dessau (1925) and Berlin, and closed in 1933 under pressure from the Nazi regime. Teachers such as Wassily Kandinsky, Paul Klee, Josef Albers and László Moholy-Nagy brought together art, craft and industry. In 1925 Herbert Bayer designed his lowercase-only universal alphabet, which helped define the movement's typography.

How to spot it

  • Circles, squares and triangles
  • Red, yellow and blue with black
  • Geometric type, often lowercase
  • Asymmetric block composition
  • Heavy rules and square corners

Where it usually shows up

  • Schools, studios and creative courses
  • Theaters, museums and cultural events
  • Design and home decor stores
  • Coffee, music and food brands
Back to the index

Art Deco

Era: 1920s and 1930s

Art Deco brings the geometric elegance of the interwar years to the interface. You can spot it by the symmetrical layouts, sunbursts, stepped arches and fan patterns, double-line frames and gold set against deep colors like black, emerald, midnight blue and burgundy. It feels glamorous, established and exclusive.

A bit of history

The name comes from the International Exhibition of Modern Decorative and Industrial Arts held in Paris in 1925, and the style shaped architecture, posters and objects until the late 1930s. The Chrysler Building in New York (1930) and Christ the Redeemer in Rio de Janeiro (1931) are famous examples. Today it returns in hotel, spirits and fragrance brands that want to signal luxury with a past.

How to spot it

  • Symmetry and a central axis
  • Sunbursts and stepped arches
  • Gold on deep colors
  • Double-line frames
  • Geometric all-caps lettering

Where it usually shows up

  • Hotels and restaurants
  • Perfume and jewelry brands
  • Private banks
  • Cinemas, theaters and events
  • Spirits brands
Back to the index

Swiss Style

Era: 1950s

Swiss Style builds everything on a modular grid and lets typography carry the visuals: large grotesque headlines, flush-left text, black rules and generous white space. It sticks to a few colors, usually black, white and one strong accent such as red, and prefers geometric shapes over ornament. It reads as clear, rigorous and trustworthy, like a serious, well-designed institution.

A bit of history

It emerged in Switzerland in the 1950s at the design schools of Zurich and Basel, led by figures such as Josef Müller-Brockmann, Armin Hofmann and Emil Ruder. The typefaces Helvetica, by Max Miedinger, and Univers, by Adrian Frutiger, both appeared in 1957 and became symbols of the movement. The journal Neue Grafik (1958-1965) carried its ideas worldwide, and the style still underpins wayfinding, corporate identity and interface design.

How to spot it

  • Visible modular grid
  • Grotesque sans-serif at extreme sizes
  • Flush-left, ragged-right text
  • Asymmetric layout with rules
  • Black, white and one strong color

Where it usually shows up

  • Museums and cultural institutions
  • Magazines and editorial sites
  • Wayfinding and transit
  • Design and architecture brands
Back to the index

Editorial

Era: On screens since the 2010s

Editorial design lays out the interface like a magazine spread. You can spot it by the oversized serif headlines, a column grid split by thin rules, drop caps, pull quotes and a strong size contrast between headline and body copy. It feels curated, authored and trustworthy.

A bit of history

The style comes from 20th-century print magazines, where art directors such as Alexey Brodovitch, at Harper's Bazaar from 1934 to 1958, used large type and white space as part of the composition. On the web it grew with the art-directed articles of the early 2010s and with CSS Grid, which reached browsers in 2017 and made magazine layouts much easier to build.

How to spot it

  • Large serif headlines
  • Column grid with rules
  • Drop caps and pull quotes
  • Section labels above headlines
  • Strong contrast in type sizes

Where it usually shows up

  • Magazines and news sites
  • Blogs and newsletters
  • Fashion brands
  • High-end real estate
  • Recipe and culture apps
Back to the index

Retro computing / terminal

Era: 1970s to 1990s

The screen looks like a computer from the 1970s to the 1990s: monospaced text glowing like a CRT phosphor, menus driven by hotkeys, selection bars in inverse video, DOS double-line frames or the black and white windows of early graphical systems. It feels nostalgic, precise and quietly nerdy.

A bit of history

Video terminals of the 1970s, such as DEC's VT100 (1978), displayed text only, and green and amber phosphor monitors stayed common through the 1980s. The 1980s and 1990s brought MS-DOS text-mode programs, dial-up BBSes decorated with colorful ANSI art, and the 1-bit windows of the original Macintosh (1984). Today the look returns in developer tools, indie game sites and brands that want a playful, geeky feel.

How to spot it

  • Monospaced type across the whole screen
  • Phosphor glow and scanlines
  • ASCII art and block-letter banners
  • Hotkey menus and inverse video
  • Limited palettes: green, amber, DOS blue or 1-bit

Where it usually shows up

  • Developer tools and products
  • Coding courses and communities
  • Indie games and gaming sites
  • Portfolios for tech professionals
  • Campaigns with a nostalgic, playful tone
Back to the index

Pixel art (8-bit)

Era: 1980s

Pixel art draws everything with visible little squares: letters, icons, illustrations and even box corners, which become steps. Palettes are short, like on old consoles, and game elements show up in the interface as health bars, experience points, coins and inventories. It feels nostalgic and playful, and the fun works even in serious apps such as finance and to-do lists.

A bit of history

The look was born from the technical limits of late-1970s and 1980s computers and consoles, such as the Atari 2600, the NES and the Game Boy, which had low resolution and few colors. After 3D graphics took over games, the style came back as an artistic choice in indie games from the 2000s and 2010s, and spread to websites, brands and interfaces.

How to spot it

  • Pixel fonts
  • Stepped borders
  • Short color palette
  • Icons drawn pixel by pixel
  • Game elements (XP, coins, health)

Where it usually shows up

  • Games and gaming communities
  • Habit and productivity apps
  • Financial education and gamification
  • Shops and brands with a nostalgic tone
  • Tech campaigns and events
Back to the index

Memphis

Era: 1980s

Memphis mixes circles, triangles, wavy squiggles and dot or stripe patterns in bold colors that would not normally go together. In an interface, these shapes float around the content and help highlight headlines, cards and buttons. It feels playful, daring and full of energy, with a touch of 80s nostalgia.

A bit of history

The name comes from the Memphis Group, a design and architecture collective founded in Milan in 1981 by Ettore Sottsass, which made colorful, provocative furniture and objects that challenged the minimalist good taste of the time. The look defined much of the 80s in fashion, TV and packaging, and came back in interfaces, illustration and brand identities from the 2010s on.

How to spot it

  • Floating geometric shapes
  • Squiggles and zigzags
  • Dot and stripe patterns
  • Vivid, daring color combinations
  • Scattered confetti

Where it usually shows up

  • Festivals and events
  • Kids and entertainment brands
  • Stationery, gift and fashion shops
  • Music and leisure apps
  • Seasonal campaigns
Back to the index

Cyberpunk / neon

Era: 1980s, strong since 2020

It mimics the system screens of sci-fi movies and games: a dark background, neon colors that seem to glow, monitor scanlines and headlines with a glitch effect. Corners are chamfered rather than rounded, data is set in a monospaced font and panels carry HUD corner brackets. It feels technical, fast and a little rebellious.

A bit of history

Cyberpunk was born in 1980s science fiction, with the film Blade Runner (1982) and William Gibson's novel Neuromancer (1984), which pictured rainy night cities covered in signs. The look carried over to anime such as Akira (1988) and Ghost in the Shell (1995), to films like The Matrix (1999) and to video games such as Cyberpunk 2077 (2020), which made the warning-yellow and cyan combo popular. On the web it shows up on gaming, event and tech product sites.

How to spot it

  • Dark background with glowing neon
  • Chamfered corners and HUD frames
  • Glitch effects and scanlines
  • Data in a monospaced font
  • Technical, condensed type

Where it usually shows up

  • Games and esports tournaments
  • Hardware and gaming gear stores
  • Electronic music events
  • Security and infrastructure tools
  • Music and nightlife apps
Back to the index

Y2K

Era: 1997 to 2004, revived since 2020

Y2K is the bright, optimistic look of the late 1990s and early 2000s, when the year 2000 stood for "the future". You spot it by chrome lettering and surfaces, holographic gradients, four-point sparkles, bubbly shapes, perspective grids, pixel details and wide futuristic fonts. It feels playful, bold and nostalgic, with one foot in sci-fi and the other in pop culture.

A bit of history

The name comes from "Y2K", short for the year 2000 and the same label as the famous millennium bug. The aesthetic shaped music videos, magazines, games, websites and gadgets from the late 1990s to the mid-2000s, like the 1998 iMac G3 with its translucent colored plastic. Around 2020 it came back strongly in fashion and on social media, and it has kept showing up in brands, album covers and interfaces since.

How to spot it

  • Chrome lettering and surfaces
  • Holographic, iridescent gradients
  • Four-point sparkles and bubbles
  • Wide, futuristic typefaces
  • Translucent colored plastic

Where it usually shows up

  • Fashion, beauty and accessories
  • Parties, festivals and music events
  • Apps and campaigns for young audiences
  • Artist launches and album covers
  • Brands going for a fun, retro feel
Back to the index

Frutiger Aero

Era: 2004 to 2013

Frutiger Aero is the wet, luminous look that ruled software, phones and websites from the mid-2000s to the early 2010s. You recognize it by blue skies and clouds, grassy hills, droplets and bubbles, gel buttons with a lighter top half, translucent glass, mirrored reflections and clean humanist type. It feels like friendly technology, clean nature and optimism about the future.

A bit of history

The look grew out of Mac OS X's Aqua (2001) and peaked with the Aero theme of Windows Vista (2007) and Windows 7 (2009), along with the phones and music players of the era. It faded around 2012 and 2013, when flat design arrived with Windows 8 and iOS 7. The name "Frutiger Aero", blending the Frutiger typeface with Windows Aero, was coined in 2017 and later spread by online aesthetics communities such as the Consumer Aesthetics Research Institute.

How to spot it

  • Blue skies, clouds, grass and water
  • Gel buttons with a glossy top half
  • Bubbles, droplets and mirrored reflections
  • Translucent glass window frames
  • Colorful, shiny icons

Where it usually shows up

  • Projects with a nostalgic appeal
  • Water, nature and cleaning brands
  • Travel and leisure
  • Games and apps for young audiences
  • Retro-themed campaigns and events
Back to the index

Vaporwave

Era: Since 2010

It deliberately mixes symbols of old-world luxury with outdated computing: marble statues, palm trees and Greek columns next to beveled gray windows, chrome lettering and italic Times New Roman. The palette runs through pink, lilac and cyan gradients, with a striped sun on the horizon and a grid floor in perspective. It feels nostalgic, ironic and dreamy, like an empty shopping mall at dusk.

A bit of history

Vaporwave began as an online music genre around 2010 to 2012, with tracks that slowed down elevator music and commercials from the 1980s and 1990s, as on Macintosh Plus's album Floral Shoppe (2011), whose cover features a classical bust. The visual look spread through Tumblr and forums, recycling graphics from old operating systems, advertising and Japanese text. It later moved into fashion, album art, games and brand campaigns that want a playful retro tone.

How to spot it

  • Pink, lilac and cyan gradients
  • Striped sun and perspective grid floor
  • Classical statues, columns and palm trees
  • Old system windows with beveled edges
  • Chrome lettering, italic Times and katakana

Where it usually shows up

  • Beverage, fashion and youth brands
  • Radio stations, playlists and music apps
  • Summer stores and campaigns
  • Parties, events and album covers
  • Projects with an ironic, nostalgic tone
Back to the index

Brutalism

Era: Since 2014

Web brutalism shows the structure of the page instead of hiding it. Default fonts like Times and Courier, blue underlined links, native browser buttons, thin-bordered tables and huge headlines next to tiny text. The result feels fast, honest and a little uncomfortable, which is exactly why it stands out.

A bit of history

The name comes from Brutalist architecture, which used exposed concrete ("béton brut" in French) from the 1950s onward, with Le Corbusier as a key reference. On the web, the term caught on around 2014 to 2016, when designer Pascal Deville collected examples on the Brutalist Websites site, as a reaction against template-driven, look-alike sites.

How to spot it

  • Default system fonts
  • Blue underlined links
  • Thin-bordered grids and tables
  • Giant headlines and asymmetry
  • Pure colors, no shadows

Where it usually shows up

  • Portfolios for architects and artists
  • Independent magazines and publishers
  • Niche shops and record labels
  • Simple internal tools
  • Cultural event websites
Back to the index

Organic

Era: On screens since the late 2010s

Organic design swaps rigid rectangles for shapes that look hand drawn. You can spot it by the blobs and curves, generous asymmetric corners, wavy section breaks, palettes of soil, leaves and clay, and a subtle paper grain. It feels warm, calm and close to nature.

A bit of history

Design that borrows from nature is an old idea: Frank Lloyd Wright championed "organic architecture" in the early 20th century, and the Museum of Modern Art in New York ran the "Organic Design in Home Furnishings" competition in 1940, won by Charles Eames and Eero Saarinen. On screens it took off in the late 2010s, when fluid shapes, illustration and earthy colors began softening flat, geometric interfaces.

How to spot it

  • Fluid blob shapes
  • Earthy, natural colors
  • Rounded, asymmetric corners
  • Paper grain texture
  • Botanical illustrations

Where it usually shows up

  • Cafés and restaurants
  • Natural cosmetics
  • Wellness, yoga and health
  • Guesthouses and travel
  • Organic food brands
Back to the index

Hand-drawn

Era: Since 2008

In hand-drawn UI, boxes, buttons and icons have uneven outlines, fonts look like real handwriting and the page picks up arrows, underlines, highlighter marks and margin notes. Backgrounds are often ruled paper, grid paper or a chalkboard. It feels personal, warm and playful; the challenge is keeping it easy to read and not setting long passages in script fonts.

A bit of history

The sketch look became familiar in software through Balsamiq Mockups, launched in 2008, which drew wireframes on purpose so they would not look finished. In 2020 Excalidraw made hand-drawn diagrams and whiteboards popular, and the style spread to small brands, education products and creative tools that want to sound human.

How to spot it

  • Wobbly lines and uneven corners
  • Handwritten fonts
  • Arrows, doodles and highlighter
  • Hatched shadows instead of blur
  • Paper or chalkboard backgrounds

Where it usually shows up

  • Artisan and local businesses
  • Education and courses
  • Journaling and habit apps
  • Whiteboard and brainstorming tools
  • Brands with a personal voice
Back to the index

Contact

Like one of these styles?

Tell me which style caught your eye and what you want to build. Email or the form work best, and WhatsApp is open too.

WhatsApp · +55 18 99171-4553

Or leave a message