Logo
The ekai wordmark is a single monochrome shape drawn in brand amber. There's one master: a vector SVG that scales cleanly to any size. Use it as-is — don't rebuild, recolor, or re-space the letters.
Keep clear space around the mark equal to the height of the “e” on all sides. Place it on the amber, the dark canvas, or a clean white surface.
Scale from the vector. Minimum legible size is roughly 24px tall on screen; the nav uses it at ~18px.
Recolor the wordmark, add a gradient to it, outline it, or place it on a busy or low-contrast background.
Stretch, rotate, add a drop shadow, or recreate the letterforms in a system font. There is only one master.
Color
One saturated amber does all the brand lifting; everything else is a quiet, near-neutral ground that lets it stand out. Click any swatch to copy its hex. Values map 1:1 to the MUI palette tokens in the product theme.
Brand · Amber
Primary CTA gradient
Canvas & surface
Data-viz & semantic accents
Typography
ekai deliberately ships no custom or web font. The interface renders in each platform's native UI face, so text always looks at home on the user's device and nothing waits on a font download. Hierarchy comes from weight and size, not from a display typeface.
The brand fonts are Instrument Sans and JetBrains Mono, shipped self-hosted via @fontsource-variable/instrument-sans and @fontsource-variable/jetbrains-mono. They must never be loaded from a CDN: the app's nginx CSP sets font-src 'self' data:, and the Snowflake Native App config omits font-src entirely, so a Google Fonts link is blocked in both deployments. Note the packages register the families with a Variable suffix — naming plain "Instrument Sans" silently falls back to system-ui. Sans carries UI text; mono carries IDs, SQL, counts and table/column names via typography.fontFamilyMono. This is the stack the app declares:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
Shape & spacing
The product's shape language: a tight 6px spacing grid and fully-rounded pill buttons. These are the non-color tokens worth knowing when you spec a screen.
| Token | Value | Notes |
|---|---|---|
| Spacing unit | 6px | spacing(1)=6, (2)=12 … tighter than MUI's 8px |
| Button radius | 22px | Fully pill-shaped; label text is capitalize |
| Default radius | 4px | MUI default for cards, inputs, menus |
| Elevation | MUI default | No custom shadow ramp defined |
| Default mode | dark | Follows prefers-color-scheme |
Spacing scale · base 6px