Styles Guidelines
L’Allie Cabinet Styles Guidelines hold the general styles and CSS classes to help develop the website.
Typography elements
Text elements and classes are used strictly for sizing, not styling.
Usually these elements are wrapped with a title-wrapper or a text-wrapper to have access to frequently used modifiers as combo classes.
Headings
HTML tags have matching classes for their styles. Heading levels should follow the correct hierarchy in the HTML, but styles can be overriden with classes. We recommend always using the class to make separating the tag from the style a habit. Avoid combo classes when possible.
HTML H1
Heading 1
font-size: 5rem; (80px)
line-height: 1;
HTML H2
Heading 2
font-size: 2.5rem; (32px)
line-height: 1;
HTML Heading 3
Heading 3
font-size: 1.5rem; (24px)
line-height: 1;
HTML Heading 4
Heading 4
font-size: 1.25rem; (20px)
line-height: 1;
HTML Heading 5
Heading 5
font-size: 1.125rem; (18px)
line-height: 1;
HTML Heading 6
Heading 6
font-size: 1rem; (16px)
line-height: 1;
Text
Text classes are strictly used for font-size and line-height. If you need bigger sizes, you should use heading classes. Any other styling usually comes from a parent element. Sometimes you need to override the parent element's color or font-weight, in which case you can use combo classes or spans.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
font-size: 1.5rem; (24px)
line-height: 1.4;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
font-size: 1.25rem; (20px)
line-height: 1.4;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
font-size: 1rem; (16px)
line-height: 1.4;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
font-size: 0.75rem; (12px)
line-height: 1.4;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
font-size: 0.5rem; (8px)
line-height: 1.4;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
font-size: not set (resets to base)
line-height: not set
Rich text
Other HTML tag defaults
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat
Lists:
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Blockquote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat
Link inside the rich text element

In the global CSS we are removing the top margin from the first element and the bottom margin from the last element
Other
Other HTML tag defaults
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat
font-size: 1.2rem;
line-height: 1.5;
padding-top: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
color: inherit;
Note: Avoid setting a font-size to links. Instead, add a link block and then add a text block to it.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
display: flex;
flex-direction: column;
row-gap: 0.5rem;
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
display: flex;
flex-direction: column;
row-gap: 0.5rem;
Colour Palette
This area is not to set specific classes, but rather a checkpoint to add your project's colors to the global swatches and describe how they're used.
Used as the main background color.
Used as the light background color to create a distinction.
(e.g. Process Section)
Used as the accent background color to enhance concentration.
(e.g. the Footer)
Base text color of the project.
Base heading color of the project.
Base subheading color of the project.
Base border color of UI elements of the project.
Used for highlighting, CTAs, details.
Gradients & Overlays
Having to apply gradients each time on new classes is annoying. So is having a class that takes up space just for a gradient.
That's why you can copy them from Figma into the global custom code block designated for gradients, allowing you to apply gradient backgrounds using an attribute.
For clipping text, make sure the property is background-image, not background
Used on top of the Hero images if any.
Tip: Add a Div element and position it absolutely taking the whole space in the Hero Section.
Used as the modal screen protection background.
Tip: Add a Div element and position it absolutely taking the whole screen.
Shadows
Shadows are set in the global CSS embed block to make it easier to copy layered shadows from Figma and avoid adding an extra combo-class to your elements by assigning them to attributes.
Can be used in small elements.
This shadow is specific for the Navbar.
Can be used in big elements.
Can be used in large elements.
Structural Elements
This elements are used to structure the content of the website and add consistency. All this classes have combo classes to change their properties to adapt to all designed scenarios.
Sections
Use the section class with its combo classes for all your sections to maintain consistency and avoid creating a new class for every new section. There are of course exceptions, but whenever possible, think of reusable ways to create elements.
These combo classes can be stacked.
If you find yourself stacking more than 3 classes, you should create a new combo class for that case.
You could also add more variations (i.e. cc-top-xl, cc-cta, ...)
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Regular padding
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
No padding
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
No top padding
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
No bottom padding
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Hero sections are often unique compared to other sections, whether because of a fixed nav or just being 100vh.
Use this class for your hero sections if needed, or remove it and make your own.
Containers
Sections usually need a container to keep layouts from becoming too wide. Containers also control the horizontal padding in order to maintain the same spacing throughout your project.
A default container acts as "12 columns", as it takes up the full design width (usually 1440px). That's why combo class names mention columns.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
width: 100%;
max-width: 90rem; (1440px)
padding: 0 2.5rem; (x padding 40px)
margin: 0 auto; (x margin auto)
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
height: 100%;
Layouts
Layouts will usually have more unique names depending on the design. In a lot of cases, there are some basic layout options that can act as building blocks.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

display: flex;
flex-direction: column;
gap: 2rem; (32px)
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

horizontal-layout defaults to 2 even columns. You can then add modifiers for different sizes or more columns.

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor
Adds another column to the grid. Might be useful for a blog grid.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

column is just a div that is used inside a grid column. the reason it exists is to have some reusable combo classes for alignment, padding, etc





This modifier is useful for button groups, logos, or any time you want extra items to stack in one line. Columns are automatically generated



image-wrapper is a generic base class that has overflow hidden, position relative, and width 100%. This is useful to avoid creating a new class for standard-sized images in columns. It is also aligned top to avoid stretching for the whole column (you can change that by placing it in a flex parent). Use a combo class to give it full height.
If you have images with unique sizes and positioning, create a new class for it.
It has combo classes to control its aspect ratio or set it to contain. You can add more or modify them. Default:
cc-1x1 cc-4x3 cc-16x9

image is set to cover by default, and full width & height. You can use the combo class cc-contain for object-fit: contain

Heading inside a title-wrapper
Put titles inside a div with this class to give them the default width. Comes with combo classes for reducing or increasing the width, but you can also add your own.
All this text is in a text-wrapper which constrains width. Even this paragraph got its own text-wrapper.
General purpose class to control text max-width and alignment.
Similar to title and text wrappers, this class controls spacing, this time from the top. Use combo classes for different sizes and alignment.
Content Components
These components are of a special type!! They have been created to help you save time by just dragging and dropping them into the canvas to create your layouts faster.
title-wrapper > Heading
Heading component to be used in slots
text-wrapper > Paragraph
Paragraph component to be used in slots. You can have different max-width values without creating new classes

image-wrapper > al-image
Spacer
Spacers are useful when you need some extra space in a layout but you don't want to create a new wrapper or class for it.
Has props for height in all the breakpoints.
Utility Classes
Utilities have a u- prefix to separate them from base styles. They can work on their own, but usually you use them to modify a base element, like a title-wrapper.
On sections, avoid them as much as possible since you usually apply paddings on them, but background changes are fine.
Things like text alignment should be on the layout layer.
Text - Color
These can be added to any element, although it's recommended to place it as high as possible according to your needs.
For example, if you want a two text blocks to have this color and they are sibling elements, you could apply it to their parent element.
If you have a lot of colored headings, it is a good idea to apply it on the element instead of the parent or in a span, to make it easier to access next time.
Text - Font
Font utilities change the font and weight of an element.
You could replace sans & serif with other variations (i.e. main & display).
Text - Alignment
Use to align text in layouts, or individual text elements.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Text - Other
Other decorations and styles.
Background.
Background modifiers also have a text property added to them, to avoid having to override all the text elements inside them.
You could use "u-bg-dark" to apply dark mode too, instead of the theme attribute.
Border - Color.
Background modifiers also have a text property added to them, to avoid having to override all the text elements inside them.
You could use u-bg-dark to apply dark mode too, instead of the theme attribute.
border-width: 1px;
border-color: Themes/Colors/Stroke
border-width: 1px;
border-color: Themes/Colors/Text
border-width: 1px;
border-color: Themes/Colors/Accent
Border - Radius.
Background modifiers also have a text property added to them, to avoid having to override all the text elements inside them.
You could use u-bg-dark to apply dark mode too, instead of the theme attribute.
border-radius: Small
border-radius: Medium
border-radius: Large
border-radius: Full (9999px)
Other.
Other useful utilities.
display: none;
display: none; (only on tablet)
display: none; (only on mobile L)
display: none; (only on mobile)
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
z-index: -1;
z-index: 997;
(998 is for the nav, 999 for modals)
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
opacity: 0%;
opacity: 50%;
width: 100%;
height: 100%;
height: 100vh;