Style guide for sorav.it. Made to keep track of arbitary design decisions so that future design decisions don't have to be as arbitary. Oh, and consistency. I've heard that that's important as well.

Colors

Primary Gradient

Primary Dark
to Primary Light
$primary-gradient

Primary Light

#F52E5D
rgb(245, 46, 93)
$primary-light

Primary

#EA1B64
rgb(234, 27, 100)
$primary

Primary Dark

#D5076E
rgb(213, 7, 110)
$primary-dark

Primary Darker

#AF007B
rgb(175, 0, 123)
$primary-darker

Secondary

#0D3B66
rgb(13, 59, 102)
$secondary

Text

#111111
rgb(17, 17, 17)
$text

Light Grey

#e8e8e8
rgb(232, 232, 232)
$light-grey

Grey

#828282
rgb(130, 130, 130)
$grey

Dark Grey

#424242
rgb(66, 66, 66)
$dark-grey

Typography

Type Hierarchy

ดิสเพลย์ Display

Maitree 6rem font weight 300

ไทเทิล Title

Athiti 2rem

ซับไทเทิล Subtitle

Athiti 1.5rem italic

พารากราฟ Paragraph

Maitree 1rem/18px

ซับเท็กซ์ Subtext

Maitree 0.8rem $grey italic

Text Sample

ปลาทูน่าครีบน้ำเงินเหนือ Bluefin Tuna

Written on 21 August 2017

ปลาทูน่าครีบน้ำเงินเหนือ (อังกฤษ: Northern bluefin tuna; ชื่อวิทยาศาสตร์: Thunnus thynnus) ปลาทะเลกระดูกแข็งขนาดใหญ่ชนิดหนึ่ง ในวงศ์ปลาอินทรี (Scombridae)

ลักษณะ

ปลาทูน่าครีบน้ำเงินเหนือจัดเป็นปลาโอหรือปลาทูน่าชนิดหนึ่ง พบกระจายพันธุ์ในมหาสมุทรเขตอบอุ่น ระหว่างละติจูดที่ 5-50 องศาเหนือ สามารถอยู่อาศัยบริเวณผิวน้ำ พบการแพร่กระจายบริเวณมหาสมุทร แอตแลนติกฝั่งตะวันตกและมหาสมุทรแปซิฟิกฝั่งตะวันออก มีลักษณะพิเศษที่เห็นได้เด่นชัดคือ ตัวค่อนข้างอ้วนสั้น หัวโต ตาโต ครีบหลังแยกออกเป็นสองส่วนอย่างชัดเจน ที่คอดหางมีสีดำ มีขนาดความยาว 200 เซนติเมตร โดยตัวที่มีขนาดใหญ่ที่สุดเท่าที่บันทึกได้ คือ ยาว 458 เซนติเมตร และมีน้ำหนักถึง 684 กิโลกรัม มีอายุยืนยาวกว่า 30 ปี และเป็นสัตว์เลือดอุ่น จัดเป็นปลาที่มีขนาดใหญ่ ที่สุดในวงศ์นี้

Spacing

Vertical Rhythm

Spacing	Type	Amount
Between box elements	Margin	20px
Within element	Padding	10px
Text within box	Padding	10px 20px
Header and paragraph	Margin	20px
Between title and subtext	Margin	0px
Between other text elements	Margin	10px

Line Heights

Type	Line Height	Sass variable
Single-line elements	1.3	`$base-line-height`
Header	1.3	`$base-line-height`
Paragraph	1.8	`$paragraph-line-height`

Iconography

Use Simple Line Icons . Always in a span element. For example:

- span.icon-magnifier

- span.icon-heart

Article Elements

Text Formatting

Here's a link. This sentence is emphasized. This sentence is, like, super emphasized. This contains some code.

Here's another ~~garapraph~~ paragraph with
a line break.

Images

Normal image, using img directly or wrapped in a figure. Sometimes Markdown renders them in a p tag so account for that.

Example Image

Fullbleed image, wrapped in a figure with class full-width.

Lists

Item one.
Item two, which is really long with words like supercalifragilisticexpialidocious so that it wraps around and stuff. เวลาทดสอบอะไรก็ทดสอบสองภาษาด้วย
Item three, with nested lists.
- Potpie
- Poutine
- Quiche Lorraine
- Falafel
Item four.

Item one.
Item two, which is really long with words like supercalifragilisticexpialidocious so that it wraps around and stuff. เวลาทดสอบอะไรก็ทดสอบสองภาษาด้วย
Item three, with nested lists.
1. Potpie
2. Poutine
3. Quiche Lorraine
4. Falafel
Item four.

Media

Twitter uses a Web Component that produce twitterwidget tags. Apply CSS at your peril.

มีเว็บแล้ว! - https://t.co/TD8fvknzkK
— Warrantica (@warrantica) February 24, 2017

UI Elements

Buttons

Link button

.button. Use on a if it takes user to another page, otherwise use it on button.

Chips

descriptor

.chip

Bars

Left Bar

Item

Center Bar

Item

Right Bar

Item

.leftBar, .centerBar, and .rightBar for rhythm-aware horizontal layout. Elements have a built-in margins to separate them, except for center bars, which have space-around.

Tables

Col 1	Col 2
Data	More Data
Data	More Data
Data	More Data

.table on the main table element, nothing more. Use thead, tbody appropriately.