Color System

Updated:: 10/10/2025

A set of colors used to create a consistent look and feel across the application

This is the default Tecton theme, used to create a consistent look across products and applications. The tecton palette is themed through the implementers chosen CSS properties applied to the primitive tokens.

Text Colors

Base color is the applications primary background color. Default is pure white which allows for the started text color to meet AAA WCAG 2.0 standards. A text accessible color is also provided to allow for a lighter contrasting text color to be placed on top of the base color while still meeting WCAG AA standards.

#4d4d4d

--t-text

(77, 77, 77, 0.77)

--t-textA

#6A4A9E

--t-color-text

Programmatic

--t-primary-text

Programmatic

--t-secondary-text

Programmatic

--t-tertiary-text

Base Colors

Base colors are the ground of the user interface-- objects backgrounds should use a base color to properly take advantage of theming.

#FFFFFF

--t-base

#000000

--t-top

#F4F4F4

--t-base-gray

#E8E8E8

--t-base-gray-2

#F0EEF7

--t-base-primary

#E0DEEF

--t-base-primary-2

#E9E4F0

--t-base-hover

Object Border

UI Border is the default border/stroke colors of tectons components and UI elements. Default border colors meet a AA WCAG compliance.

#949494

--t-ui-border

#6C6C6C

--t-ally-gray-color-aaa

#404040

--t-ally-gray-color-aa

Status color

Status or stoplight colors are locked down and delivered to provide universal meaning to status while meeting WCAG 2.0 standards in most use cases. When using these colors try to avoid placing text on top of the colors unless checked by color contrast testers. It’s recommend to use when applying to an icon, header text and status bars on transactions, notifications and messages. Avoid using them on regular sized text. Always use in conjunction with a status icon or text as color alone is not acceptable use of status indication per WCAG guidelines.

#0079C1

--const-stoplight-info

#0E8A00

--const-stoplight-success

#C35500

--const-stoplight-warning

#C30000

--const-stoplight-alert

Transparencies

(255,255,255,0)

--t-base-a0

(255,255,255,0.25)

--t-base-a1

(255,255,255,0.5)

--t-base-a2

(255,255,255,0.75)

--t-base-a3

(13,13,13,0)

--t-top-a0

(13,13,13,0.25)

--t-top-a1

(13,13,13,0.5)

--t-top-a2

(13,13,13,0.75)

--t-top-a3

Brand Primary

Used when emphasizing the brand. Calls attention to otherwise flat designs that do not have any interaction. Text links, buttons, graphical elements, etc.

#35254F

--t-primary-d5

#402C5F

--t-primary-d4

#4A346F

--t-primary-d3

#553B7E

--t-primary-d2

#5F438E

--t-primary-d1

#6A4A9E

--t-primary

#7755AF

--t-primary-l1

#8668B8

--t-primary-l2

#957AC1

--t-primary-l3

#A48DCA

--t-primary-l4

#B4A0D3

--t-primary-l5

Brand Secondary

Used when emphasizing the brand in addition to primary brand colors. Most often used when multiple colors need to used to distinguish from the primary brand color but does not need to involve extensive category based color combinations.

#4D6473

--t-secondary-d5

#5C798A

--t-secondary-d4

#6E8C9E

--t-secondary-d3

#859EAD

--t-secondary-d2

#9CB0DB

--t-secondary-d1

#B3C2CC

--t-secondary

#BAC9D1

--t-secondary-l1

#C2CFD6

--t-secondary-l2

#C9D5DB

--t-secondary-l3

#D1DBE0

--t-secondary-l4

#D9E1E6

--t-secondary-l5

Brand Tertiary

Used when emphasizing the brand in addition to secondary brand colors. Most often used when multiple colors need to used to distinguish from the primary brand color but does not need to involve extensive category based color combinations.

#35254F

--t-tertiary-d5

#402C5F

--t-tertiary-d4

#4A346F

--t-tertiary-d3

#553B7E

--t-tertiary-d2

#5F438E

--t-tertiary-d1

#6A4A9E

--t-tertiary

#7755AF

--t-tertiary-l1

#8668B8

--t-tertiary-l2

#957AC1

--t-tertiary-l3

#A48DCA

--t-tertiary-l4

#B4A0D3

--t-tertiary-l5

Gray Scale

#0D0D0D

--t-gray-1

#1A1A1A

--t-gray-2

#262626

--t-gray-3

#333333

--t-gray-4

#404040

--t-gray-5

#4D4D4D

--t-gray-6

#666666

--t-gray-7

#808080

--t-gray-8

#999999

--t-gray-9

#B3B3B3

--t-gray-10

#CCCCCC

--t-gray-11

#D9D9D9

--t-gray-12

#E6E6E6

--t-gray-13

#F2F2F2

--t-gray-14

Accent Scale

Used when brand color cannot cleanly differentiate colors in enough segmented values. Often used in categories that need to convey meaning across the application. Often used in graphs and charts to help distinguish difference in values.

#E77474

--t-accent-1-l1

#E05252

--t-accent-1

#B62020

--t-accent-1-d1

#E7AD74

--t-accent-2-l1

#E09952

--t-accent-2

#B66B20

--t-accent-2-d1

#E7E774

--t-accent-3-l1

#E0E052

--t-accent-3

#B6B620

--t-accent-3-d1

#ADE774

--t-accent-4-l1

#99E052

--t-accent-4

#6BB620

--t-accent-4-d1

#74E774

--t-accent-5-l1

#52E052

--t-accent-5

#20B620

--t-accent-5-d1

#74E7AD

--t-accent-6-l1

#52E052

--t-accent-6

#20B620

--t-accent-6-d1

#74E7AD

--t-accent-7-l1

#52E099

--t-accent-7

#20B66B

--t-accent-7-d1

#74E7E7

--t-accent-8-l1

#52E0E0

--t-accent-8

#20B6B6

--t-accent-8-d1

#74ADE7

--t-accent-9-l1

#5299E0

--t-accent-9

#206BB6

--t-accent-9-ld1

#7474E7

--t-accent-10-l1

#5252E0

--t-accent-10

#2020B6

--t-accent-10-d1

#E774E7

--t-accent-11-l1

#E052E0

--t-accent-11

#B620B6

--t-accent-11-d1

#E774AD

--t-accent-12-l1

#E05299

--t-accent-12

#B6206B

--t-accent-12-d1