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

Typography.

Typography styles

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.

Bold. Lorem ipsum dolor sit amet

Italic. Lorem ipsum dolor sit amet

Code. Lorem ipsum dolor sit amet

Preformatted. Lorem ipsum dolor sit amet

Page Header.

Page header using the <PageHeader /> component.

Section Header.

Section header using the <SectionHeader /> component.

Lorem Ipsum

Quote.

Quotes using the <Quote /> component. This component provides responsive quote blocks that are emphasized on larger screens.

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.

Layout.

Layouts using the <Section /> and <Container /> components.

`<Section />`

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

`<Container />`

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

Image Caption.

Images with caption using the <ImageCaption /> component. This component provides responsive images with optional comments. Images also have the option of being emphasized or fullwidth.

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.

Sample image — Default. Lorem ipsum dolor sit amet

Featured Section.

Featured sections using the <FeaturedSection /> component.

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.

Color Background. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Color Background Framed. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Color Background with Image. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum.

With Call To Action. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Call To Action.

Call to action using the <CallToAction /> component. This component provides a header, text, and button.

Lorem Ipsum.

With Call To Action. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hero.

Hero using the <Hero /> component. This component provides full width and full height section, displaying content in front of a provided image.

Blog Posts.

Blog posts using the <BlogPosts /> component. This component provides a single column layout of blog posts in descending date order.

A photo of an audience - Photo by @davideragusa on Unsplash (unsplash.com/@davideragusa)

Design Tokens: Creating A Lightning Talk

Nov 06, 2023

My presentation abstract was selected! Now, I have to write a 10-minute lightning talk demystifying design tokens. Seeing as I only have 10 minutes, I need to make sure I get the right content across. My goal for this talk is to help the audience understand the value design tokens can provide.

A photo of a presenter speaking to a slide about imposter syndrome - Photo by @charlesdeluvio on Unsplash (unsplash.com/@charlesdeluvio)

Design Tokens: A Presentation Abstract

Sep 11, 2023

"What are Design Tokens?" It's a common question I get asked. What it is at its core is quite simple. Design tokens provide codified design decisions. They are variables that represent a design choice. Why it's valuable has layers.

Backpacking through Mt Holdworth, New Zealand

Breaking Through Beyond The Job Title

Jun 19, 2023

I've been reflecting on my job title recently. I've always said the job title doesn't matter. But that's my perspective. It presents barriers when those around you see that job title rather than the person. This post is me trying to work through those thoughts. Maybe it can help someone else navigate their situation.

Link Button.

Link button using the <LinkButton /> component. This component wraps a link with a the style of a button. It also accepts framework specific link components such as Gatsby's <Link /> component.