Avicado Construction Technology Services, LLC

brand Colors

Figma: color/brand/green-dark
TW: green-dark
#003316
Figma: color/brand/green
TW: green
#42A236
Figma: color/brand/green-light
TW: green-light
#DCE58A
Figma: color/brand/orange
TW: orange
#FFAC00
Figma: color/brand/tan
TW: tan
#F3EDE3

grayscale Colors

Figma: color/grayscale/100
TW: gray-100
#272727
Figma: color/grayscale/80
TW: gray-80
#455A53
Figma: color/grayscale/60
TW: gray-60
#76817B
Figma: color/grayscale/40
TW: gray-40
#A4AEA9
Figma: color/grayscale/20
TW: gray-20
#E1E9E4
Figma: color/grayscale/0
TW: gray-0
#FFFFFF

semantic Colors

Figma: text/text-primary
TW: text-primary
#003316
Figma: text/text-secondary
TW: text-secondary
#455A53
Figma: border/border-dark
TW: border-dark
#386033

Usage Notes

  • All colors support opacity modifiers: bg-green-dark/50
  • Border classes: border border-dark (dark=#386033)
  • Text variants: text-primary (green-dark)
  • Backgrounds: bg-invert maps to gray-100

Default Headings

h1 - text looks like this

h2 - text looks like this

H3 - text looks like thisyle

H4 - text looks like this

H5 - text looks like this
H6 - text looks like this

p - text looks like this

p b - text looks like this

p link - text looks like this

p - text looks like this

p b - text looks like this

p link - text looks like this

p - text looks like this

p b - text looks like this

p link - text looks like this

Prose Context Headings

H1 - Prose Style

H2 - Prose Style

H3 - Prose Style

H4 - Prose Style

H5 - Prose Style
H6 - Prose Style

Custom Heading Variations

H1 Custom Variation (Extra Large)

H2 Custom Variation (Extra Large)

H3 Custom Variation (Larger than Default)

H4 Custom Variation

H5 Custom Variation
H6 Custom Variation

This section demonstrates how you can override the default sizes with Tailwind classes to fit unique design needs.

Mixed Content Example

Article Title (H1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Section Heading (H2)

Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.

Subsection Heading (H3)

Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper.

Buttons