pingcap / autoflow

Design

Color Palette

The autoflow project uses a color palette based on the PingCAP Design System. The palette is defined in the src/styles/variables.scss file.

$primary-color: #007bff; // Blue
          $secondary-color: #6c757d; // Gray
          $success-color: #28a745; // Green
          $danger-color: #dc3545; // Red
          $warning-color: #ffc107; // Yellow
          $info-color: #17a2b8; // Light Blue
          $light-color: #f8f9fa; // White
          $dark-color: #343a40; // Dark Gray

Typography

The project utilizes a consistent typography system based on the PingCAP Design System.

  • Font: Roboto, a sans-serif font.
  • Font sizes: The font sizes are defined in src/styles/variables.scss file.
  • Font weights: The font weights are defined in src/styles/variables.scss file.

Layout

The layout of the project follows the principles of the PingCAP Design System.

  • Grid system: The layout uses a 12-column grid system.
  • Spacing: The project uses a consistent spacing system based on the PingCAP Design System.
  • Padding and margin: The padding and margin values are defined in src/styles/variables.scss file.
  • Alignment: The elements are aligned according to the PingCAP Design System.

Components

The project uses a set of reusable components for UI elements, such as buttons, inputs, and tables. These components are defined in the src/components directory.

  • Button: The Button component is used for interactive elements.
  • Input: The Input component is used for user input.
  • Table: The Table component is used for displaying data in a tabular format.

These components are styled using the color palette, typography, and layout principles outlined above.