SchemaBlue Design System
SchemaBlue is a diagrammatic, relational design system purpose-built for database design and schema visualization tools. Its pale blue background provides a calm canvas for complex entity-relationship diagrams, while the blue-purple-green palette distinguishes tables, relationships, and data types. The system balances visual clarity with technical density, ensuring that intricate schema structures remain comprehensible. Material-influenced shadows create a layered interface where diagram elements float naturally above the workspace.
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.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxSchemaBlue is a diagrammatic, relational design system purpose-built for database design and schema visualization tools. Its pale blue background provides a calm canvas for complex entity-relationship diagrams, while the blue-purple-green palette distinguishes tables, relationships, and data types. The system balances visual clarity with technical density, ensuring that intricate schema structures remain comprehensible. Material-influenced shadows create a layered interface where diagram elements float naturally above the workspace.
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