Style Guide.

The brand style guide for FrankCongson.com.

This style guide is a living document showcasing the designs I have incorporated into my brand. As I grow my design system, Lagom-UI, I will use this document to ensure the components remain cohesive as they move from Figma to the browser.

Have a look at my Design Systems journey

• Part 1, Creating a Component Library
• Part 2, Design Systems Thinking
• Part 3, Component Design In Figma
• Part 4, Design Tokens To Dark Mode
• Continuing to grow 🌱

H1 Lorem Ipsum

H2 Lorem Ipsum

H3 Lorem Ipsum

H4 Lorem Ipsum

H5 Lorem Ipsum

H6 Lorem Ipsum

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bold. Lorem ipsum dolor sit amet

Italic. Lorem ipsum dolor sit amet

Code. Lorem ipsum dolor sit amet

Preformatted. Lorem ipsum dolor sit amet

Lorem Ipsum

Short quote.

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Medium quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Long quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Multi-line quote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<Section />

The <Section /> component creates a full width wrapper around body content with a max width of 1800px.

<Container />

The <Container /> component creates a responsive wrapper around body content with a max width of 1120px. This component is used within the <Section /> component.

Variations

There are three variations of the <ImageCaption /> component. The default image will stay within the container. On larger screens, the emphasized image will expand beyond the width of the container. The fullwidth image will span the full width and height of the viewport. For all variations, the caption is optional.

Variations

There are two variations of the <FeaturedSection /> component. The default will put content in front of a color background. The imageAsBackground variation will put content in front of a provided image with the image at 50% opacity.