Payload Logo
Health,  Figma prototype,  User interaction

Create a themed tailwind design system

Author

james

Date Published

To analyse user behaviour you need a pragmatic approach. There are already established UX pillars iterating from previous giants providing 90 years of programming prototypes. From paper - framework provides with you with all past graciously failure summarising and iterated upon bringing us to now. The state of design

Design in this context is font choice, the use of spacing, and colour.

Step 1

Create a themed tailwind design system styling the page using less than 140 characters

Using a React design framework, we download the packages which provides Lexical a no-code environment

Open Terminal and grab the packages
npm create-payload-app
npm run dev

Creating the folder structure that will be deployed to your hosting provider like vercel/firestore/aws becomes your taxonomy
|_ 📁 public
|_ 📁 src
| |_ 📁 App
| | |_ 📁 (frontend)
| | | |_ 📄 layout.tsx
| | | |_ 📄 page.tsx
| | |_ 📁 (payload)
|_ 📄 .env
|_ 📄 components.json
|_ 📄 package.json
|_ 📄 tailwind.config.mjs
|_ 📄 tsconfig.json

Editing the tailwind configuration allowed us to change colours, font and spacing creating your theme

haaazit.

How to use a design system 📐


Typography

no-code gets you far, until you want to scale creating your own collection of data. rather use the classes payload uses to style its buttons

H1

H3

Important

Primary

Secondary

1<h1>H1</h1>
2<h3>H3</h3>
3<p class="doc-controls__value">
4Important</p>
5<p>
6Primary</p>
7<p class="doc-controls__label">
8Secondary</p>

Button

Use the payload-cms typography and button classes for consistent use of the design system, while updating the theme, overiding the default tailwind for your brand

- primary btn--style--primary
- secondary btn--style--secondary

1<button class="btn btn--style-primary">
2  Save
3</button>

Access control toggles who the button is enabled for, and what field type collection is being updated for example

Input

Instantly adhere to a proven design system. The look and feel remains consistent across the app, and users get familiar, intuitive interactions

1<div class="field-type text">
2  <label htmlFor="field-label" for='field-name'>name</label>
3  <div class="input-wrapper">
4    <input id="field-name" type="text" name="name" />
5  </div>
6</div>

Card / panel

Consistent responsive tailwind reducing the character count improving the execution by simplifying the build

|_ 📁 src
| |_ 📁 components
| | |_ 📁 ui
| | | |_ 📄 button.tsx
| | | |_ 📄 card.tsx
| | | |_ 📄 input.tsx
|_ 📁 collections
|_ 📁 fields
|_ 📄 paylaod types.ts
|_ 📄 payload.config.ts

1<div class="auth-fields account__auth">
2hello
3</div>

Extending Tailwinds colour

Configuration snippet copied to your PayloadCMS alows you to theme the colours of your site to the brand colours with a simple copy paste. 

1// tailwind.config.js
2module.exports = {
3  theme: {
4    extend: {
5      colors: {
6        'base': {
7          0: 'var(--theme-base-0)',
8          50: 'var(--theme-base-50)',
9          100: 'var(--theme-base-100)',
10          150: 'var(--theme-base-150)',
11          200: 'var(--theme-base-200)',
12          250: 'var(--theme-base-250)',
13          300: 'var(--theme-base-300)',
14          350: 'var(--theme-base-350)',
15          400: 'var(--theme-base-400)',
16          450: 'var(--theme-base-450)',
17          500: 'var(--theme-base-500)',
18          550: 'var(--theme-base-550)',
19          600: 'var(--theme-base-600)',
20          650: 'var(--theme-base-650)',
21          700: 'var(--theme-base-700)',
22          750: 'var(--theme-base-750)',
23          800: 'var(--theme-base-800)',
24          850: 'var(--theme-base-850)',
25          900: 'var(--theme-base-900)',
26          950: 'var(--theme-base-950)',
27        },
28        'success': {
29          0: 'var(--theme-success-0)',
30          50: 'var(--theme-success-50)',
31          100: 'var(--theme-success-100)',
32          150: 'var(--theme-success-150)',
33          200: 'var(--theme-success-200)',
34          250: 'var(--theme-success-250)',
35          300: 'var(--theme-success-300)',
36          350: 'var(--theme-success-350)',
37          400: 'var(--theme-success-400)',
38          450: 'var(--theme-success-450)',
39          500: 'var(--theme-success-500)',
40          550: 'var(--theme-success-550)',
41          600: 'var(--theme-success-600)',
42          650: 'var(--theme-success-650)',
43          700: 'var(--theme-success-700)',
44          750: 'var(--theme-success-750)',
45          800: 'var(--theme-success-800)',
46          850: 'var(--theme-success-850)',
47          900: 'var(--theme-success-900)',
48          950: 'var(--theme-success-950)',
49        },
50        'warning': {
51          0: 'var(--theme-warning-0)',
52          50: 'var(--theme-warning-50)',
53          100: 'var(--theme-warning-100)',
54          150: 'var(--theme-warning-150)',
55          200: 'var(--theme-warning-200)',
56          250: 'var(--theme-warning-250)',
57          300: 'var(--theme-warning-300)',
58          350: 'var(--theme-warning-350)',
59          400: 'var(--theme-warning-400)',
60          450: 'var(--theme-warning-450)',
61          500: 'var(--theme-warning-500)',
62          550: 'var(--theme-warning-550)',
63          600: 'var(--theme-warning-600)',
64          650: 'var(--theme-warning-650)',
65          700: 'var(--theme-warning-700)',
66          750: 'var(--theme-warning-750)',
67          800: 'var(--theme-warning-800)',
68          850: 'var(--theme-warning-850)',
69          900: 'var(--theme-warning-900)',
70          950: 'var(--theme-warning-950)',
71        },
72        'error': {
73          0: 'var(--theme-error-0)',
74          50: 'var(--theme-error-50)',
75          100: 'var(--theme-error-100)',
76          150: 'var(--theme-error-150)',
77          200: 'var(--theme-error-200)',
78          250: 'var(--theme-error-250)',
79          300: 'var(--theme-error-300)',
80          350: 'var(--theme-error-350)',
81          400: 'var(--theme-error-400)',
82          450: 'var(--theme-error-450)',
83          500: 'var(--theme-error-500)',
84          550: 'var(--theme-error-550)',
85          600: 'var(--theme-error-600)',
86          650: 'var(--theme-error-650)',
87          700: 'var(--theme-error-700)',
88          750: 'var(--theme-error-750)',
89          800: 'var(--theme-error-800)',
90          850: 'var(--theme-error-850)',
91          900: 'var(--theme-error-900)',
92          950: 'var(--theme-error-950)',
93        },
94        'accent': {
95          0: 'var(--theme-accent-0)',
96          50: 'var(--theme-accent-50)',
97          100: 'var(--theme-accent-100)',
98          150: 'var(--theme-accent-150)',
99          200: 'var(--theme-accent-200)',
100          250: 'var(--theme-accent-250)',
101          300: 'var(--theme-accent-300)',
102          350: 'var(--theme-accent-350)',
103          400: 'var(--theme-accent-400)',
104          450: 'var(--theme-accent-450)',
105          500: 'var(--theme-accent-500)',
106          550: 'var(--theme-accent-550)',
107          600: 'var(--theme-accent-600)',
108          650: 'var(--theme-accent-650)',
109          700: 'var(--theme-accent-700)',
110          750: 'var(--theme-accent-750)',
111          800: 'var(--theme-accent-800)',
112          850: 'var(--theme-accent-850)',
113          900: 'var(--theme-accent-900)',
114          950: 'var(--theme-accent-950)',
115        },
116      },
117    },
118  },
119  variants: {},
120  plugins: [],
121};

Replace the .svg to change the brand logo

|_ 📁 src
| |_ 📁 components
| | |_ 📁 Logo
| | | |_ 📄 icon.svg
| | | |_ 📄 Logo.tsx
|_ 📁 collections
|_ 📁 fields
|_ 📄 paylaod types.ts
|_ 📄 payload.config.ts

1import clsx from 'clsx'
2import React from 'react'
3

4interface Props {
5  className?: string
6  loading?: 'lazy' | 'eager'
7  priority?: 'auto' | 'high' | 'low'
8}
9

10export const Logo = (props: Props) => {
11  const { loading: loadingFromProps, priority: priorityFromProps, className } = props
12

13  const loading = loadingFromProps || 'lazy'
14  const priority = priorityFromProps || 'low'
15

16  return (
17    /* eslint-disable @next/next/no-img-element */
18    <img
19      alt="Payload Logo"
20      width={193}
21      height={34}
22      loading={loading}
23      fetchPriority={priority}
24      decoding="async"
25      className={clsx('max-w-[9.375rem] w-full h-[34px]', className)}
26      src="/simplePlekbold.svg"
27    />
28  )
29}

Add a free image bucket to config

Update payload config to include the S3 Storage inc plugin s3Storage

1 import { s3Storage } from '@payloadcms/storage-s3'
2 
3  collections: [Booking, Pages, Posts, Media, Categories, Users],
4  cors: [getServerSideURL()].filter(Boolean),
5  globals: [Header, Footer],
6  plugins: [
7    ...plugins,
8    s3Storage({
9      bucket: process.env.R2_BUCKET,
10      collections: {
11        media: true,
12      },

Add the bucket credentials to your .env

Add bucket credentials to the .env on the root
R2_BUCKET=
R2_REGION=auto
R2_ACCESS_KEY_ID=
R2_SECRET_ACCESS_KEY=
R2_ENDPOINT=


Tailwind design system empowers development teams with a robust and efficient approach to building web applications, fostering rapid development cycles and ensuring consistent brand representation across all platforms; this foundation further enables the creation of tailored dashboards for insightful data tracking and even the potential to streamline operations by consolidating functionalities from disparate services, ultimately delivering a powerful, flexible, and highly customized solution.

Sources: https://snippets.10xmedia.de/
Setup: https://youtu.be/2-hGLl9hGas?si=5SzVd0inX1QGxl7H&t=317
Colour theme: https://youtu.be/wSThlikWfXE?si=p09VtzRQu7g_wS83&t=57


Health,  Figma prototype,  Components

Creating a custom calendar component

Add a component to your design system. Use a hooks to join/relate User Agreement creating the ideal unchallenged User experience