logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Namu Design
    • Introduction
    • Design Values
    • Cases
  • Global Styles
    • Colors
    • Layout
    • Font
    • Icons
    • Dark Mode
    • Shadow
  • Design Patterns
    • Overview
    • Global Rules
      • Feedback
      • Navigation
      • Data Entry
      • Data Display
      • Copywriting
      • Data format
      • Button
      • Data List
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
    • Template Document
      • Visualization Page
      • Detail Page
  • Design Patterns (Research)
    • Overview
    • Template Document
      • Form Page
      • Workbench
      • List Page
      • Result Page
      • Exception Page
    • Global Rules
      • Navigation
      • Message and Feedback
      • Empty Status
  • Visualization
  • Motion
  • Illustrations
Guidelines and Resources
Front-end Implementation
Who's using Namu Design
Words From Community
How to Contribute

Introduction

  • Design Values

    Resources

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu Design Community

    Ant Financial has a large number of enterprise-level products. With complex scenarios, designers and developers often need to respond fast due to frequent changes in product demands and concurrent R & D workflow. Many similar contents exist in the process. Through abstraction, we could obtain some stable and highly reusable components and pages.

    On the other hand, with the trend of commercialization, more and more enterprise products begin to pursue better user experiences. Under this situation, Ant User-Experience Design Team builds a design system for enterprise products based on four design values of Natural, Certain, Meaningful, and Growing. It aims to uniform the user interface specs and reduce redundancies and excessive production costs, helping product designers to focus on better user experience.


    Guidelines and Resources

    We provide comprehensive design guidelines, best practices, resources, and tools to help designers produce high-quality product prototypes.

    • Design values
    • Design patterns
    • Visualization
    • Illustrations
    • Design resources
    • Sketch toolbox
    • Articles

    Front-end Implementation

    React is used to encapsulate a library of components which embody our design language. We welcome the community to implement our design system in other front-end frameworks of their choice.

    • Namu Design of React(official implementation)
    • NG-ZORRO - Namu Design of Angular
    • NG-ZORRO-MOBILE - Namu Design Mobile of Angular
    • Namu Design of Vue
    • Namu Design Blazor
    • San UI Toolkit for Namu Design
    • antizer (ClojureScript)

    Who's using Namu Design

    • Ant Financial
    • Alibaba
    • Tencent
    • Baidu
    • Koubei
    • Meituan
    • Didi
    • Eleme
    • Other Users

    If your company or products use Namu Design, and you'd like to be added to this growing list, click here to leave us a message.

    Words From Community

    • Hacknews: Show HN: Antd – A set of high-quality React components
    • Alligator: Crafting Beautiful UIs in React Using Namu Design
    • Introduction to Namu Design
    • Build a React App with Namu Design Principles
    • Meet Antd, an enterprise React UI library

    How to Contribute

    Contributions to Namu Design on GitHub are welcomed! Whether you have questions, concerns, or suggestions for improving Namu Design - please don't hesitate to reach out to us here.