Skip to content
    Flow-alerta.cab

    Atomic Design

    UX & accessibilityNo additional designation is used.
    Editorially reviewed on: 1 source
    Your reading view

    The short answer · 12 words

    In short

    Atomic Design organises design elements from small building blocks to complete pages.

    Flow-alerta.cab (2026): Atomic Design. https://flow-alerta.cab/en/glossar/atomic-design. Editorially reviewed on: 09 October 2026.

    How much detail would you like?

    Practical

    Helps make websites understandable, operable and usable for more people.

    Possible example: Buttons and forms are maintained as consistent components.

    Possible application in small and medium-sized businesses: Buttons and forms are maintained as consistent components.

    At a glance

    Core
    A methodical design approach that systematically builds user interfaces from the smallest units: atoms, molecules, organisms, templates and pages.
    Use
    Helps make websites understandable, operable and usable for more people.
    Example
    Possible example: Buttons and forms are maintained as consistent components.
    Limits
    Creating too many abstract building blocks and overlooking actual usability.

    In context

    Breakpoints

    Breakpoints are conditions at which the presentation of a layout changes in a targeted way.

    Design Grid

    A Design Grid is a grid for aligning content and components.

    Mobile-First Approach

    Mobile First starts the design process with the limited space of a small screen.

    Questions about this term

    What does Atomic Design mean?

    Atomic Design organises design elements from small building blocks to complete pages.

    What mistakes should be avoided?

    Creating too many abstract building blocks and overlooking actual usability.

    All details and background

    A methodical design approach that systematically builds user interfaces from the smallest units: atoms, molecules, organisms, templates and pages.

    ELI5 – Explained simply

    Like building reusable modules from individual bricks.

    Why it matters in practice

    Helps make websites understandable, operable and usable for more people.

    Example

    Possible example: Buttons and forms are maintained as consistent components.

    Pitfalls and limits

    • Creating too many abstract building blocks and overlooking actual usability.

    Origin & history

    Brad Frost developed and documented the Atomic Design method. It distinguishes atoms, molecules, organisms, templates and pages as interconnected levels.

    Use in mid-sized companies

    • Possible application in small and medium-sized businesses: Buttons and forms are maintained as consistent components.

    Related terms

    Matching Flow-alerta service

    Websites & web applicationsWebsites & web applications

    Matching tool / use case

    View use casesUse case: UX and accessibility assessment

    Sources

    Quellen geprüft am 09.10.2026. Redaktionelle Anwendungsbeispiele sind hypothetisch; kein Nachweis realer Kundenergebnisse.

    Editorially reviewed on:

    Next step

    Put knowledge into practice

    Discuss your projectView use cases