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
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 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.
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](/static/1b84749783107f26efae3ecd77c567cf/1cb6e/sample-image.jpg)
![Sample image](/static/1b84749783107f26efae3ecd77c567cf/1cb6e/sample-image.jpg)
![Sample image](/static/1b84749783107f26efae3ecd77c567cf/1cb6e/sample-image.jpg)
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.
![Sample image](/static/1b84749783107f26efae3ecd77c567cf/1cb6e/sample-image.jpg)
Image Background. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
![Sample image](/static/1b84749783107f26efae3ecd77c567cf/1cb6e/sample-image.jpg)
Image Background Framed. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Color Background. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Color Background Framed. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
![Sample image](/static/1b84749783107f26efae3ecd77c567cf/1cb6e/sample-image.jpg)
Color Background with Image. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
![Alt text](/static/1b84749783107f26efae3ecd77c567cf/1cb6e/sample-image.jpg)
Lorem Ipsum
![A photo of an audience - Photo by @davideragusa on Unsplash (unsplash.com/@davideragusa)](/static/76aee7d87035c0b063ea53c6eff26a85/43bd2/davide-ragusa-gcDwzUGuUoI-unsplash.jpg)
Design Tokens: Creating A Lightning Talk
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)](/static/c653a50d609d01d677fc5c777cee59e1/de8d1/charlesdeluvio-wn7dOzUh3Rs-unsplash.jpg)
Design Tokens: A Presentation Abstract
"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](/static/03139898d8dd51a19eef6a077e89a5ac/de8d1/mt-holdsworth-backpacking.jpg)
Breaking Through Beyond The Job Title
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.