Colors
定義品牌識別與狀態溝通的色彩系統。
Brand Colors
Primary 1
--color-primary-1#f4b936Primary 2
--color-primary-2#d8a72bPrimary 3
--color-primary-3#b99436Primary soft
--color-primary-softrgb(185 148 54 / 16%)Adorn
--color-adorn#bd34feSpectrum(稜鏡)
Opshell 的 P 是穿過三稜鏡的那道光。品牌的琥珀→紫漸層攤開成六個色,每個分類拿一個: 首頁稜鏡的光、時間軸的圓點、文章標題下那一小段都是同一個顏色。 光譜色只畫線、點、光線,不當小字的顏色(琥珀對白底不到 2 : 1)。
Amber
--pr-amber#F4B936Orange
--pr-orange#F08A24Coral
--pr-coral#EC5B4BMagenta
--pr-magenta#D6409FViolet
--pr-violet#BD34FEIndigo
--pr-indigo#7B61FFNight Sky(深色模式)
深色模式的底色帶一點紫,像 O 裡面那片夜空。淺色模式的品牌橘加深一階,當字才有 4.6 : 1。
Night bg
--vp-c-bg#FFFNight alt
--vp-c-bg-alt#F6F6F7Night soft
--vp-c-bg-soft#F6F6F7Night divider
--vp-c-divider#E2E2E3Brand text
--vp-c-brand-1#B4600AGray Colors
gray-000
--color-gray-000#FFFgray-050
--color-gray-050#F7F7F7gray-100
--color-gray-100#ECECECgray-200
--color-gray-200#D8D8D8gray-300
--color-gray-300#C4C4C4gray-400
--color-gray-400#A8A8A8gray-500
--color-gray-500#8C8C8Cgray-600
--color-gray-600#6A6A6Agray-700
--color-gray-700#404040gray-800
--color-gray-800#262626gray-900
--color-gray-900#000Status Colors
Success
--color-success#03A61CWarning
--color-warning#FAAD14Error
--color-error#F23005Info
--color-info#1890FFCommunity Colors
--color-facebook#3b5998--color-linkedin#1366C0--color-twitter#1DA1F2Line
--color-line#00BA01Cake
--color-cake#1DAB69--color-instagram#FD1389Article Tag Colors
typescript
--color-mdtag-typescript#3574d1vue
--color-mdtag-vue#41B883
