# Design Atlas by H190K: complete catalog

> 49 website design languages, each with a full landing-page mockup in light and dark themes, by Hasan Albehadili (H190K, https://h190k.com).

## About this site

Design Atlas by H190K helps businesses and individuals choose the visual style of their next website. Hasan Albehadili (H190K) is a web developer who builds websites for companies such as banks, oil and gas companies, digital wallets, corporate groups and startups. Clients browse the mockups, compare light and dark themes, and send the design they like through the contact form at https://designatlas.h190k.com/contact/. Visitors can also describe their own design idea and attach a file of up to 25 MB.

Important: these are concept mockups, not final designs. All brands, people and figures inside them are fictional and exist only to demonstrate each design language. Icons, illustrations, charts and small details are quick placeholders produced with the help of AI tools and may look imperfect. A client's final website is designed from scratch around their brand, content and goals (new colours, icons, imagery and layouts), handcrafted and approved by the client before it is built.

## How to choose

- Banks, insurers, investment firms and digital wallets: see the Banking & Finance family (Retail Bank, Investment Banking, Islamic Banking, Digital Wallet, Insurance), plus Corporate Classic and Enterprise SaaS.
- Oil and gas, utilities, engineering and logistics companies: see the Energy & Industry family (Oil & Gas, Renewables & Utilities, Engineering & Construction, Logistics & Shipping), plus Holding Group.
- Corporate groups, consultancies, telecoms and public institutions: see the Corporate & Enterprise family.
- Startups, products and premium brands: see the Product & Brand family (Modern Startup, Bento Grid, Creative Agency, Luxury).
- Creative, personal or experimental brands: explore the stylistic families such as Minimalism, Glassmorphism, Neo-Brutalism, Retro and Organic styles.

## 01 Corporate & Enterprise

Trustworthy, structured websites for established companies, groups and institutions.

### Corporate Classic

> Navy, serif and quiet authority.

- **Family:** 01 Corporate & Enterprise (professional, business-ready)
- **Also known as:** Traditional Professional
- **Era:** Timeless
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/corporate-classic/
- **Light preview:** https://designatlas.h190k.com/previews/corporate-classic-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/corporate-classic-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=corporate-classic

The classic corporate look signals stability and expertise: navy and gold, serif headlines, structured grids, partner portraits, credentials and measured copy. Every choice is there to build trust.

**Key traits:** Navy, white and gold palette; Serif headlines; Structured, symmetrical grid; Credentials and figures; Formal tone.

**Works well for:** Law and accounting firms; Wealth management; Consultancies.

**Example in the mockup:** Sterling & Hale, a wealth management and advisory firm (a fictional brand).

### Enterprise SaaS

> Clear, credible, built to convert.

- **Family:** 01 Corporate & Enterprise (professional, business-ready)
- **Also known as:** B2B Corporate
- **Era:** 2015 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/enterprise-saas/
- **Light preview:** https://designatlas.h190k.com/previews/enterprise-saas-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/enterprise-saas-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=enterprise-saas

Enterprise SaaS sites balance clarity with credibility: crisp sans-serif type, a confident blue, product screenshots, logo walls, security badges and clear calls to book a demo. The layout guides buyers through value, proof and pricing.

**Key traits:** Product UI screenshots; Customer logo walls; Security and compliance badges; Clear feature grids; Demo-focused CTAs.

**Works well for:** B2B software; Data and analytics platforms; Developer infrastructure.

**Example in the mockup:** Stackwise, a data platform for operations teams (a fictional brand).

### Clean Healthcare

> Calm, caring and clinically clear.

- **Family:** 01 Corporate & Enterprise (professional, business-ready)
- **Also known as:** Medical Corporate
- **Era:** 2015 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/healthcare-corporate/
- **Light preview:** https://designatlas.h190k.com/previews/healthcare-corporate-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/healthcare-corporate-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=healthcare-corporate

Healthcare corporate design is calm and reassuring: soft teals and blues, lots of white space, rounded friendly shapes, warm photography and very clear paths to booking. Accessibility and readability come first.

**Key traits:** Soft teal and blue palette; Rounded, gentle shapes; Clear booking CTAs; Doctor and service cards; High readability.

**Works well for:** Clinics and hospitals; Health tech; Insurance and wellness.

**Example in the mockup:** Clarity Health, a network of family health clinics (a fictional brand).

### Government & Institutional

> Plain, accessible, task-first.

- **Family:** 01 Corporate & Enterprise (professional, business-ready)
- **Also known as:** Public Service, Accessible-first
- **Era:** 2012 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/government/
- **Light preview:** https://designatlas.h190k.com/previews/government-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/government-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=government

Institutional design puts the citizen’s task first: plain language, large readable type, strong focus states, high contrast and simple layouts that work for everyone. It favours clarity over decoration.

**Key traits:** Plain, readable type; High contrast; Prominent search and tasks; Clear breadcrumbs and alerts; Accessible components.

**Works well for:** Government and city services; Universities and NGOs; Utilities and public bodies.

**Example in the mockup:** Northvale City Services, the online services portal of a fictional city (a fictional brand).

### Holding Group

> One group, many sectors, total composure.

- **Family:** 01 Corporate & Enterprise (professional, business-ready)
- **Also known as:** Conglomerate, Group Corporate
- **Era:** Timeless
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/holding-group/
- **Light preview:** https://designatlas.h190k.com/previews/holding-group-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/holding-group-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=holding-group

The holding-group look presents a diversified company with calm authority: a strong group identity, a clear sector portfolio, headline figures, leadership, governance and investor information. It balances heritage with modern ambition and works for family groups and listed conglomerates alike.

**Key traits:** Sector portfolio grid; Group figures and milestones; Governance and investor links; Refined deep-green or navy palette; Architectural, premium imagery.

**Works well for:** Family and investment holdings; Diversified conglomerates; Sovereign and regional groups.

**Example in the mockup:** Orvanta Group, a diversified holding group active in energy, real estate, logistics and hospitality (a fictional brand).

### Management Consulting

> Insight-led, editorial and precise.

- **Family:** 01 Corporate & Enterprise (professional, business-ready)
- **Also known as:** Professional Services, Advisory
- **Era:** 2015 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/consulting/
- **Light preview:** https://designatlas.h190k.com/previews/consulting-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/consulting-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=consulting

Consulting sites sell thinking. They combine editorial typography, sharp data visuals, industry and capability navigation, featured research and case outcomes. The result feels intelligent, global and senior-level.

**Key traits:** Editorial serif and sans pairing; Insights and research features; Industry and capability navigation; Data-led case outcomes; Restrained, confident colour.

**Works well for:** Consulting and advisory firms; Audit and tax practices; Think tanks and research groups.

**Example in the mockup:** Harrow & Pike, a global management consulting firm (a fictional brand).

### Telecom & Connectivity

> Bright, energetic and plan-focused.

- **Family:** 01 Corporate & Enterprise (professional, business-ready)
- **Also known as:** Telco Corporate
- **Era:** 2015 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/telecom/
- **Light preview:** https://designatlas.h190k.com/previews/telecom-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/telecom-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=telecom

Telecom design mixes consumer energy with corporate reach: vivid brand colour, plan comparison cards, device offers, coverage maps, business solutions and a strong app presence. It has to sell to individuals and enterprises on the same page.

**Key traits:** Vivid brand colour; Plan and bundle cards; Coverage and network visuals; Personal and business split; App and device promotions.

**Works well for:** Mobile and broadband operators; Internet service providers; Connectivity and IoT companies.

**Example in the mockup:** Nexalink, a mobile, fibre and enterprise connectivity operator (a fictional brand).

## 02 Banking & Finance

Secure, credible designs for banks, investment firms, insurers and digital wallets.

### Retail Bank

> Clear products, real rates, total trust.

- **Family:** 02 Banking & Finance (professional, business-ready)
- **Also known as:** Consumer and Business Banking
- **Era:** 2016 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/retail-bank/
- **Light preview:** https://designatlas.h190k.com/previews/retail-bank-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/retail-bank-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=retail-bank

Modern retail banking design is clear, warm and secure. Product navigation for accounts, cards, loans and mortgages sits beside live-looking rates, calculators, a strong mobile app story and visible security signals. Everything is built to reassure and convert.

**Key traits:** Product-led navigation; Rates and calculator widgets; Mobile banking app showcase; Security and regulation cues; Calm, confident brand colour.

**Works well for:** Retail and commercial banks; Credit unions; Lending and mortgage providers.

**Example in the mockup:** Northbridge Bank, a retail and business bank with branches and a mobile app (a fictional brand).

### Investment Banking

> Data-dense, discreet and institutional.

- **Family:** 02 Banking & Finance (professional, business-ready)
- **Also known as:** Capital Markets, Asset Management
- **Era:** 2010s to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/investment-bank/
- **Light preview:** https://designatlas.h190k.com/previews/investment-bank-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/investment-bank-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=investment-bank

Investment and capital-markets design is serious and data-rich: market tickers, deal tombstones, research, performance figures and a restrained palette of deep slate with a single precise accent. It speaks to institutional investors and corporate clients.

**Key traits:** Market data and tickers; Deal tombstones and league tables; Research and insights; Deep slate with precise accent; Dense but orderly grids.

**Works well for:** Investment banks; Asset and fund managers; Brokerages and exchanges.

**Example in the mockup:** Aldermoor Capital, an investment bank and asset manager (a fictional brand).

### Islamic Banking

> Geometric heritage, modern finance.

- **Family:** 02 Banking & Finance (professional, business-ready)
- **Also known as:** Sharia-compliant Finance
- **Era:** 2010s to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/islamic-banking/
- **Light preview:** https://designatlas.h190k.com/previews/islamic-banking-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/islamic-banking-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=islamic-banking

Islamic banking design pairs modern digital banking with heritage: refined geometric patterns, arch motifs, emerald and gold palettes and clear explanations of Sharia-compliant products. It feels ethical, premium and rooted in the region.

**Key traits:** Islamic geometric patterns; Arch and lattice motifs; Emerald, sand and gold palette; Sharia-compliant product cards; Premium, ethical tone.

**Works well for:** Islamic banks and windows; Takaful insurers; Ethical investment firms.

**Example in the mockup:** Rawda Islamic Bank, a Sharia-compliant retail and corporate bank (a fictional brand).

### Digital Wallet

> Mobile-first money, made delightful.

- **Family:** 02 Banking & Finance (professional, business-ready)
- **Also known as:** Neobank, Fintech App
- **Era:** 2018 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/digital-wallet/
- **Light preview:** https://designatlas.h190k.com/previews/digital-wallet-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/digital-wallet-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=digital-wallet

Digital wallet design is mobile-first and confident: big phone mockups, instant transfers, cards in hand, QR payments, spending insights and friendly microcopy, all wrapped in strong security messaging. It needs to feel fast, modern and safe.

**Key traits:** Phone UI as the hero; Card and QR payment visuals; Instant transfer and insights; Bold, vibrant accent colour; Security and licence badges.

**Works well for:** Digital wallets and neobanks; Payment apps; Remittance and fintech startups.

**Example in the mockup:** Pocketa, a digital wallet for payments, transfers and saving (a fictional brand).

### Insurance

> Reassuring, simple, human.

- **Family:** 02 Banking & Finance (professional, business-ready)
- **Also known as:** Protection and Cover
- **Era:** 2015 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/insurance/
- **Light preview:** https://designatlas.h190k.com/previews/insurance-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/insurance-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=insurance

Insurance design turns complex cover into something simple and human: friendly product tiles, quote starters, claims steps, ratings and reassuring language. It keeps a professional backbone while feeling approachable.

**Key traits:** Product tiles with icons; Quote-start widget; Simple claims steps; Ratings and trust signals; Warm, reassuring palette.

**Works well for:** Insurers and takaful providers; Brokers and comparison services; Benefits providers.

**Example in the mockup:** Shieldcrest, a home, motor, health and business insurer (a fictional brand).

## 03 Energy & Industry

Confident, data-rich designs for oil and gas, utilities, engineering and logistics.

### Oil & Gas

> Industrial scale, safety-first precision.

- **Family:** 03 Energy & Industry (professional, business-ready)
- **Also known as:** Energy Major, Upstream to Downstream
- **Era:** 2010s to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/oil-gas/
- **Light preview:** https://designatlas.h190k.com/previews/oil-gas-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/oil-gas-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=oil-gas

Energy-major design communicates scale, safety and responsibility: wide industrial imagery, operations maps, production and safety figures, the value chain from upstream to downstream, sustainability commitments and investor information. It is bold, technical and deeply trustworthy.

**Key traits:** Industrial hero imagery; Operations map and assets; Production and safety KPIs; Value-chain storytelling; Sustainability and investor sections.

**Works well for:** Oil and gas companies; National energy companies; Petrochemical and refining groups.

**Example in the mockup:** Arcline Energy, an integrated oil and gas company with upstream, midstream and downstream operations (a fictional brand).

### Renewables & Utilities

> Clean, optimistic and data-driven.

- **Family:** 03 Energy & Industry (professional, business-ready)
- **Also known as:** Clean Energy, Power and Water
- **Era:** 2015 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/renewable-energy/
- **Light preview:** https://designatlas.h190k.com/previews/renewable-energy-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/renewable-energy-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=renewable-energy

Renewables and utilities design is bright and forward-looking: clean energy imagery, live-feeling generation dashboards, project maps, customer service for homes and businesses, and transparent sustainability data.

**Key traits:** Clean, optimistic palette; Generation and impact dashboards; Project portfolio maps; Home and business service paths; Transparent ESG data.

**Works well for:** Utilities and power companies; Solar and wind developers; Water and grid operators.

**Example in the mockup:** Solvane Power, a renewable power producer and electricity utility (a fictional brand).

### Engineering & Construction

> Built on precision, delivered at scale.

- **Family:** 03 Energy & Industry (professional, business-ready)
- **Also known as:** EPC, Infrastructure
- **Era:** 2010s to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/engineering-construction/
- **Light preview:** https://designatlas.h190k.com/previews/engineering-construction-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/engineering-construction-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=engineering-construction

Engineering and construction design is structural and confident: blueprint grids, project showcases, capabilities across sectors, safety records, certifications and global footprint. Strong type and technical details show competence.

**Key traits:** Blueprint grids and line drawings; Flagship project showcases; Sector capabilities; Safety records and certifications; Strong yellow or steel accent.

**Works well for:** EPC contractors; Infrastructure and civil engineering; Industrial services firms.

**Example in the mockup:** Corvel Engineering, an engineering, procurement and construction contractor (a fictional brand).

### Logistics & Shipping

> Global reach, real-time control.

- **Family:** 03 Energy & Industry (professional, business-ready)
- **Also known as:** Supply Chain, Ports and Freight
- **Era:** 2015 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/logistics/
- **Light preview:** https://designatlas.h190k.com/previews/logistics-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/logistics-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=logistics

Logistics design is about movement and control: shipment tracking, route maps, port and fleet figures, service lines from ocean to last mile, and industry solutions. It feels global, efficient and always on.

**Key traits:** Tracking widget in the hero; Global route maps; Fleet and port statistics; Service-line navigation; Bold navy and signal accent.

**Works well for:** Shipping and freight companies; Ports and terminals; Supply chain providers.

**Example in the mockup:** Tidewell Logistics, a global ports, shipping and freight logistics company (a fictional brand).

## 04 Product & Brand

Polished launch and brand sites for startups, products, studios and premium labels.

### Modern Startup

> Vibrant gradients and polished product shots.

- **Family:** 04 Product & Brand (professional, business-ready)
- **Also known as:** Gradient SaaS
- **Era:** 2018 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/modern-saas/
- **Light preview:** https://designatlas.h190k.com/previews/modern-saas-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/modern-saas-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=modern-saas

The modern startup look pairs crisp layouts with vibrant gradients, glowing product mockups, animated-feeling sections and confident headlines. It feels fast, ambitious and premium while staying business-ready.

**Key traits:** Vivid gradient accents; Floating product mockups; Pill badges and tags; Big bold headlines; Soft glows and grids.

**Works well for:** AI and developer startups; Fintech and payments; Product launches.

**Example in the mockup:** Flowbase, an AI workflow automation startup (a fictional brand).

### Bento Grid

> Neat tiles of varied size.

- **Family:** 04 Product & Brand (professional, business-ready)
- **Also known as:** Bento Box Layout
- **Era:** 2022 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/bento-grid/
- **Light preview:** https://designatlas.h190k.com/previews/bento-grid-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/bento-grid-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=bento-grid

Bento layouts arrange content into tidy rounded tiles of different sizes, like a Japanese lunch box. Each tile tells one story, a stat, a feature or an image, so complex products become easy to scan.

**Key traits:** Modular rounded tiles; Varied tile sizes; One idea per tile; Product renders and stats; Clean sans-serif type.

**Works well for:** Hardware and product launches; Feature overviews; Portfolio summaries.

**Example in the mockup:** Nova One, a fictional pair of wireless earbuds (a fictional brand).

### Creative Agency

> Big statements, bold case studies.

- **Family:** 04 Product & Brand (professional, business-ready)
- **Also known as:** Studio Portfolio
- **Era:** 2016 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/agency-studio/
- **Light preview:** https://designatlas.h190k.com/previews/agency-studio-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/agency-studio-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=agency-studio

Creative agency sites are confident and showy: huge statement headlines, full-bleed case-study tiles, marquee client lists, playful cursors and a strong point of view. They sell taste as much as services.

**Key traits:** Huge statement type; Full-bleed case studies; Marquee client lists; Numbered services; Strong black and white base.

**Works well for:** Design and branding agencies; Production studios; Freelance portfolios.

**Example in the mockup:** Atelier Nord, a brand and digital design studio (a fictional brand).

### Luxury

> Black, gold and slow, elegant serif.

- **Family:** 04 Product & Brand (professional, business-ready)
- **Also known as:** Premium, High-end
- **Era:** Timeless
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/luxury/
- **Light preview:** https://designatlas.h190k.com/previews/luxury-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/luxury-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=luxury

Luxury design whispers rather than shouts: deep blacks or creams, fine gold lines, high-contrast serif type with wide tracking, large still imagery and a slow, deliberate pace. Scarcity and craftsmanship are the message.

**Key traits:** Black, cream and gold; High-contrast serif type; Wide letter-spacing; Thin rules and frames; Slow, spacious pacing.

**Works well for:** Jewellery and watches; Fashion houses; Hotels and fine dining.

**Example in the mockup:** Maison Aurelle, a fine watchmaking house (a fictional brand).

## 05 Minimal & Typographic

Restraint, whitespace and type doing nearly all of the work.

### Minimalism

> Only what matters, with room to breathe.

- **Family:** 05 Minimal & Typographic
- **Also known as:** Less is More
- **Era:** Timeless
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/minimalism/
- **Light preview:** https://designatlas.h190k.com/previews/minimalism-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/minimalism-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=minimalism

Minimalism keeps only what is essential: generous whitespace, a tight palette, restrained type and a few carefully placed images. Every element has to earn its place, which makes the content and product feel precious.

**Key traits:** Generous whitespace; Monochrome or tiny palette; Few, large images; Restrained typography; Clear single focus.

**Works well for:** Premium product shops; Architecture and design studios; Personal brands.

**Example in the mockup:** Still Ceramics, a small studio selling handmade ceramics (a fictional brand).

### Swiss Style

> Grids, Helvetica-like type and red.

- **Family:** 05 Minimal & Typographic
- **Also known as:** International Typographic Style
- **Era:** 1950s, still influential
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/swiss-style/
- **Light preview:** https://designatlas.h190k.com/previews/swiss-style-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/swiss-style-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=swiss-style

The Swiss style is built on strict modular grids, asymmetric layouts, objective sans-serif type and bold use of a single accent colour. It values clarity and order, and still underpins most modern interface design.

**Key traits:** Strict modular grid; Neo-grotesque sans-serif; Flush-left, ragged-right text; Bold red accent; Asymmetric balance.

**Works well for:** Design conferences and events; Museums and cultural venues; Information-heavy sites.

**Example in the mockup:** Raster Conference, an annual graphic design conference in Zurich (a fictional brand).

### Editorial

> Print-magazine elegance for the web.

- **Family:** 05 Minimal & Typographic
- **Also known as:** Magazine Layout
- **Era:** Print heritage, web 2010s+
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/editorial/
- **Light preview:** https://designatlas.h190k.com/previews/editorial-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/editorial-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=editorial

Editorial design brings the craft of print magazines online: expressive serif headlines, multi-column layouts, drop caps, pull quotes and strong photography. It is made for long reads and storytelling brands.

**Key traits:** Expressive serif headlines; Multi-column grids; Drop caps and pull quotes; Rules and bylines; Large photography.

**Works well for:** Magazines and journals; Content-led brands; Long-form storytelling.

**Example in the mockup:** The Meridian, an independent long-form culture magazine (a fictional brand).

### Japandi

> Warm, natural, quietly crafted.

- **Family:** 05 Minimal & Typographic
- **Also known as:** Japanese-Scandinavian, Wabi-sabi
- **Era:** 2018 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/japandi/
- **Light preview:** https://designatlas.h190k.com/previews/japandi-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/japandi-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=japandi

Japandi blends Japanese calm with Scandinavian warmth: muted earthy tones, natural textures, soft serif type and asymmetric balance. It feels serene and handmade without being cold.

**Key traits:** Earthy neutral palette; Natural textures (wood, linen); Soft serif type; Asymmetric, airy layouts; Subtle hand-made details.

**Works well for:** Furniture and interiors; Tea, wellness and spa; Boutique hospitality.

**Example in the mockup:** Hinoki & Oak, a furniture maker working in solid wood (a fictional brand).

### Big Typography

> Letters as the main visual.

- **Family:** 05 Minimal & Typographic
- **Also known as:** Type-led, Kinetic Type
- **Era:** 2016 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/typographic/
- **Light preview:** https://designatlas.h190k.com/previews/typographic-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/typographic-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=typographic

In type-led design, oversized letterforms carry the whole layout. Giant headlines, tight tracking, outlined and mixed-weight words and marquee text replace imagery, creating a confident, striking look.

**Key traits:** Massive display headlines; Mixed weights and outlines; Scrolling marquees; Very limited colour; Type as image.

**Works well for:** Type foundries and agencies; Fashion and culture; Bold personal brands.

**Example in the mockup:** LOUD Type Co., an independent type foundry (a fictional brand).

## 06 Depth & Material

Light, shadow, glass and texture that make interfaces feel physical.

### Skeuomorphism

> Real-world materials, rendered on screen.

- **Family:** 06 Depth & Material
- **Also known as:** Realism UI
- **Era:** 2007–2013, revived 2020s
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/skeuomorphism/
- **Light preview:** https://designatlas.h190k.com/previews/skeuomorphism-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/skeuomorphism-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=skeuomorphism

Skeuomorphism imitates physical objects: leather, brushed metal, wood, paper and glossy buttons with realistic lighting. It makes digital tools feel familiar and tactile, and has seen a revival in premium, nostalgic products.

**Key traits:** Realistic textures; Bevels, gloss and stitching; Physical controls (knobs, switches); Directional lighting; Rich drop shadows.

**Works well for:** Audio and music apps; Premium consumer gadgets; Nostalgic or crafted brands.

**Example in the mockup:** Analog Studio, a vintage-inspired recording and mixing app (a fictional brand).

### Neumorphism

> Soft, extruded shapes from a single surface.

- **Family:** 06 Depth & Material
- **Also known as:** Soft UI
- **Era:** 2019 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/neumorphism/
- **Light preview:** https://designatlas.h190k.com/previews/neumorphism-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/neumorphism-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=neumorphism

Neumorphism shapes every element out of the background itself, using a pair of light and dark shadows so controls look gently pressed in or pushed out. It is calm and sculptural, and works best with restrained colour and clear focus states.

**Key traits:** Same-colour background and elements; Dual soft shadows; Inset pressed states; Rounded, pill shapes; Muted, low-contrast palette.

**Works well for:** Smart home and IoT apps; Wellness tools; Device control panels.

**Example in the mockup:** Haven Home, a smart-home controller for lights, climate and security (a fictional brand).

### Claymorphism

> Puffy, inflated, toy-like 3D.

- **Family:** 06 Depth & Material
- **Also known as:** Clay UI
- **Era:** 2021 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/claymorphism/
- **Light preview:** https://designatlas.h190k.com/previews/claymorphism-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/claymorphism-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=claymorphism

Claymorphism makes elements look like soft modelling clay: big rounded corners, pastel fills, an outer shadow and two inner shadows that give a puffy, inflated volume. It feels friendly, tactile and fun.

**Key traits:** Very large border radius; Inner and outer shadows; Pastel, candy colours; 3D clay-style illustrations; Rounded, friendly type.

**Works well for:** Kids and education apps; Games and rewards; Friendly consumer apps.

**Example in the mockup:** Doodlebox, a playful learning app for kids aged 6–12 (a fictional brand).

### Glassmorphism

> Frosted panels floating over colour.

- **Family:** 06 Depth & Material
- **Also known as:** Frosted Glass UI
- **Era:** 2020 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/glassmorphism/
- **Light preview:** https://designatlas.h190k.com/previews/glassmorphism-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/glassmorphism-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=glassmorphism

Glassmorphism stacks translucent, blurred panels over vivid backgrounds so content looks like frosted glass. Thin light borders and subtle highlights separate layers while the colour behind keeps the interface lively.

**Key traits:** Background blur (backdrop-filter); Semi-transparent panels; Thin light borders; Vivid gradient blobs behind; Layered depth.

**Works well for:** Finance and crypto dashboards; Weather and travel apps; Modern OS-style interfaces.

**Example in the mockup:** Lumen, a personal finance and budgeting app (a fictional brand).

### Liquid Glass

> Fluid, refractive glass with specular light.

- **Family:** 06 Depth & Material
- **Also known as:** Refractive Glass
- **Era:** 2025 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/liquid-glass/
- **Light preview:** https://designatlas.h190k.com/previews/liquid-glass-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/liquid-glass-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=liquid-glass

Liquid Glass goes beyond frosted panels: controls behave like thick, curved glass that bends and reflects what is behind it, with bright specular edges and fluid pill shapes. It feels premium, dynamic and spatial.

**Key traits:** Refraction and edge highlights; Pill-shaped floating controls; Content-aware tinting; Rich photography behind; Fluid rounded geometry.

**Works well for:** Media and streaming apps; Premium hardware brands; Modern mobile products.

**Example in the mockup:** Halo, a spatial music streaming app (a fictional brand).

### Material Design

> Systematic, tonal, adaptive.

- **Family:** 06 Depth & Material
- **Also known as:** Material You, Material 3
- **Era:** 2014 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/material-design/
- **Light preview:** https://designatlas.h190k.com/previews/material-design-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/material-design-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=material-design

Material Design is a complete design system built on tonal colour palettes, elevation, clear motion and consistent components. Its latest version, Material 3, adds personal dynamic colour, larger shapes and expressive type.

**Key traits:** Tonal colour roles; Elevation through tone; Rounded containers and FABs; Consistent component set; Roboto-style type scale.

**Works well for:** Android and cross-platform apps; Productivity tools; Large product ecosystems.

**Example in the mockup:** Pebble Notes, a notes and to-do app that syncs everywhere (a fictional brand).

### Flat Design

> Solid colour, simple shapes, zero gloss.

- **Family:** 06 Depth & Material
- **Also known as:** Flat 2.0
- **Era:** 2012 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/flat-design/
- **Light preview:** https://designatlas.h190k.com/previews/flat-design-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/flat-design-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=flat-design

Flat design strips away gradients, textures and shadows in favour of solid colour blocks, simple geometric icons and crisp type. Flat 2.0 adds just enough subtle depth to keep things usable while staying clean and fast.

**Key traits:** Solid colour blocks; Simple geometric icons; Minimal or no shadows; Bright, friendly palette; Clear hierarchy.

**Works well for:** SaaS and fintech; Mobile apps; Infographic-heavy sites.

**Example in the mockup:** Tally, invoicing and bookkeeping for freelancers (a fictional brand).

## 07 Futuristic & Tech

Glow, gradients and precision for products that live on the frontier.

### Cyberpunk

> Neon, glitch and angular HUDs.

- **Family:** 07 Futuristic & Tech
- **Also known as:** Neon Noir, Glitch
- **Era:** 1980s fiction, 2020s web
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/cyberpunk/
- **Light preview:** https://designatlas.h190k.com/previews/cyberpunk-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/cyberpunk-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=cyberpunk

Cyberpunk design mixes dystopian grit with neon: acid yellow and cyan on near-black, angular clipped panels, glitch effects, HUD readouts and technical labels. It feels dangerous, fast and high-tech.

**Key traits:** Neon on near-black; Clipped, angular panels; Glitch and scanline effects; HUD data readouts; Technical microcopy.

**Works well for:** Games and esports; Hardware and gadgets; Tech events.

**Example in the mockup:** SYNAPSE//CORE, a fictional neural-interface hardware company (a fictional brand).

### Aurora Gradient

> Soft glowing colour fields.

- **Family:** 07 Futuristic & Tech
- **Also known as:** Mesh Gradient, Glow UI
- **Era:** 2021 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/aurora-gradient/
- **Light preview:** https://designatlas.h190k.com/previews/aurora-gradient-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/aurora-gradient-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=aurora-gradient

Aurora design uses blurry, flowing mesh gradients that glow like the northern lights behind clean interfaces. Paired with crisp type and subtle grain, it feels futuristic, soft and intelligent, ideal for AI products.

**Key traits:** Blurred mesh gradients; Glowing light leaks; Subtle grain texture; Clean minimal UI on top; Dark-mode friendly.

**Works well for:** AI products; Web3 and fintech; Product launches.

**Example in the mockup:** Aurora AI, an AI research assistant (a fictional brand).

### Dark Tech

> Precise, fast, quietly glowing.

- **Family:** 07 Futuristic & Tech
- **Also known as:** Developer Precision, Linear-style
- **Era:** 2020 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/dark-tech/
- **Light preview:** https://designatlas.h190k.com/previews/dark-tech-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/dark-tech-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=dark-tech

Dark tech design is the look of modern developer tools: near-black canvases, crisp hairline borders, subtle gradients on edges, tight sans-serif type, keyboard shortcuts and product UI as the hero. Fast, precise and premium.

**Key traits:** Near-black canvas; Hairline borders and glows; Product UI as hero; Keyboard shortcut hints; Tight, small type.

**Works well for:** Developer tools; Productivity software; Engineering-focused brands.

**Example in the mockup:** Vector, an issue tracker for software teams (a fictional brand).

## 08 Retro & Historical

Movements and eras from the 1920s through the early web, reimagined.

### Bauhaus

> Primary colours and pure geometry.

- **Family:** 08 Retro & Historical
- **Also known as:** Bauhaus Modernism
- **Era:** 1919–1933, revived
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/bauhaus/
- **Light preview:** https://designatlas.h190k.com/previews/bauhaus-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/bauhaus-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=bauhaus

Inspired by the 1920s German school, Bauhaus design uses circles, squares and triangles, primary red, yellow and blue, bold sans-serif type and asymmetric compositions. Form follows function, with a strong graphic voice.

**Key traits:** Primary colours plus black; Circles, squares, triangles; Geometric sans-serif; Asymmetric composition; Bold rules and blocks.

**Works well for:** Art schools and galleries; Design-led products; Cultural events.

**Example in the mockup:** Form Schule, a design school offering short courses (a fictional brand).

### Art Deco

> Gilded geometry from the Jazz Age.

- **Family:** 08 Retro & Historical
- **Also known as:** Deco, Gatsby Style
- **Era:** 1920s–1930s
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/art-deco/
- **Light preview:** https://designatlas.h190k.com/previews/art-deco-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/art-deco-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=art-deco

Art Deco brings 1920s glamour: symmetrical fan and sunburst motifs, stepped frames, metallic gold on deep jewel tones and tall, elegant display type. It is ornate yet geometric and very theatrical.

**Key traits:** Gold on deep jewel tones; Sunbursts and fan motifs; Stepped, symmetric frames; Tall geometric display type; Ornamental borders.

**Works well for:** Hotels, bars and theatres; Events and weddings; Premium spirits.

**Example in the mockup:** The Gilded Lounge, a cocktail bar and supper club (a fictional brand).

### Memphis

> 80s squiggles, confetti and clashing colour.

- **Family:** 08 Retro & Historical
- **Also known as:** Memphis Group, 80s Pop
- **Era:** 1981–1987, revived
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/memphis/
- **Light preview:** https://designatlas.h190k.com/previews/memphis-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/memphis-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=memphis

Memphis design from the 1980s celebrates clashing pastels and brights, squiggles, zigzags, terrazzo dots and bold geometric shapes. It is playful, loud and unapologetically fun.

**Key traits:** Squiggles and zigzags; Confetti and dot patterns; Clashing pastels and brights; Floating geometric shapes; Bold black outlines.

**Works well for:** Kids and toy brands; Events and parties; Playful creative brands.

**Example in the mockup:** Squiggle Club, a creative workshop space for makers (a fictional brand).

### Y2K

> Chrome, bubbles and iridescent optimism.

- **Family:** 08 Retro & Historical
- **Also known as:** Millennium Aesthetic
- **Era:** 1997–2004, revived 2020s
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/y2k/
- **Light preview:** https://designatlas.h190k.com/previews/y2k-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/y2k-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=y2k

Y2K style captures the turn of the millennium: chrome and liquid-metal type, iridescent gradients, bubbly shapes, stars, pixel details and futuristic optimism. It is shiny, nostalgic and very online.

**Key traits:** Chrome and metallic type; Iridescent gradients; Bubbles, stars and sparkles; Rounded blob shapes; Early-web UI details.

**Works well for:** Fashion and beauty; Music and pop culture; Gen-Z brands.

**Example in the mockup:** Starlite 2K, a streetwear and accessories label (a fictional brand).

### Synthwave

> Neon sunsets over a chrome grid.

- **Family:** 08 Retro & Historical
- **Also known as:** Vaporwave, Outrun, Retrowave
- **Era:** 1980s, revived 2010s
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/synthwave/
- **Light preview:** https://designatlas.h190k.com/previews/synthwave-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/synthwave-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=synthwave

Synthwave and vaporwave evoke 1980s nostalgia through neon pink and cyan, sunset gradients, perspective grids, chrome type and VHS effects. It feels like a retro arcade at midnight.

**Key traits:** Neon pink, purple and cyan; Sunset and perspective grid; Chrome and glow type; Scanlines and VHS noise; Palm and retro motifs.

**Works well for:** Music and radio; Gaming and esports; Nightlife and events.

**Example in the mockup:** Neon Drive FM, an online retro synth radio station (a fictional brand).

### Frutiger Aero

> Glossy skies, bubbles and fresh green.

- **Family:** 08 Retro & Historical
- **Also known as:** Web 2.0 Gloss, Aero
- **Era:** 2004–2013
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/frutiger-aero/
- **Light preview:** https://designatlas.h190k.com/previews/frutiger-aero-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/frutiger-aero-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=frutiger-aero

Frutiger Aero recalls mid-2000s technology: glossy buttons, sky-blue gradients, water droplets, fresh greens, lens flares and humanist sans-serif type. It is optimistic, clean and full of light.

**Key traits:** Glossy, reflective buttons; Sky and water imagery; Fresh green and aqua; Bubbles and lens flares; Humanist sans-serif.

**Works well for:** Utilities and cloud services; Eco and wellness brands; Nostalgic tech products.

**Example in the mockup:** AquaSync, a cloud backup and file sync service (a fictional brand).

### Pixel Art

> Chunky pixels and arcade nostalgia.

- **Family:** 08 Retro & Historical
- **Also known as:** 8-bit, Retro Gaming
- **Era:** 1980s–1990s, revived
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/pixel-art/
- **Light preview:** https://designatlas.h190k.com/previews/pixel-art-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/pixel-art-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=pixel-art

Pixel art design uses blocky bitmap fonts, stepped pixel borders, limited palettes and sprite-style illustrations inspired by 8-bit and 16-bit games. It is nostalgic, charming and instantly recognisable.

**Key traits:** Bitmap pixel fonts; Stepped pixel borders; Limited retro palette; Sprite illustrations; Game UI elements (HP, XP).

**Works well for:** Indie game studios; Gaming communities; Playful tech brands.

**Example in the mockup:** Quest Pixel, an indie game studio launching a new adventure game (a fictional brand).

### Retro Terminal

> Monospace, prompts and phosphor glow.

- **Family:** 08 Retro & Historical
- **Also known as:** CLI, Hacker, Phosphor
- **Era:** 1970s–1980s, revived
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/retro-terminal/
- **Light preview:** https://designatlas.h190k.com/previews/retro-terminal-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/retro-terminal-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=retro-terminal

Terminal style imitates command-line interfaces and old CRT monitors: monospace everything, prompts and blinking cursors, ASCII art, scanlines and a green or amber phosphor glow. It speaks directly to developers.

**Key traits:** Monospace type everywhere; Command prompts and cursors; ASCII art and boxes; Phosphor glow and scanlines; Keyboard-first feel.

**Works well for:** Developer tools and CLIs; Security companies; Hacker communities.

**Example in the mockup:** kernel.sh, a command-line deployment tool for developers (a fictional brand).

## 09 Organic & Expressive

Hand-made, natural and abundant styles with lots of personality.

### Organic & Natural

> Soft blobs, earth tones and warmth.

- **Family:** 09 Organic & Expressive
- **Also known as:** Earthy, Biophilic
- **Era:** 2019 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/organic/
- **Light preview:** https://designatlas.h190k.com/previews/organic-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/organic-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=organic

Organic design draws on nature: earthy greens and terracottas, flowing blob shapes, botanical illustration, soft serif type and grainy, paper-like textures. It feels calm, sustainable and human.

**Key traits:** Earthy, muted palette; Flowing blob shapes; Botanical motifs; Soft serif headlines; Paper and grain textures.

**Works well for:** Skincare and wellness; Food and farming; Sustainable brands.

**Example in the mockup:** Terra Botanica, a natural skincare brand (a fictional brand).

### Hand-Drawn

> Wobbly lines and marker charm.

- **Family:** 09 Organic & Expressive
- **Also known as:** Sketch, Doodle UI
- **Era:** 2010s to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/hand-drawn/
- **Light preview:** https://designatlas.h190k.com/previews/hand-drawn-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/hand-drawn-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=hand-drawn

Hand-drawn design uses sketchy borders, doodles, handwritten fonts, highlighter marks and paper textures so the interface feels personal and approachable, as if it was sketched in a notebook.

**Key traits:** Sketchy, uneven borders; Handwritten fonts; Doodles and arrows; Highlighter and tape; Notebook paper textures.

**Works well for:** Education and workshops; Creative tools; Personal and community brands.

**Example in the mockup:** Doodle Camp, weekend creative workshops for adults (a fictional brand).

### Maximalism

> Pattern on pattern, colour on colour.

- **Family:** 09 Organic & Expressive
- **Also known as:** More is More
- **Era:** 2019 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/maximalism/
- **Light preview:** https://designatlas.h190k.com/previews/maximalism-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/maximalism-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=maximalism

Maximalism embraces abundance: layered patterns, rich saturated colour, mixed typefaces, ornate frames and dense, collage-like compositions. Done well, it feels joyful, curated and full of personality.

**Key traits:** Layered patterns; Rich, saturated colour; Mixed type styles; Ornate frames and stickers; Dense, curated layouts.

**Works well for:** Home decor and fashion; Restaurants and bars; Personality-led brands.

**Example in the mockup:** Bazaar Bloom, an eclectic home decor boutique (a fictional brand).

## 10 Raw & Bold

Honest structure, heavy borders and loud contrast that refuse to blend in.

### Brutalism

> Unpolished, structural, deliberately plain.

- **Family:** 10 Raw & Bold
- **Also known as:** Web Brutalism, Raw Web
- **Era:** 2014 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/brutalism/
- **Light preview:** https://designatlas.h190k.com/previews/brutalism-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/brutalism-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=brutalism

Web brutalism borrows from raw-concrete architecture: it exposes the structure of the page instead of decorating it. Default-looking type, visible grids, plain links and stark contrast make it feel honest and confrontational.

**Key traits:** System or monospace type; Visible borders and tables; Raw hyperlinks; Little or no imagery; Asymmetric, dense layouts.

**Works well for:** Art and architecture archives; Independent publications; Portfolios with attitude.

**Example in the mockup:** Concrete Archive, an open archive of post-war brutalist architecture (a fictional brand).

### Neo-Brutalism

> Thick outlines, hard shadows, loud colour.

- **Family:** 10 Raw & Bold
- **Also known as:** Neubrutalism
- **Era:** 2020 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/neo-brutalism/
- **Light preview:** https://designatlas.h190k.com/previews/neo-brutalism-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/neo-brutalism-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=neo-brutalism

Neo-brutalism takes brutalism’s rawness and makes it friendly. Chunky black outlines, offset solid shadows with no blur, flat saturated colours and bold grotesque type give interfaces a playful, sticker-like punch.

**Key traits:** 3–4px black outlines; Hard offset shadows; Saturated flat fills; Chunky grotesque type; Tilted stickers and badges.

**Works well for:** Startups and creator tools; Productivity apps; Youthful consumer brands.

**Example in the mockup:** Punchcard, a project board for small creative teams (a fictional brand).

### Anti-Design

> Rules broken on purpose.

- **Family:** 10 Raw & Bold
- **Also known as:** Ugly Design, Deconstructivism
- **Era:** 2018 to now
- **Live mockup (light & dark):** https://designatlas.h190k.com/designs/anti-design/
- **Light preview:** https://designatlas.h190k.com/previews/anti-design-light.jpg
- **Dark preview:** https://designatlas.h190k.com/previews/anti-design-dark.jpg
- **Request this design:** https://designatlas.h190k.com/contact/?design=anti-design

Anti-design rejects harmony and polish. Overlapping elements, clashing type, rotated blocks and chaotic layouts create tension and grab attention, which suits brands that want to feel experimental and countercultural.

**Key traits:** Overlapping, rotated layers; Clashing typefaces; Distorted scale; Deliberate misalignment; Raw collage feel.

**Works well for:** Music and art festivals; Fashion labels; Experimental studios.

**Example in the mockup:** NØISE Festival, a three-day experimental music festival (a fictional brand).