📄️ Color Mode
We have two color modes that can be used in your Digital Church website. Light and Dark. Light mode is the default color mode, meant to work primarily with lighter backgrounds. Dark mode is an inverse color mode, meant to work primarily with darker backgrounds.
📄️ Text Transforms
We have several text transform classes available to help you style your content. They are divided into a few different groups based on their purpose.
📄️ Text Colors
Use these classes to set the text color of an element and all headings within it. They use the same base color scale as the background color classes, but apply to color instead of background-color.
📄️ List Styles
Control the list marker style on ordered and unordered lists.
📄️ Borders
Utility classes for controlling border styles, colors, and border radius on elements.
📄️ Mix Blend Mode
The .difference class applies a mix-blend-mode: difference to an element. This inverts the colors of the element based on its background, which is useful for creating contrast effects where text or content overlaps varied backgrounds.
📄️ Backdrop Filters
backdrop filters allow you to change the way the background behind an element is displayed. They are handy for making a background image greyscale, inverting the colors, or blurring the background with a frosted glass type effect. We've added a desaturate backdrop filter to our utlitity classes so you can easily manipulate your background images.
📄️ Shadows
Utility classes for applying box shadows to elements. These follow a progressive scale from subtle to dramatic.
📄️ Spacing
Utility classes for controlling margins and padding. These use the design system's spacing tokens for consistent sizing across breakpoints.
📄️ Max Width
Sometimes you want to limit the width of a container. You can do this by adding the max-w-* class to the container. We use a 12 column grid system, so the max-width-12 class will set the max width to 12 columns, which is 1440px by default.
📄️ Layout
Utility classes for controlling display, flexbox, and alignment.
📄️ Grid
Utility classes for CSS Grid layouts, including column definitions, spanning, and gap control.
📄️ Aspect Ratio & Object Fit
Utility classes for controlling the aspect ratio of elements and how content fits within them.
📄️ Breakpoints
Utility classes that change behavior at different screen sizes. The design system uses four breakpoints.
📄️ Background Colors
Base Colors
📄️ Typography
We have several typography classes available to help you style your content. They are divided into a few different groups based on their purpose.
📄️ Utility Classes
Utility classes are predefined CSS classes that help you apply styles quickly and consistently across your application. They promote a utility-first approach to styling, allowing you to build designs directly in your markup without writing custom CSS for every component.
📄️ Video Wrappers
The .widescreen class sets up a `` to handle responsive video sizes. It defaults to a 16:9 ratio, but we have some other classes you can use for different ratios.
📄️ Visibility
These utility classes are used for functionality like hiding and showing content to specific users.