rumenpetrov/waft-design-system

[WIP] Simple design system example

Waft design system

⚠️ Warning: This project is meant primary for learning and currently is in work in progress state. Expect breaking changes.

All-purpose design system, meant to be used in small to medium, framework or non-framework projects, where using something simple and non-intrusive is valued more than customizability and high amount of options. Its primary targeted to developers building an application for learning a new technology or something which doesn't require flashy looks. Web is the main supported platform but the system allows easier extension with more platforms.

Objectives

• Phase MVP

  • Define and setup initial structure and tooling
  • Analyze and describe the use case and the scope of the design system which will be developed
    • Target Audience
    • Use Cases
    • Define Supported Platforms
    • Establish Design Principles
    • Catalog Components
    • Explain customization level and how styling could be done
  • Define anatomy elements and collect resources
    • Core values/Principles
    • Define initial tokens
    • Define initial systems, if needed
    • Define initial components
    • Add some guides
  • Setup npm package and document how it should be used
  • Auto deployment script
  • Add docs for at least one process - component contribution
  • Develop at least one component from the MVP list by following a process

• Phase Next

  • Test with different frameworks and add examples/recipes
  • Fix problems with build tools import and importmap
  • Make automatic documentation for components to work
  • Define and describe versioning
  • More Design principles - Adaptive/Responsive/Accessibility
  • Setup Chromatic with CI
  • Add metrics - e.g. accessibility threshold
  • Setup tests
  • Make it more engaging - colors, gradients, animations
  • Light/dark theme
  • SSR components support

Inspiration

• https://design-system.service.gov.uk/
• https://baklava.design/
• https://material-web.dev/about/intro/
• https://www.fast.design/
• https://m3.material.io/
• https://fluent2.microsoft.design/
• https://polaris.shopify.com/
• https://mailchimp.com/design/
• https://carbondesignsystem.com/
• https://nordhealth.design/
• https://vaadin.com/design-system
• https://github.com/ing-bank/lion
• https://studio.backlight.dev/edit/5vtJtbY04aoD1dGKcsu1/introduction/?p=doc

Technology stack

• Lit
• ViteJS
• Storybook
• Chromatic

waft-design-system's Issues

[Draft] Button proposal

Component description

The Button component serves as a fundamental element for user interaction within web interfaces. It enables users to perform actions such as submitting forms or triggering specific functionalities.

Potential use case examples

1. Card actions
2. Submitting a form
3. Triggering a modal dialog
4. Initiating a call-to-action (CTA) within a marketing campaign

Visual appearance

• Design
  
• Solid background color
• Roundness consistent to the global design tokens
• Clear and recognizable as a clickable element
• Consistent size and spacing to maintain visual harmony within the interface
• Some adjustable CSS properties to accommodate different styling and branding needs
• Font size equal to font size design token for regular text
• Accessible contrast ratio to ensure readability and usability

List of supported states - e.g. hover, focus, error, disabled, read-only...

• Default - Normal state of the button.
• Hover - When the user hovers over the button.
• Focus - When the button receives keyboard focus.
• Active - When the button is clicked or tapped.
• Disabled - When the button is not clickable or interactable.
• Error - When the button represents an action that results in an error.

Expected interface/properties/variants/types/forms

• Content - Text or text + emoji on both sides
• Preserve the type attribute behavior when within a form
• Size - only 1 size, could be adjusted over exposed CSS variables
• Variants - "default" and "accent"
• Full width option

Input component

Component description

The Input component serves as a fundamental element for user input within web forms. It allows users to enter short text and facilitates interaction and data submission.

Potential use case examples

1. Form fields for collecting user information
2. Search bars or input fields for filtering content
3. Comment sections or text input areas for user feedback

Visual appearance

• Inherits his background color from the document, depending on the theme.
• Roundness consistent to the global design tokens
• Clear and recognizable as an input field
• Consistent size and spacing to maintain visual harmony within the interface
• Adjustable CSS properties to accommodate different styling and branding needs
• Font size equal to font size design token for regular text
• Accessible contrast ratio to ensure readability and usability

List of supported states - e.g. hover, focus, error, disabled, read-only...

• Default - Normal state of the input field.
• Focus - When the cursor is inside the input field or it receives the keyboard focus.
• Disabled - When the input field is not editable or interactable.
• Read only - Same as idea and visual appearance as disabled.
• Error - When the input field contains invalid or erroneous data.

Expected interface/properties/variants/types/forms

• Preserve as much as possible from the native behavior and attributes
• Full width option