Appearance

Brand foundations

The shared values behind each component. Review the system in light and charcoal dark.

Brand colors

Blue

#0866FF

Red

#D40000

Navy

#03256C

Ink

#131B23

Gold

#FED766

Semantic surfaces

Components use roles, so the same implementation adapts to either appearance.

Light

canvas

#F7F8FA

surface

#FFFFFF

raised

#FFFFFF

hover

#F6F7F9

selected

#ECEEF1

text

#131B23

heading

#03256C

muted

#526075

line

#E4E6EA

border

#637086

link

#03256C

link-hover

#A80000

focus

#03256C

focus-inner

#FFFFFF

accent

#D40000

action-text

#FFFFFF

action-border

#A80000

disabled-surface

#F0F2F5

disabled-text

#6B727E

info

#03256C

info-surface

#F1F5FC

info-border

#03256C

success

#23633F

success-surface

#EAF5EF

success-border

#23633F

warning

#805500

warning-surface

#FFF4D6

warning-border

#805500

error

#B42318

error-surface

#FFF0EF

error-border

#B42318

code-surface

#171717

code-text

#FFFFFF

code-muted

#B4B4B4

selection

#D9E8FB

selection-text

#131B23

scrollbar

#637086

scrollbar-track

#F7F8FA

content

#131B23

primary

#D40000

primary-hover

#A80000

on-primary

#FFFFFF

overlay

#001333

Dark

canvas

#171717

surface

#202020

raised

#292929

hover

#303030

selected

#383838

text

#FFFFFF

heading

#FFFFFF

muted

#B4B4B4

line

#3D3D3D

border

#858585

link

#8DC7FF

link-hover

#B8DEFF

focus

#FFFFFF

focus-inner

#202020

accent

#FF9F99

action-text

#FFFFFF

action-border

#EF817A

disabled-surface

#242424

disabled-text

#9A9A9A

info

#8DC7FF

info-surface

#1D2D3D

info-border

#8DC7FF

success

#8DDBA9

success-surface

#183323

success-border

#8DDBA9

warning

#FED766

warning-surface

#3A2E12

warning-border

#FED766

error

#FFAEA8

error-surface

#3D2020

error-border

#FFAEA8

code-surface

#171717

code-text

#FFFFFF

code-muted

#B4B4B4

selection

#383838

selection-text

#FFFFFF

scrollbar

#858585

scrollbar-track

#171717

content

#FFFFFF

primary

#D40000

primary-hover

#A80000

on-primary

#FFFFFF

overlay

#000000

Typography

Montserrat carries the public interface.

A clear first thought.

Room for a second thought.

And all the useful details.

Body copy stays comfortable, with a clear hierarchy and enough line height to read naturally.

The docs self-host Montserrat under SIL OFL. Native examples use their platform font until the host loads a licensed font. The commercial Eurostile display font is not redistributed.

Montserrat license

Display

32px phone / 56px wide · 1.15 line height · 400 weight

Page title

28px phone / 40px wide · 1.2 line height · 700 weight

Section title

24px phone / 28px wide · 1.3 line height · 700 weight

Body

16px phone / 18px wide · 1.6 line height · 400 weight

Action / label

16px phone / 16px wide · 1.4 line height · 700 weight

Supporting

14px phone / 14px wide · 1.5 line height · 500 weight

Layout and motion

1200px page · 720px reading · 16/24/32px gutters · 640/960px layout breakpoints.

140ms feedback. Disable transitions and nonessential animation.

Accessibility, states, and interaction contract

Space and shape

4 px

8 px

12 px

16 px

24 px

32 px

48 px

64 px

Control radius 4px · Panel radius 12px · Touch target at least 44px.

Source and rights

Foundations are pinned from Brand Studio brand release 1.0.0 and interface system 0.5.0. Reviewing a proposed change here does not approve or edit the Studio source.

The software is MIT. Bubba’s names and logo geometry have separate rights and grant no trademark license. No mascot artwork or commercial font binary is included.

Public asset notice

Foundation SHA256 6519085b9a56c315f7f2994f562ed6c0d7c0d260f05c687cd47f38020a37cd77 Source commit 31be2db4c6626f5a48d871d6a7a27bac8b7a04b9