Braintrust AIR

Braintrust AIR

Preview image. Unlock full-res

Future-forward AI Workspace

Industryai
Palette
#0e0e11
#ffffff
#353535
#141417
#1d1d1f
#666666
#ffdad2
#9370e9
#4167e9

Braintrust AIR evokes a 'Future-forward AI Workspace' aesthetic with a stark monochrome palette punctuated by a single vibrant accent. Layouts are spacious, utilizing ample whitespace to create a refined feel. Typography is precise and impactful, balancing boldness with understated elegance. Components maintain a light, often borderless appearance, suggesting functionality without heavy visual weight. Use Midnight Ink (#0e0e11) as the primary text color on Canvas White (#ffffff) backgrounds, achieving AAA contrast. Apply 100px border-radius to all filled buttons for a distinct pill shape. Ensure headings use Graphik with negative letter spacing, such as -0.0250em for larger sizes (100px, 26px) and -0.0150em for medium sizes (36px, 20px). Employ Peach Halo (#ffdad2) as a subtle background tint for sections or cards to introduce gentle variations without strong color. Maintain generous vertical spacing between sections, using a 24px sectionGap as a baseline for comfort and visual separation. Utilize transparent backgrounds and 0px border-radius for default body cards to emphasize content over container styling. Pair any gradients with a dominant hue (e.g., #9370e9 for Cosmic Gradient Hue, #4167e9 for Plasma Gradient Hue) for consistent color branding. Use Braintrust AIR's gradient as a full-bleed hero background, or as an accent for attention-grabbing elements, ensuring it spans the entire section to create visual impact. Avoid using highly saturated colors for backgrounds or large text blocks; the system relies on a mostly achromatic pallet. Do not introduce strong box-shadows or heavy borders on cards; the system prefers subtle elevation or transparency. Refrain from using varied letter-spacing on small body text, as this system mostly applies tracking to headings or specific UI elements. Do not deviate from the 100px button radius for primary actions, as it is a core identity element. Do not apply 2px solid borders indiscriminately; it is used specifically by the existing component. Favor transparency or subtle background changes for separation. Avoid mixing Graphik with other sans-serif fonts beyond the specified Inter for specific callouts; stick to the core type family. Do not use generic gray values; always refer to the established neutral color tokens (e.g., Slate Gray, Ash Gray) for consistency.

More like this