Skip to content

Design System

Opshell's Blog 的視覺語言與設計規範。
The visual language and foundation of Opshell's Blog.

Colors

定義品牌識別與狀態溝通的色彩系統。

Brand Colors

Copied!

Primary 1

--color-primary-1#f4b936
Copied!

Primary 2

--color-primary-2#d8a72b
Copied!

Primary 3

--color-primary-3#b99436
Copied!

Primary soft

--color-primary-softrgb(185 148 54 / 16%)
Copied!

Adorn

--color-adorn#bd34fe

Spectrum(稜鏡)

Opshell 的 P 是穿過三稜鏡的那道光。品牌的琥珀→紫漸層攤開成六個色,每個分類拿一個: 首頁稜鏡的光、時間軸的圓點、文章標題下那一小段都是同一個顏色。 光譜色只畫線、點、光線,不當小字的顏色(琥珀對白底不到 2 : 1)。

Copied!

Amber

--pr-amber#F4B936
Copied!

Orange

--pr-orange#F08A24
Copied!

Coral

--pr-coral#EC5B4B
Copied!

Magenta

--pr-magenta#D6409F
Copied!

Violet

--pr-violet#BD34FE
Copied!

Indigo

--pr-indigo#7B61FF

Night Sky(深色模式)

深色模式的底色帶一點紫,像 O 裡面那片夜空。淺色模式的品牌橘加深一階,當字才有 4.6 : 1。

Copied!

Night bg

--vp-c-bg#FFF
Copied!

Night alt

--vp-c-bg-alt#F6F6F7
Copied!

Night soft

--vp-c-bg-soft#F6F6F7
Copied!

Night divider

--vp-c-divider#E2E2E3
Copied!

Brand text

--vp-c-brand-1#B4600A

Gray Colors

Copied!

gray-000

--color-gray-000#FFF
Copied!

gray-050

--color-gray-050#F7F7F7
Copied!

gray-100

--color-gray-100#ECECEC
Copied!

gray-200

--color-gray-200#D8D8D8
Copied!

gray-300

--color-gray-300#C4C4C4
Copied!

gray-400

--color-gray-400#A8A8A8
Copied!

gray-500

--color-gray-500#8C8C8C
Copied!

gray-600

--color-gray-600#6A6A6A
Copied!

gray-700

--color-gray-700#404040
Copied!

gray-800

--color-gray-800#262626
Copied!

gray-900

--color-gray-900#000

Status Colors

Copied!

Success

--color-success#03A61C
Copied!

Warning

--color-warning#FAAD14
Copied!

Error

--color-error#F23005
Copied!

Info

--color-info#1890FF

Community Colors

Copied!

Facebook

--color-facebook#3b5998
Copied!

Linkedin

--color-linkedin#1366C0
Copied!

Twitter

--color-twitter#1DA1F2
Copied!

Line

--color-line#00BA01
Copied!

Cake

--color-cake#1DAB69
Copied!

Instagram

--color-instagram#FD1389

Article Tag Colors

Copied!

typescript

--color-mdtag-typescript#3574d1
Copied!

vue

--color-mdtag-vue#41B883

Released under the MIT License.