Gravital Digital Logo
FONTS

font-logo: Myriad Pro

font-sans: Interstate Condensed

font-sans font-medium (500) text-base
font-sans font-medium (500) text-2xl
font-sans font-bold (700) text-3xl
font-sans font-bold (700) text-4xl
font-sans font-black (900) text-5xl

font-serif: FF Meta Serif Pro

font-serif font-book (500) text-base
font-serif font-book (500) text-2xl italic
font-serif font-bold (700) text-3xl
font-serif font-bold (700) text-4xl italic
font-serif font-bold (700) text-5xl

font-body: Open Sans

font-body font-normal (400) text-base
font-body font-normal (400) text-2xl italic
font-body font-bold (700) text-3xl
font-body font-bold (700) text-4xl italic
font-body font-bold (700) text-5xl

font-mono: Base Mono Wide

font-mono font-normal (400) text-base tracking-tight
font-mono font-normal (400) text-2xl tracking-tight
font-mono font-normal (400) text-3xl; tracking-tight
font-mono font-normal (400) text-4xl tracking-tight
font-mono font-normal (400) text-5xl tracking-tight
Neutrals

These are the colors are used the most and will make up the majority of your UI. We use them for most of our text, backgrounds, and borders, as well as for things like secondary buttons and links.

Slate-[number]
50
#F8FAFC
100
#F1F5F9
200
#E2E8F0
300
#CBD5E1
400
#94A3B8
500
#64748B
600
#475569
700
#334155
800
#1E293B
900
#0F172A

Section Container 1. Full-width on mobile, constrained with padded content above. "max-w-7xl mx-auto sm:px-6 lg:px-8" NOTE: Added py-12'

Amber Primary

These are the splashes of color that appear the most in our UI, and are the ones that determine the overall "look" of the site. We use these for things like primary actions, links, navigation items, icons, accent borders, or text we want to emphasize.

Amber-[number]
50
#FFFBEB
100
#FEF3C7
200
#FDE68A
300
#FCD34D
400
#FBBF24
500
#F59E0B
600
#D97706
700
#A16B45309207
800
#92400E
900
#78350F

Section Container 2. Constrained with padded content. "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" NOTE: Added py-12.

Blue Primary

These are the splashes of color that appear the most in our UI, and are the ones that determine the overall "look" of the site. We use these for things like primary actions, links, navigation items, icons, accent borders, or text we want to emphasize.

Sky-[number]
50
#F0F9FF
100
#E0F2FE
200
#BAE6FD
300
#7DD3FC
400
#38BDF8
500
#0EA5E9
600
#0284C7
700
#0369A1
800
#075985
900
#0C4A6E

Section Container 3. Full-width on mobile, constrained to breakpoint with padded content above mobile. This keeps everything to the same width at each breakpoint vs. smoothly increasing and decreasing the size of elements enclosed by the container. "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" NOTE: Added pt-12.

Supporting Reds

These colors are used fairly conservatively throughout our UI to avoid overpowering our primary colors. We use them when we need an element to stand out, or to reinforce things like error states or positive trends with the appropriate semantic color.

Red-[number]
50
#FEF2F2
100
#FEE2E2
200
#FECACA
300
#FCA5A5
400
#F87171
500
#EF4444
600
#DC2626
700
#B91C1C
800
#991B1B
900
#7F1D1D

Section Container 4. Constrained to breakpoint with padded content. See notes above. Just adds padding to mobile. "container mx-auto px-4 sm:px-6 lg:px-8" NOTE: Added py-12

Supporting Purples

These colors are used fairly conservatively throughout our UI to avoid overpowering our primary colors. We use them when we need an element to stand out, or to reinforce things like error states or positive trends with the appropriate semantic color.

Purple-[number]
50
#FAF5FF
100
#F3E8FF
200
#E9D5FF
300
#D8B4FE
400
#C084FC
500
#A855F7
600
#9333EA
700
#7E22CE
800
#6B21A8
900
#581C87

Section Container 5. Narrow constrained with padded content. Not a container, so goes down to mobile smoothly from what looks like iPad size "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" NOTE: Added py-12