Skip to content

Color System

Brand Color

The brand color palette of TriPress is anchored by sky blue as its primary hue, complemented by a vibrant orange that conveys fervor and intensity, and a cool purple that underscores calmness and composure, from which a nine-tier chromatic scale is derived.

TriPress 品牌视觉体系以天空蓝为核心主色,辅以表现热烈张力的橙色与传递冷静质感的紫色作为品牌辅色,并在此基础上构建包含九个层级的色阶系统。

primary
#71afdd
accent-warm
#e69d65
accent-cold
#8279d2
primary-50
#eaf3fa
primary-100
#cae1f2
primary-200
#a0cae8
primary-300
#71afdd
primary-400
#4697d3
primary-500
#2c7db9
primary-600
#236494
primary-700
#1c4e73
primary-800
#143852
accent-warm-50
#fbf1e9
accent-warm-100
#f6dbc6
accent-warm-200
#efbf9a
accent-warm-300
#e69d65
accent-warm-400
#df813a
accent-warm-500
#c56820
accent-warm-600
#9e531a
accent-warm-700
#7b4114
accent-warm-800
#582e0e
accent-cold-50
#edecf9
accent-cold-100
#d1cdee
accent-cold-200
#ada7e2
accent-cold-300
#8279d2
accent-cold-400
#5e53c6
accent-cold-500
#4539ac
accent-cold-600
#372e8a
accent-cold-700
#2b246b
accent-cold-800
#1f194d

Foundational Color

Concurrently, foundational colors have been designated for the display of primary elements, including text and backgrounds, with the deliberate aim of ensuring maximum visual prominence and legibility.

同时,另设基础色,专用于文字、背景等核心视觉元素的呈现,以确保视觉层次清晰、信息传达醒目有力。

neutral-25
#f9fafb
neutral-50
#f3f4f7
neutral-100
#eaedf0
neutral-200
#d8dde4
neutral-300
#bdc5d1
neutral-400
#99a5b8
neutral-500
#74859f
neutral-600
#58677e
neutral-700
#3f4a5a
neutral-800
#222831
neutral-900
#13161b

Background

Background 1

Light

Default element background

#FFFFFF

white

Background 2

Light

Secondary background

#f3f4f7

neutral-50

Background 1

Dark

Default element background

#13161b

neutral-900

Background 2

Dark

Secondary background

#222831

neutral-800

Text

Text 1

Light

Primary text, headings

#222831

neutral-800

Text 2

Light

Secondary text, captions

#58677e

neutral-600

Text 3

Light

Placeholder, disabled

#99a5b8

neutral-400

Text 1

Dark

Primary text, headings

#eaedf0

neutral-100

Text 2

Dark

Secondary text, captions

#99a5b8

neutral-400

Text 3

Dark

Placeholder, disabled

#58677e

neutral-600

Structure

Input

Light

Input fields, sunken area background

#f9fafb

neutral-25

Border 1

Light

Default border, divider

#d8dde4

neutral-200

Border 2

Light

Emphasized border, input hover

#bdc5d1

neutral-300

List Hover

Light

List item, menu item hover background

#eaedf0

neutral-100

Input

Dark

Input fields, sunken area background

#13161b

neutral-900

Border 1

Dark

Default border, divider

#3f4a5a

neutral-700

Border 2

Dark

Emphasized border, input hover

#58677e

neutral-600

List Hover

Dark

List item, menu item hover background

#222831

neutral-800

Semantic Color

Furthermore, three functional semantic colors are derived from the core primary hue, respectively applied to status feedback and informational prompts across various contexts. Among them, the "Info" indicator is directly represented by the brand's primary color, as it carries no inherent emotional bias and thus naturally aligns with the brand's core chromatic identity.

此外,基于核心主色衍生出三种功能性语义色,分别用于不同场景下的状态反馈与信息提示;其中,信息提示「Info」直接由品牌主色承担,因其本身不带有情绪倾向,与品牌核心色调天然契合。

Success
success-bg
#e6f5ee
success
#3fa97a
success-text
#1e6b4c
Warning
warning-bg
#fbf1de
warning
#e0a23c
warning-text
#96620f
Danger
danger-bg
#faeaea
danger
#d95d5d
danger-text
#a83232
Info
info-bg
#eaf3fa
info
#71afdd
info-text
#236494