AI token editor
Edit Brex tokens
Describe what you want to change in plain English. Claude rewrites only the tokens you mention and leaves the rest alone. Download the modified CSS / JSON when you're happy.
Try:
Anonymous: 3/hr · Members: 30/hr.
Current
{
"brex": {
"color": {
"primary": {
"$type": "color",
"$value": "#FF5500",
"$description": "Primary brand color for CTAs, links, and accents"
},
"primary-hover": {
"$type": "color",
"$value": "#E64D00",
"$description": "Hover state for primary color"
},
"dark": {
"$type": "color",
"$value": "#0A1929",
"$description": "Dark navy for text and dark section backgrounds"
},
"black": {
"$type": "color",
"$value": "#000000",
"$description": "Pure black for logos and icons"
},
"white": {
"$type": "color",
"$value": "#FFFFFF",
"$description": "White for backgrounds and text on dark"
},
"gray": {
"50": {
"$type": "color",
"$value": "#F9FAFB",
"$description": "Lightest gray for subtle backgrounds"
},
"100": {
"$type": "color",
"$value": "#F7F7F7",
"$description": "Page and card backgrounds"
},
"200": {
"$type": "color",
"$value": "#E5E7EB",
"$description": "Borders and dividers"
},
"300": {
"$type": "color",
"$value": "#D1D5DB",
"$description": "Darker borders"
},
"400": {
"$type": "color",
"$value": "#9CA3AF",
"$description": "Placeholder text and disabled states"
},
"500": {
"$type": "color",
"$value": "#6B7280",
"$description": "Secondary text"
},
"600": {
"$type": "color",
"$value": "#6B7280",
"$description": "Secondary text and descriptions"
},
"700": {
"$type": "color",
"$value": "#374151",
"$description": "Body text"
},
"800": {
"$type": "color",
"$value": "#1F2937",
"$description": "Dark text"
},
"900": {
"$type": "color",
"$value": "#111827",
"$description": "Headings and primary text"
}
},
"teal": {
"500": {
"$type": "color",
"$value": "#14B8A6",
"$description": "Teal accent for progress bars and success states"
},
"600": {
"$type": "color",
"$value": "#0D9488",
"$description": "Darker teal for hover states"
}
}
},
"font": {
"family": {
"sans": {
"$type": "fontFamily",
"$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
"$description": "Primary sans-serif font stack"
},
"mono": {
"$type": "fontFamily",
"$value": "\"SF Mono\", Monaco, \"Cascadia Code\", monospace",
"$description": "Monospace font for data labels"
}
},
"size": {
"xs": {
"$type": "dimension",
"$value": "12px",
"$description": "Extra small text"
},
"sm": {
"$type": "dimension",
"$value": "14px",
"$description": "Small text, labels, captions"
},
"base": {
"$type": "dimension",
"$value": "16px",
"$description": "Default body text"
},
"lg": {
"$type": "dimension",
"$value": "18px",
"$description": "Large body text"
},
"xl": {
"$type": "dimension",
"$value": "20px",
"$description": "Extra large body text"
},
"2xl": {
"$type": "dimension",
"$value": "24px",
"$description": "Subheadings"
},
"3xl": {
"$type": "dimension",
"$value": "30px",
"$description": "Medium headings"
},
"4xl": {
"$type": "dimension",
"$value": "36px",
"$description": "Large headings"
},
"5xl": {
"$type": "dimension",
"$value": "48px",
"$description": "Page titles"
},
"6xl": {
"$type": "dimension",
"$value": "64px",
"$description": "Section headlines"
},
"7xl": {
"$type": "dimension",
"$value": "72px",
"$description": "Large display headlines"
},
"8xl": {
"$type": "dimension",
"$value": "96px",
"$description": "Hero display headlines"
}
},
"weight": {
"normal": {
"$type": "fontWeight",
"$value": "400",
"$description": "Normal weight for body text"
},
"medium": {
"$type": "fontWeight",
"$value": "500",
"$description": "Medium weight for labels and emphasis"
},
"semibold": {
"$type": "fontWeight",
"$value": "600",
"$description": "Semibold weight"
},
"bold": {
"$type": "fontWeight",
"$value": "700",
"$description": "Bold weight for headings"
}
},
"lineHeight": {
"tight": {
"$type": "number",
"$value": "1.1",
"$description": "Tight line height for large display text"
},
"snug": {
"$type": "number",
"$value": "1.2",
"$description": "Snug line height for headings"
},
"base": {
"$type": "number",
"$value": "1.4",
"$description": "Base line height"
},
"normal": {
"$type": "number",
"$value": "1.5",
"$description": "Normal line height for body text"
},
"relaxed": {
"$type": "number",
"$value": "1.6",
"$description": "Relaxed line height for readable text"
}
}
},
"spacing": {
"1": {
"$type": "dimension",
"$value": "4px",
"$description": "Extra tight spacing"
},
"2": {
"$type": "dimension",
"$value": "8px",
"$description": "Tight spacing, icon gaps"
},
"3": {
"$type": "dimension",
"$value": "12px",
"$description": "Button vertical padding"
},
"4": {
"$type": "dimension",
"$value": "16px",
"$description": "Small gaps and padding"
},
"5": {
"$type": "dimension",
"$value": "20px",
"$description": "Medium-small gaps"
},
"6": {
"$type": "dimension",
"$value": "24px",
"$description": "Medium gaps and spacing"
},
"8": {
"$type": "dimension",
"$value": "32px",
"$description": "Large gaps and card padding"
},
"10": {
"$type": "dimension",
"$value": "40px",
"$description": "Extra large gaps"
},
"12": {
"$type": "dimension",
"$value": "48px",
"$description": "Section spacing"
},
"16": {
"$type": "dimension",
"$value": "64px",
"$description": "Large section spacing"
},
"20": {
"$type": "dimension",
"$value": "80px",
"$description": "Extra large section padding"
},
"24": {
"$type": "dimension",
"$value": "96px",
"$description": "Hero section padding"
},
"30": {
"$type": "dimension",
"$value": "120px",
"$description": "Maximum section padding"
}
},
"radius": {
"sm": {
"$type": "dimension",
"$value": "6px",
"$description": "Small border radius"
},
"md": {
"$type": "dimension",
"$value": "8px",
"$description": "Medium border radius for buttons and inputs"
},
"lg": {
"$type": "dimension",
"$value": "12px",
"$description": "Large border radius for cards"
},
"xl": {
"$type": "dimension",
"$value": "16px",
"$description": "Extra large border radius"
},
"2xl": {
"$type": "dimension",
"$value": "20px",
"$description": "2XL border radius"
},
"full": {
"$type": "dimension",
"$value": "9999px",
"$description": "Full border radius for pills and circles"
}
},
"shadow": {
"sm": {
"$type": "shadow",
"$value": {
"offsetX": "0px",
"offsetY": "1px",
"blur": "2px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.05)"
},
"$description": "Small shadow for subtle elevation"
},
"md": {
"$type": "shadow",
"$value": [
{
"offsetX": "0px",
"offsetY": "4px",
"blur": "6px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.07)"
},
{
"offsetX": "0px",
"offsetY": "2px",
"blur": "4px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.05)"
}
],
"$description": "Medium shadow for cards"
},
"lg": {
"$type": "shadow",
"$value": [
{
"offsetX": "0px",
"offsetY": "10px",
"blur": "15px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.1)"
},
{
"offsetX": "0px",
"offsetY": "4px",
"blur": "6px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.05)"
}
],
"$description": "Large shadow for hover states"
},
"xl": {
"$type": "shadow",
"$value": [
{
"offsetX": "0px",
"offsetY": "20px",
"blur": "25px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.15)"
},
{
"offsetX": "0px",
"offsetY": "10px",
"blur": "10px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.04)"
}
],
"$description": "Extra large shadow for modals"
}
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Brex is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.