Logo
The ekai wordmark is a single monochrome shape drawn in brand gold. 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 gold, the dark canvas, or the light canvas.
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 gold does all the brand lifting; everything else is a quiet, warm-neutral ground that lets it stand out. There are two full schemes, and most tokens hold a different value in each — so every swatch below shows both. Click either half to copy that value. Contrast ratios are computed in the page, not transcribed.
primary is the FILL. accent is the SIGNAL. This is the one constraint in the system you cannot work around. Raw gold is 1.71:1 on the light surfaces — fine as an area of color, invisible as information. So anything gold that carries meaning rather than area — text, an icon, a focus ring, a border-as-state — must read accent.main, which stays #FDB515 on dark and darkens to #8A5D00 (5.52:1) on light. Using primary.main for those makes the focus ring disappear in light mode.
Gold · fill vs signal
Canvas & surface
Warm, brown-shifted neutrals — not grey. MUI's cool grey.* ramp is not re-derived from these, so any grey.* reference drops a visible blue patch onto the warm ground. secondary is a surface ramp, not a color.
Ink & line
text.disabled is a meta/label tier at 4.2:1, deliberately not a disabled state. Lines are alpha, not hex, so they composite over whatever surface they sit on — the swatch shows each rule at true 1px weight over the canvas.
Semantic
Data-viz
chart.bar is a deliberately desaturated gold so large filled areas don't shout; at 3.44:1 on the light canvas it clears WCAG 1.4.11's 3:1 bar for non-text graphics, which is the rule that applies to a chart bar. Don't "fix" it to 4.5:1.
Lineage layers
The pipeline ramp from the lineage graph. On dark it borrows the semantic tokens exactly — source takes the Snowflake partner blue (data arriving from outside) and mart the brand gold (the delivered product), the two ends of the pipeline. On light it is independently derived and does not match the semantic values; it is its own ramp, maintained in lineageVisualization/index.tsx.
Typography
Two self-hosted variable faces: Instrument Sans carries UI text, JetBrains Mono carries machine data — IDs, SQL, counts, table and column names — via typography.fontFamilyMono. Mono is a first-class brand voice here, not just a code font. The page you are reading is set in both.
Self-hosted, never from a CDN. The fonts ship through @fontsource-variable/instrument-sans and @fontsource-variable/jetbrains-mono. A Google Fonts link would be blocked in both deployments: the app's nginx CSP sets font-src 'self' data:, and the Snowflake Native App config omits font-src entirely so it falls back to default-src 'self'.
The Variable suffix is load-bearing. Those packages register the families as "Instrument Sans Variable" and "JetBrains Mono Variable". Naming plain "Instrument Sans" matches nothing and falls through to system-ui in silence — the text still renders, just in the wrong face. Both stacks, exactly as the app declares them:
fontFamily: "Instrument Sans Variable", "Instrument Sans", system-ui,
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
fontFamilyMono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace,
"SF Mono", Menlo, Consolas, monospace
The scale
The theme authors only weight and letter-spacing. Every size and line-height is MUI's Material spec scaled uniformly by 13/14 — the ratio of this theme's fontSize: 13 to MUI's default 14. Nobody picked 89.14px. Sizes below are what actually renders at a 16px root.
Two traps in this scale. First: MUI only emits its default letter-spacing when fontFamily is exactly its Roboto string. This theme sets a custom family, so every variant without an explicitly authored value has no tracking at all — the ramp stops dead below h6. Second: typography.button keeps MUI's uppercase, but MuiButton.root sets textTransform: 'none'. The variant and the component disagree on purpose — a real button is sentence case.
Mono label recipes
Two different uppercase mono treatments, both real. Don't substitute one for the other.
Eyebrow · typography.overline
Mono, 11px, 500, 0.18em, uppercase. A literal 11px — not scaled by the 13/14 coefficient, because the theme sets it as a bare number.
Table head · MuiTableHead
Mono, 12px, 600, 0.08em, uppercase, on background.sunken. Tighter tracking, heavier weight, and it carries a ground.
Shape & spacing
A tight 6px grid and a flat control language. The 22px pill and the amber CTA gradient are both retired — buttons are flat 8px gold with sentence-case labels, and gradients now mean something else entirely.
| Token | Value | Notes |
|---|---|---|
| Spacing unit | 6px | spacing(1)=6, (2)=12 … tighter than MUI's 8px. One decision with the 13px base: dashboard density. |
| Button radius | 8px | Flat, disableElevation, label is textTransform: 'none'; hover lifts 1px |
| Default radius | 6px | shape.borderRadius — the fallback rung. Most components override it. |
| Elevation at rest | none | A hairline border, no shadow. MuiPaper is elevation: 0 + backgroundImage: 'none', killing MUI's dark overlay gradient. |
| Shadow ladder | brandShadow | Three rungs — hover / lift / overlay, per scheme. Only overlay is in real use. |
| Default mode | dark | Always. Stored in localStorage['mui-mode']; prefers-color-scheme is read only when that value is 'system'. |
Radius ladder
Rendered at true size. Two shapes sit off this ladder by design: a full 999 pill on live agent status chips, and a one-edge 32px half-pill on the sidebar rail when collapsed.
Spacing scale · base 6px
Gradients mean motion, not action
There is no CTA gradient any more. Every gradient left in the product signals that something is in flight — a streaming response, a live diff — plus one decorative field on the auth screen. All are expressed as alpha-of-primary so they follow the active scheme without a re-render.
| Where | Treatment |
|---|---|
| Streaming code block, live diff | linear-gradient(90deg, primary/0.1 dark · 0.07 light, transparent 55%) |
| Live agent section chip | linear-gradient(110deg, transparent 30%, primary/0.18 50%, transparent 70%), swept on a 1.8s loop |
| Collapsed reasoning peek | A fade mask, not a paint — linear-gradient(to bottom, transparent, #000 35%) |
| Auth backdrop | radial-gradient(primary/0.1 1px, transparent 1px) on a 22px grid — the dot field behind the hero at the top of this page |
States & interaction
Four recipes that each combine a color, a radius and a geometry. They are the treatments most often rebuilt wrong on a new surface, so they are demonstrated here rather than tabulated — everything below is live.
Focus ring
2px solid accent.main, outline-offset: 3, border-radius: 2. Built on accent, never primary — this is the place the fill/signal split has a visible consequence. Press Tab.
Selection
::selection fills with primary.main and sets #0A0A0A ink — gold as an area, so the fill token is correct here. Drag across the text below.
Select this sentence to see the gold selection treatment.
Status formula
Fill at 12%, border at 28%, text at full text.primary, weight 500, 14px. Implemented on MuiAlert for all four severities; the same ratio recurs by hand on citation pills and chips.
Scrollbars
Thin, thumb on text.disabled, 8×8px, radius 8, with a 2px transparent border and background-clip: content-box so the thumb reads inset. Applied globally to *.
The 2px transparent border is what gives the thumb its inset look — without background-clip: content-box the color would paint under the border too, and the thumb would sit flush against the track.
That is the whole trick.