Skip to main content

Design System

The design system in this project uses Ant Design and Tailwind CSS for styling and component creation. All the setup for the design system is located in the app/designSystem folder.

Key Components​

There are two main aspects of the design system that you can customize:

  1. Layouts: These components handle the overall structure of pages.
  2. Theme: This controls the visual styling and appearance of the app.

The app/designSystem/layouts/NavigationLayout contains navigation components for:

  • Top bar
  • Left sidebar
  • Mobile navigation bar

Page Layout​

The app/designSystem/layouts/PageLayout/index.tsx file is used by all pages in the application. It provides a layout prop that allows quick changes to the shape of a page. The available options are:

  • 'full-width': Extends the content to the full width of the page
  • 'narrow': Constrains the content to a narrower width
  • 'super-narrow': Creates a very narrow content area

To use the PageLayout, simply wrap your page content with it and specify the desired layout:

import { PageLayout } from 'app/designSystem';

function MyPage() {
  return (
    <PageLayout layout="narrow">
      {/* Your page content here */}
    </PageLayout>
  );
}

This structure allows for consistent layouts across the application while providing flexibility for different types of content.

Customizing the Theme​

The theme in this project is based on Ant Design and can be customized to match your brand's visual identity. The theme configuration is located in app/designSystem/theme/index.ts. Here's an example of how the theme is structured:

import { theme } from 'antd'

export const Theme = {
  algorithm: theme.defaultAlgorithm,
  token: {
    // Colors
    colorPrimary: 'black',
    colorError: '#ff4d4f',
    colorInfo: '#1677ff',
    colorSuccess: '#52c41a',
    colorWarning: '#faad14',
    colorTextBase: 'black',
    colorLink: 'black',
    colorBgBase: 'white',
    colorBgContainer: 'white',
    colorBorder: '#d4d4d8',
    colorBorderSecondary: '#e4e4e7',
    colorSplit: 'rgba(24, 24, 27, 0.07)',
    // Typography
    fontSize: 14,
    fontSizeHeading1: 38,
    fontSizeHeading2: 30,
    fontSizeHeading3: 24,
    linkDecoration: 'underline',
    //Form
    controlItemBgActive: '#f4f4f5',
    controlOutline: 'rgba(24, 24, 27, 0.1)',
    controlHeight: 36,
    controlHeightSM: 32,
    // Layout
    padding: 16,
    boxShadow:
      '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
    borderRadius: 6,
    lineType: 'solid',
    lineWidth: 1,
    motion: false,
  },
  components: {
    Form: {
      itemMarginBottom: '22px',
    },
    Layout: {
      headerBg: 'white', // topBar background color
      footerBg: 'white', // footer background color
      bodyBg: 'white', // page background color
      siderBg: '#fbfbfb', // leftBar background color
    },
    Menu: {
      activeBarBorderWidth: 0,
      itemHeight: 30,
      //topbar menu items
      horizontalItemSelectedColor: 'black',
      horizontalItemSelectedBg: 'transparent',
      //leftbar menu items
      itemSelectedColor: 'black',
      itemSelectedBg: 'transparent',
      itemActiveBg: 'transparent',
      //topbar and leftbar menu items
      itemHoverColor: 'black',
      itemHoverBg: 'transparent',
      itemColor: '#909090',
      itemBg: 'transparent',
      iconMarginInlineEnd: 8,
      iconSize: 16,
    },
    Button: {
      paddingInlineSM: 11,
      fontWeight: 500,
    },
  },
}

This theme configuration allows you to customize various aspects of the Ant Design components, including colors, typography, form elements, layout, and specific component styles.

To make editing the theme easier, you can use the Ant Design Theme Editor available at https://ant.design/theme-editor. This online tool provides a visual interface for customizing the theme and previewing the changes in real-time.