Brand
#00D66F
Identity and emphasis
THE FOUNDATION
One identity.
Every interaction.
The visual language of Datalayer, from the first visit to the everyday workspace.
01
Small mark. Clear presence.
datalayer
datalayer
Matter Bold · lowercase · dot diameter 0.46em · gap 0.28em · baseline offset −0.025em. Keep the dot static: the brand mark is not a connection status.
Navigation & footer · 28px desktop / 26px mobile
datalayer
Product examples · 20px
02
Green with a purpose.
Ink
#011E0F
Primary actions
Text
#171717
Headlines and body
Muted
#525252
Supporting information
Surface
#FFFFFF
Cards and canvas
Soft
#F5F5F5
Grouped content
Use dark text on bright green. White text belongs on Ink, not Brand. Status messages always include words.
03
Let the type do the work.
Display / Matter Medium
Company and people data
for your AI tools.
Page heading / 32–48px
Your next connection starts here.
Card heading / 24px
Connect your agent
Body / 16px · supporting / 14px
One allowance for people and companies. Available work emails included when requested.
Technical / Matter Mono · 13px
search_companies · get_company
search_people · get_person
04
Familiar controls. Clear states.
BUTTONS
Focus with Tab to inspect the ring. These examples do not perform account actions.
Use a name you will recognize later.
Enter a name for this key.
Inputs use 16px type and a minimum 44px touch target.
05
Make the state explicit.
Sign in to manage your workspace.
Server URL copied.
Billing is not enabled for this workspace.
Could not load your account. Please try again.
Production · Signed inStaging · Test billingWorkspace
These are component examples, not live account or service status.
06
Room to understand.
Connect your agent
Add Datalayer as a remote MCP server in your agent, then sign in with your Datalayer account when prompted.
https://mcp.datalayer.so/mcp
Connected agents
Agents connected through sign-in appear after their first request.
No connected agents yet.
8px controls · 12px cards · 18px featured surfaces. Use borders before shadows; reserve the raised shadow for a focal element.
07
A rhythm that scales.
48121624324864
Use 4px increments. Give controls at least 44px of touch space. At 720px, dashboard navigation moves above the content; at 1100px, cards become one column. Keep technical values wrapping, and never hide essential content to fit a screen.