BRAID
Braid Logo
Resources
Releases
Gallery
Playroom
GitHub
Guides
Design Workflow
Development Workflow
Playroom Prototyping
Contribution
Testing Guide
Foundations
Layout
Tones
Iconography
Examples
Job Summary
Basic Form
Marketing Banner
Components
Accordion
Actions
Alert
Autosuggest
Badge
Bleed
Box
Button
ButtonIcon
ButtonLink
Card
Checkbox
Columns
ContentBlock
Dialog
Disclosure
Divider
Drawer
Dropdown
FieldLabel
FieldMessage
Heading
Hidden
HiddenVisually
Inline
List
Loader
MenuItem
MenuItemCheckbox
MenuItemDivider
MenuRenderer
MonthPicker
Notice
OverflowMenu
Page
PageBlock
Pagination
PasswordField
Radio
Deprecated
RadioGroup
Rating
Secondary
Stack
Stepper
Strong
Tabs
Tag
Text
TextDropdown
TextField
TextLink
TextLinkButton
Textarea
Tiles
Toggle
TooltipRenderer
useToast
CSS
atoms
breakpoints
globalHeadingStyle
globalTextStyle
responsiveStyle
vars
Logic
BraidPortal
BraidProvider
BraidTestProvider
Link
ThemeNameConsumer
useBreakpoint
Deprecated
useColor
useResponsiveValue
useSpace
useThemeName
Tones
The usage of colour in the system is designed to have a strong correlation with the tone of voice being used. The system makes available a spectrum of tones which are leveraged across the entire component suite.
critical
caution
positive
neutral
info
promote
critical
Super important. You need to see this.
UI
- High Risk
- High Urgency
- Error
- Failed
- Delete
Messaging
- Critical Message
Status
- Late/Overdue
Graphs
- Trending downward
Time
- Unsatisfactory
Payments
- Overdue
- No Credits Remaining
caution
You should be aware something is happening or mid-way through a process. Could be a risk or an item that needs to be acted upon.
UI
- Low Risk
- Low Urgency
- Pending
- Upcoming
Messaging
- Caution Message
- Draft (label)
Status
- Not Yet Contacted
- Rating
Time
- Below Average
Payments
- Partially Paid
- Credits Expire Soon
- Low Credits
positive
Good vibes & new things! Wants to get the user to act on something or be aware something good happened.
UI
- Success
- Complete
- New Section
- New Segment
- New Message
Messaging
- Positive Message
- Contacted/Sent Message
Status
- New Job
- New Candidate
Graphs
- Trending upward
Time
- Above average
Payments
- Complete
- Credit in Surplus
- Credits Added
neutral
Subtle information or details historic in nature. Often already actioned & in the past. No priority required due to the lack of importance or change.
UI
- Default
- Archived
- History
- Saved/Previously Saved
- Date Created
Messaging
- Read Message
Status
- Expired Job
Graphs
- No Change
info
Guidance & advice. Generally from the UI or business. Functional, calm and non urgent.
UI
- Help
- Updated
- Scheduled
Messaging
- Guidance Message
- Unread
Status
- Updated Resume
- Previously Contacted
Time
- Average
promote
Things we wish to make prominent and give more visibility to. Typically used to highlight features, updates or marketing messages.
UI
- Active
- Beta
Messaging
- Promotional Message
Status
- Be an Early Applicant
- Featured Job (default)
- Follower (of a company)
- May be Approachable
- You're a Strong Applicant
- Recommended Job
- May be a Match
- May be Contactable
Graphs
- Pricing Table Call-out / Recommended
Time
- Highlights
BRAID
Braid Logo