Style Guide
This is the style guide to let you get familiar with our theme design.
#01. Typography
#Fonts
The font famliy follows the Tailwind default settings.
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789
#Headings
The headings ranges from
<h1><h6>h1 Heading 4xl
h2 Heading 3xl
H3 Heading 2xl
H4 Heading xl
H5 Heading lg
H6 Heading base
#Paragraphs
The common
<p>margin-bottomLorem 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.
#Quotes
The font under
<quotes>Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma – which is living with the results of other people’s thinking.
- Hello
#Address
Similar to the blockquote, the
<address>Hello World!, Inc.
#Semantic Elements
It’s clear that semantic elements are more friendly to users and developers, isn’t it?
abbrstrongbciteHello World!codedelemiinskbdmarkrubyssampText Subscriptedsub
Text Superscriptedsup
timeux = y + 2var
#Code
The code highlight is enabled by the community plugin:
gatsby-remark-vscodeHight lines
<div> <div> <p>gatsby-theme-pitayan is a theme for building blogs</p> </div>
</div>JSX
const App = () => {
return <div>Hello World!</div>
}Diff changes
const add = (x: number, y: number) => {
- return x + x;
+ return x + y;
}Inline code highlight
This is an inline code
Array.prototype.concat.apply([], array)#Lists
- List Item 1
List Item 2
- List Sub-Item 1
- List Sub-Item 2
- List Item 3
- List Item 4
- List Item 5
- List Item 1
List Item 2
- List Sub-Item 1
- List Sub-Item 1
- List Item 3
- List Item 4
- List Item 5
- Item 1
- Description for Item 1
- Item 2
- Description for Item 2
- Item 3
- Description for Item 3
#02. Colors
#Primary
The theme uses Tailwind indigo as its primary color.
500
#Palletes
The default Tailwind colors
500
500
500
500
500
500
500
500
#03. Elements
#Button
3 built-in button types:
DefaultFillGhostDefault
<button>“Fill” button
<button className="fill-button">“Ghost” button
<button className="ghost-button">Disabled styles
<button disabled>disabled button</button>#Divider
A horizontal line
<hr>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.
#Link
This is what a link looks like among the text.
When a link is focused
When a link is hovered
When a link is disabled
#Input
The
<input>defaultoutline#04. Components
#Pagination
Active item font size
2xlsemibold#Subscription
Appears at the end of each article
Join our email list and get notified about new content
Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.
#Selection Popup
<div className="selection-popup">#Panel
Article list item
<div className="panel">
This is a title
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is a title
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.
