Green Trade
Green Trade is a minimalist, consumer-finance design system where dark backgrounds meet vivid green accents. It blends the simplicity of consumer apps with the precision of trading platforms, creating an approachable yet data-rich experience. Charts and numbers take center stage, with green signaling gains and a warm orange-red marking losses.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxGreen Trade is a minimalist, consumer-finance design system where dark backgrounds meet vivid green accents. It blends the simplicity of consumer apps with the precision of trading platforms, creating an approachable yet data-rich experience. Charts and numbers take center stage, with green signaling gains and a warm orange-red marking losses.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here