OpenAI品牌手冊介紹

11Introduction

strategy

IntroductionBrandvalues

Gravitas

Intentional,solid,firm.

precision

clarified,Exact,orderly

Approachable

open,optimistic,warm.

Allure

unexpected,Delightful,Mysterious.

Bold

Innovative,Groundbreaking,Novel.

Introduction

2.2

Logo

Logomark

2.3

Logo

Logotype

2.4

LOCKUP

2.5

clearance

color

openAl

whiteBlack

color

openAl

Red700

openAl

Green600

Blue600

27

Logo

Minimumsizes

openAlMenu

openAl

118px

2.8

Logo

placement

openAlopenAl

ope

penAl

nAlO

penA

Avatar

whattoavoid

enai

openAi

penA

openAi

31color

Introduction

3.2color

primary

white

#FFFFFFP---

3.3color

secondary

Red

#FF4500P---

Green

#51DA4CP---

3.4color

Tertiary

yellow

#FFF639P---

Magenta

#FF45FFP---

cyan

#OOFFFFP---

3.5color

supplemental

orange

#FE7600P---

Gray

color

shades(primary)

gray-700

gray-600

gray-400

gray-300

gray-200

gray-500

#A8A8A8

#E5E5E5

F5F5F5

#747474

#FFB7A4

#CDCDCD

gray-100

#FAFAFA

gray-000

#FFFFFF

3.6color

shades(secondary)

Red

red-7o0

red-500

red-600

red-400

red-300

red-100

red-200

#FF4500

#FF9574

#FF6E3C

#FFD3C9

#FFB7A4

#FFEDEB

#FFEODB

red-o50

#FFF7F6

color

shades(secondary)

green-500

green-600

green-300

green-200

green-400

7CF178

#51DA4C

#cgFFC7

#DgFFD8

#A6FFA3

color

shades(secondary)

blue-300

blue-400

blue-200

#AFC1FF

#7989FF

#CBDCFF

3.6color

shades(Tertiary)

yellow

yellow-700

yellow-500

yellow-600

yellow-300

yellow-200

yellow-100

yellow-050

yellow-400

#A19A3A

#F5E6OD

#CFC52C

#FFFF66

#FFFFB6

#FFFF8F

#FFFFDB

#FFF639

Magenta

color

shades(Tertiary)

mangenta-500

mangenta-600

mangenta-300

mangenta-200

mangenta-100

mangenta-400

#FFC1FF

#FFF2FF

#FFOOFF

#FF45FF

#FFD7FF

#FF8BFF

mangenta-050

#FFFgFF

cyan

color

shades(Tertiary)

cyan-700

cyan-500

cyan-600

cyan-300

cyan-200

cyan-100

cyan-050

cyan-400

#00E7E7

#B3FFFF

#00FFFF

#EOFFFF

#FOFFFF

#42FFFF

#CAFFFF

#82FFFF

color

shades(supplemental)

orange-700

orange-500

orange-600

orange-300

orange-200

orange-400

#C45600

#FFA045

#FE7600

#FFE8C1

#FFF1D6

#FFC98A

color

shades(supplemental)

violet-500

violet-600

violet-300

violet-200

violet-400

#D292FF

#FCDAFF

#FEE6FF

#B161FD

#EBBBFF

3.6color

shades(supplemental)

Brown

brown-500

brown-300

brown-200

brown-100

brown-o50

brown-400

#B67252

#E1B59F

#E8C7B6

#FODACF

#F7ECE6

#CB9379

3.7color

colorcontrast

Aa

Aa

Aa

Aa

3.7color

colorcontrast

3.8color

light-red

light-brown

light-orange

light-yellow

light-green

light-cyan

light-blue

light-violet

light-magenta

light-gray

dark-red

dark-brown

dark-orange

dark-yellow

dark-green

dark-cyan

dark-blue

dark-violet

dark-magenta

dark-gray

Themes

mid-red

mid-brown

mid-orange

mid-yellow

mid-green

mid-cyan

mid-blue

mid-violet

mid-magenta

mid-gray

3.8color

Themes

Neutral

Light

gray-900

gray-000

Mid

gray-900

gray-600

Dark

gray-000

gray-900

3.8color

Themes

Red

Light

blue-600

red-200

Mid

gray-900

red-700

Dark

blue-300

red-900

3.8color

Themes

Green

Light

magenta-700

green-200

Mid

gray-900

green-600

Dark

magenta-400

green-900

3.8color

Themes

Blue

Light

yellow-900

blue-100

Mid

gray-000

blue-600

Dark

yellow-400

blue-900

3.8color

Themes

cyan

Light

orange-800

cyan-200

Mid

gray-900

cyan-600

Dark

orange-400

cyan-900

3.8color

Themes

Magenta

Light

green-800

magenta-100

Mid

gray-900

magenta-500

Dark

green-600

magenta-900

3.8color

Themes

yellow

Light

blue-600

yellow-100

Mid

gray-900

yellow-400

Dark

blue-100

yellow-900

3.8color

Themes

orange

Light

blue-600

orange-200

Mid

blue-700

orange-600

Dark

blue-100

orange-900

3.8color

Themes

violet

Light

green-800

violet-200

Mid

green-400

violet-700

Dark

green-500

violet-900

3.8color

Themes

Brown

Light

blue-600

brown-200

Mid

blue-100

brown-600

Dark

blue-300

brown-900

3.8color

products

openAl

openAlResearchv

safetycompanyv

searchLogin7

4.1Typography

Introduction

4.2Typography

serif

4.2

Typography

serif:line-height

4.2

Typography

serif:scale

styleTypesizeLine-heightLetter-spacingkernsetting

4.3Typography

sans-serif

4.3

Typography

sans-serif:line-height

4.3

Typography

sans-serif:scale

styleTypesizeLine-heightLetter-spacingkernsetting

4.3

Typography

sans-serif:scale

styleTypesizeLine-heightLetter-spacingkernsetting

4.4

Typography

weights

4.5

Typography

whattoavoid

5.1lconography

Introduction

5.4Iconographyscale

S?hneBuch12→

S?hneBuch13→S?hneBuch14→

S?hneBuch15→

S?hneBuch16→

S?hneBuch18→

S?hneBuch21→

S?hneBuch24→

S?hneBuch28→

S?hneBuch32→

S?hneBuch36→

S?hneBuch42→

S?hneBuch48→

S?hneBuch54

S?hneBuch60→

S?hneBuch72→

sihnekr?ftig1t3→

sihnekr?ftig14→

sihnekr?ftig15→sihnekr?ftig16→

sihnekr?ftig18→

sihnekr?ftig21→

sihnekr?ftig48

sihnekr?ftig54

5.5IconographyAlignment

>

>

Iconography

style

Miteredcaps

usemiterjoinsforcorners.

usebuttedcapsforstrokeendings.

5.6IconographyLibrary

arrow-northeast

+

chevron-upwards

arrow-upwards

>

chevron-rightwards

arrow-rightwards

chevron-downwards

↓

arrow-downwards

<

chevron-leftwards

arrow-leftwards

filter

Q

information

minus

plus

search

Iconography

Library

checkbox-unselected

pause

checkbox-selected

loading

radio-unselected

checkmark

radio-selected

play

6.1photography

Introduction

photography

color

photography

color:do's

photography

color:dont's

photography

composition

photography

composition:do's

photography

composition:dont's

photography

Elements

photography

Elements:do's

photography

Elements:dont's

photography

Lightandshadow

photography

Lightandshadow:do's

photography

Lightandshadow:dont's

photography

Algenerated

71Datavisualization

Introduction

7.2Datavisualization

Gridlinesandmarkers

Lineweightcolor

7.3Datavisualization

columncharttitlesubtitlegoeshere

32

32

LabelLabelLabelLabelLabelLabelLabel

source:Aliquamauctornisivitaequamtinciduntidauctorloremfringilla.

spacing

24

24

e8Dataset1

4

8Dataset2

4

8Dataset3

4

8Dataset4

4

o8Dataset5

columncharttitlesubtitlegoeshere

00

4

00

4

LabelLabelLabelLabelLabelLabelLabel

source:Aliquamauctornisivitaequamtinciduntidauctorloremfringilla.

24

24

7.3Datavisualization

32

24minimum

Barcharttitle

subtitlegoeshere

Label

Label

Label

Label

Label

Label

Label

source:Aliquamauctornisivitaequamtinciduntidauctorloremfringilla.

spacing

Barcharttitle

subtitlegoeshere

Label

Label

Label

Label24

Label

Label

Label

00

4

source:Aliquamauctornisivitaequamtinciduntidauctorloremfringilla.

7.4Datavisualization

primarycolors

green-600

gray-600

gray-500

gray-400

gray-300

gray-200

gray-100

7.5Datavisualization

secondarycolors

yellow-400

magenta-500

cyan-600

Datavisualization

secondarycolors

yellow-400

yellow-200

yellow-100

Megentashadesandtints

Datavisualization

secondarycolors

magenta-500

magenta-200

magenta-100

cyanshadesandtints

Datavisualizationsecondarycolors

cyan-600

cyan-200

cyan-100

7.6Datavisualization

Tertiarycolors

orange-600

orangeshadesandtints

DatavisualizationTertiarycolors

orange-600

orange-200

orange-100

7.6Datavisualization

Tertiarycolors

violetshadesandtints

violet-200

violet-100

7.6Datavisualization

Tertiarycolors

Brownshadesandtints

brown-200

brown-100

77Datavisualization

Lineswithmarkers

Lines

Lines

red-700

green-600

blue-600

gray-900

gray-600

gray-400

yellow-400

magenta-500

cyan-600

orange-600

violet-700

brown-600

77Datavisualization

Lines:withfil

Lineswithfill

Line:red-700/fill:red-700,10%opacity

Line:yellow-400/fill:yellow-400,10%opacity

Line:green-600/fill:green-600,10%opacity

Line:magenta-700/fil:magenta-700,10%opacity

Line:blue-600/fill:blue-600,10%opacity

Line:cyan-600/fill:cyan-600,10%opacity

Line:gray-900/fill:gray-900,10%opacity

Line:orange-600/fil:orange-600,10%opacity

Line:gray-600/fill:gray-600,10%opacity

Line:violet-700/fill:violet-700,10%opacity

Line:gray-400/fil:gray-400,10%opacity

Line:brown-600/fill:brown-600,10%opacity

7.8Datavisualization

columncharttitlesubtitlegoeshere

LabelLabelLabelLabelLabelLabelLabel

source:Aliquamauctornisivitaequamtinciduntidauctorloremfringilla.

Barandcolumncharts

Barcharttitle

subtitlegoeshere

Label

Label

Label

Label

Label

Label

Label

source:Aliquamauctornisivitaequamtinciduntidauctorloremfringilla.

7.8Datavisualization

Dataset1

Multiplecolumncharttitlesubtitlegoeshere

LabelLabelLabel

source:Aliquamauctornisivitaequamtinciduntidauctorloremfringil