SCTCH Theme Factory Styleguide
Fonts
Heading: Figtree | style: normal | baseline_ratio: 0.15
Crazy Frederick bought many very exquisite opal jewels
Crazy Frederick bought many very exquisite opal jewels
Crazy Frederick bought many very exquisite opal jewels
Crazy Frederick bought many very exquisite opal jewels
Subheading: Figtree | style: normal | baseline_ratio: 0.15
Crazy Frederick bought many very exquisite opal jewels
Crazy Frederick bought many very exquisite opal jewels
Crazy Frederick bought many very exquisite opal jewels
Crazy Frederick bought many very exquisite opal jewels
Accent: Figtree | style: normal | baseline_ratio: 0.15
Crazy Frederick bought many very exquisite opal jewels
Crazy Frederick bought many very exquisite opal jewels
Crazy Frederick bought many very exquisite opal jewels
Crazy Frederick bought many very exquisite opal jewels
Body: Figtree | style: normal | baseline_ratio: 0.15
Crazy Frederick bought many very exquisite opal jewels
Crazy Frederick bought many very exquisite opal jewels
Crazy Frederick bought many very exquisite opal jewels
Crazy Frederick bought many very exquisite opal jewels
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Paragraph text
Richtext output (page, product description, article, etc.)
Typographic elements in type-resize-all-xl prose wrapper
Typographic elements in type-resize-all-lg prose wrapper
Typographic elements in type-resize-all-md prose wrapper
Typographic elements in type-resize-all-sm prose wrapper
Typographic elements in type-resize-all-xs prose wrapper
History of the Web
The web has evolved from static documents into dynamic, interactive platforms shaping everyday life.
Tim Berners-Lee proposed the World Wide Web in 1989 as a way to share information across systems. Hosted at CERN in 1991, the first website explained the basics of the web, linking to related documents.
The 1990s saw explosive growth as businesses flocked online, giving rise to the .com era.
Web 2.0 and User Content
Sites like Wikipedia, YouTube, and Facebook ushered in the age of user-generated content.
Text Styles
Use emphasis, bold, code, and Ctrl + Z to represent keyboard input.
Lists
- HTML
- CSS
- JavaScript
- Plan
- Design
- Deploy
- HTML
- Structure of web pages
- CSS
- Visual styling
Table
| Tech | Purpose | Year |
|---|---|---|
| HTML | Page structure | 1991 |
| CSS | Styling | 1996 |
| JavaScript | Interactivity | 1995 |
Blockquote / Indent Support
"Vague but exciting." — Mike Sendall
This represents a second level of indentation.
Conclusion
The web continues to grow—from a simple document-sharing tool to a foundation for global communication and commerce.
Baseline ratio centering
Centering fonts with baseline_ratio and css cap height values.
HTML wraps fonts in a content box. When two different fonts are used in a line, the font baseline is used to align them.
This magic assumes inline positioning. When fonts are displayed inside buttons and badges we lose the magic baseline information.
We also gain an extra bit of alignment complexity.
For most fonts, centering a capitalized letter requires two ratios:
- Baseline: distance from the bottom of the content box to the baseline
- Cap height: distance from the top of the content box to the top of the capitalized letters
Centering a lowercase letter requires a third value:
- X-height: distance from the top of the content box to the top of a lowercase x
Lowercase fonts also have:
- Ascender: the top of a curve letter like f may protrude above the cap height
- Descender: the bottom of a j or p
This is why visually centering a font is challenging. The centering is not the same for uppercase and lowercase letters.
How it works:
To achieve visual centering, we calculate the space above the cap-height and below the baseline, represented below as the colored areas.
We turn those values into three classes that can be used to center text:
- One that only calculates the vars and lets you decide how to center the text
- Two that trim them from the line height, and apply them as margin or padding but flipped so the text is perfectly centered when capitalized and optically near-centered when lowercase containing capital letters
The reason this is not done everywhere is because it's not an improvement over baseline centering, and only works perfectly in cases where the font is uppercase. It works very well in buttons and badges, but will not improve the rhythm of prose text.
Centering: Vars-type-center
Heading Subheading Accent Body Heading Subheading Accent Body
Centering: Py-type-center-swap
Heading Subheading Accent Body Heading Subheading Accent Body
Centering: My-type-center-add
Heading Subheading Accent Body Heading Subheading Accent Body
Form Elements
Text input fields
Error!
Success!
Textarea Fields
Range Fields
Select Fields
Custom Select Fields
- X-Small
- First
- Second
- Third
- Small
- First
- Second
- Third
- Medium
- First
- Second
- Third
- Large
- First
- Second
- Third
- X-Large
- First
- Second
- Third
- Disabled
- First
- Second
- Third
- w/ value
- First
- Second
- Third
Custom Select
- X-Small
- First
- Second
- Third
- Small
- First
- Second
- Third
- Medium
- First
- Second
- Third
- Large
- First
- Second
- Third
- X-Large
- First
- Second
- Third
- Disabled
- First
- Second
- Third
- w/ value
- First
- Second
- Third
Radio Fields / Checkboxes
Buttons
Primary
Secondary
Black
White
Canvas
Content
Links
Primary
Secondary
Black
White
Canvas
Content
Inline
The first website was simple, a far cry from the interactive , media-rich sites we encounter today. It provided basic information and links to further resources.
Converted Icons
Colors
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold