Guideline

Rules, conventions and best practices when developing Holistics Design System

General requirements

When developing, you need to be aware of the following requirement (ordered by priority):

• P0
  Meet all requirements from designer(s)
• P1
  Have good developer experience (DX)
• P1
  Easy to maintain
• P1
  *Be tested properly (including code coverage, UI testing, behavior testing,…)
• P1.5
  Easy to extend
• P1.5
  Have good performance
• P1.5
  Be as close as possible to the design
• P2
  *Have comprehensive documentation
• P2
  Follow industry standards
• P4
  Easy to migrate

TIP

*: in the constraint of time, these requirements could be compromised at some point to help deliver faster. Remember to note carefully before doing so.

Conventions

Button naming

📌 The way we name our <Button>'s type is:: Type - Semantic

• Type:

  • Primary: solid fill button -> prominent for CTA & draw the user's attention
  • Secondary: solid fill button -> subtle to offer an alternative action
  • Tertiary: button with clear background
  • Clear: text button with no background, no padding

• Semantic:

  • Highlight: in primary color to highlight the most prominent
  • Default: in gray
  • Danger, Warning, Success,...: in their corresponding color