Style guide

A few recyclable components and classes define <90% of this website’s look and feel. The style guide (seen below) is the lever that enables me to build new pages and make fast changes efficiently.

Responsibilities

Making a portfolio website for myself :D

Tools

Figma, Webflow

device or platform

Media responsive website

timeline

Ongoing

team

Me and myself

Heading 1

Heading 2

Heading 4

Body plain

Body emphasis

Body italic

Body emphasis italic

Big body emphasis

Big body plain

Big body italic

Big body emphasis italic

section heading

Decorative

Text Link Text Link

Heading 3

Background/text colors

text color

bg-highlighter

#28289c

This color is used for a "highlight" effect, eg. links.

text color

color-highlighter

#28289c

This color is used for a "highlight" effect, eg. links.

text color

bg-gradient

background: linear-gradient(138.17deg, #151540 -21.95%, #1C1C55 34.57%, #151540 94.74%);

This is to create an effect of ink-filled background.

text color

bg-desaturated

#4E4E69

This color is used mostly for labels.

text color

bg-dark

#010115 (default)

This color is used as a dark background.

text color

bg-light

#FFFEFC (default)

Default background light color

text color

color-dark

#010115

Dark foreground

text color

color-gold

#81602a

Gold foreground

text color

bg-white-blur (for project card scards)

rgba(255, 254, 252, 0.3)

This is for project cards

text color

bgcolor-gold

#EDDFCB @ 0%
#B9965D@ 100%

This is to create gold effect

section-paper (texture)

so-white.png

This is to create paper texture (as part of section)

Spacing divs

128px

64px

48px

Containers

Bottom margins

bottom-margin-64

bottom-margin-48

bottom-margin-32

bottom-margin-16

bottom-margin-128

Div widths

div-width-16%

div-width-32%

div-width-48%

div-width-64%

div-width-80%

div-width-100%

Containers

This is a long headline that explains the gist of the section.

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.

Lai-Jing Chu

Style guide

Break section

...and a tagline

Heading 1

Heading 2

Heading 4

section heading

Heading 3

Background/text colors

Spacing divs

128px

64px

48px

Containers

Bottom margins

Div widths

Containers

This is a long headline that explains the gist of the section.

Thank you for reading!

Let’s connect over coffee.