Amara styleguide

• Global
  • Color palette
  • Typography
  • Lists
  • Definition Lists
  • Tables
  • Dropdown menus
• Layout
  • General Layout
  • Utility classes
  • Tabs
  • Multi-step Pane
• Buttons
  • Tags
  • Options
  • Split Buttons
• Iconography
  • Icons
  • Avatars
  • Step lists
• Forms
  • Forms
  • Fields
  • Checkboxes and Radios
  • Switches
  • multiField
  • Fieldsets
  • Settings page forms
  • Field errors
  • File Uploads
  • Image Uploads
  • Compound fields
  • ButtonField
  • Searchbar
  • Selects
  • Table select
  • Preset or custom
  • Dynamic Help Text
• Modals / Dialogs
  • Modal dialogs
  • Language Switcher
• Containers
  • Content header
  • Filter Box
  • Content footer
  • List View
  • Selection group
  • Accordion
  • Dynamic Formset
  • Dynamic Formset (alternate)
• Elements
  • Alerts
  • Announcements
  • Video cards
  • Video subtitles list
  • Filters
  • Check All
  • Search results / Select List
  • Pagination
  • Constrained content
  • Assignment history table
  • Workflow diagram
  • Zero states
  • Progress bars
  • Date input/display
  • Navbar
  • Checkout table
• Utility Classes
  • Text center
  • Block center
  • Block wrap
  • Video thumbnails

Color palette

Neutrals & Overlays - Text, backgrounds, panels, form controls, Illustrations

• $Text
  #2E262C
• $Grey100
  #9fa0a1
• $Grey300
  #f8f4f7
• $Grey400
  #E9E0E7

• $Grey500
  #E5D8E0
• $Grey600
  #CEBDC9
• $Grey700
  #C6B0C0
• $Grey800
  #BDA4B6

• $Grey900
  #93778B

Primary - "Teal" Call To Action, Nav elements emphasize, etc...

• $Primary
  #008575
• $Primary050
  #e5fdf8
• $Primary100
  #d7fff7
• $Primary300
  #ACD5CA

• $Primary400
  #59AA95
• $Primary500
  #30957B
• $Primary700
  #007c6e
• $Primary900
  #184B3E

Accent - Branding purple ("Plum"). These colors can be used to distinguish elements between them such as tags.

• $Accent
  #542A46
• $Accent100
  #FCF7FA
• $Accent200
  #EFE9ED
• $Accent300
  #FAE0FA

• $Accent400
  #F5C2F5
• $Accent500
  #F5C2F5
• $Accent600
  #9C7D91
• $Accent700
  #8C687E

• $Accent800
  #7B526C
• $Accent900
  #6B3D59

Semantics Colors - help identify status, see actions, locate help, and understand next steps. Positive : success, eye grabbing...

Success

• $Success
  #99CA65
• $Success100
  #F2F8EC
• $Success300
  #D9EBC5
• $Success400
  #8DC451

• $Success500
  #80BD3E
• $Success700
  #405F1F
• $Success900
  #263913

Info

• $Info
  #008793
• $Info100
  #C7F9ED
• $Info300
  #92F4E4
• $Info400
  #59DED3

• $Info500
  #008793
• $Info700
  #004F69
• $Info900
  #002946

Warning

• $Warning
  #F18950
• $Warning100
  #FBF5C9
• $Warning300
  #F8EA94
• $Warning400
  #F4A173

• $Warning500
  #B9777C
• $Warning700
  #935156
• $Warning900
  #3D1214

Negative : Error, permanent removal

• $Error
  #F15068
• $Error100
  #FFECEF
• $Error300
  #FBCBD2
• $Error400
  #F8A8B4

• $Error500
  #F47386
• $Error700
  #A73344
• $Error900
  #691622

Neon : catchy - use carefully!

• $NeonPink
  #FB04A4
• $DarkModeBG
  #592647
• $NeonCTA
  #00ffe4
• $NeonWarning
  #fd4d00

• $NeonDanger
  #f15068
• $NeonPurpleLight
  #d950f1

Old variables

• Plum
  #5a2747
• Teal
  #30957b
• Amaranth
  #f3254d
• Lime
  #80bd3e

• Charcoal
  #222626
• Gray
  #9fa0a1
• Snow
  #f3f4f6
• Cream
  #fffdf8

---

Using colors

• Use the `.bg-[color]` class to set the background color
• Use the `.text-[color]` class to set the text color
• Use [color]-light or [color]-dark to get a lighter/darker version of a color