02 — Components

Fills instead of borders.

Nothing here draws a 1px outline. Shape comes from a three-step neutral fill ladder, so controls stay legible in both themes without a stroke to maintain.

Buttons

36px default · 30 sm · 44 lg

Inputs

filled · 16px on mobile to stop iOS zoom
Lowercase letters, numbers and dashes.
sk_live_
Enter a valid email address.
Streaming responses
Token-by-token delivery
Rate limit400 rpm
choice cards

Tabs, segments, badges

showing 7d
LiveDegradedFailingQueuedDraftv4.2.0Enterprise⌘Kgpu:a100region:eutier:pro
AKRM+

Feedback

alerts · toasts · progress
Scheduled maintenance Thursday 02:00 UTC
Requests will queue for up to 90 seconds during failover.
You have used 82% of this month's quota
All regions healthy
live
skeletons

Surfaces

Requests184,20912.4%vs last week
p95 latency412 ms8.2%vs last week
Error rate0.14%0.04ppvs last week
Production
eu-west-2 · 12 instances

Cards are surfaces with a soft shadow — no outline. Use flat on coloured backgrounds.

No datasets yet
Upload a file or connect a warehouse to get started.

Data table

sortable · selectable · stacks under 640px
RouteStatusp95Requests
/v1/completionslive412 ms184,209
/v1/embeddingslive96 ms92,014
/v1/rerankdegraded1284 ms12,483
/v1/fileslive168 ms8,821
/v1/batchesfailing4102 ms402
1 of 5 selected

Overlays

all become sheets under 620px
or press ⌘K anywhere

Code & links

app/layout.tsx
import { AssetisFonts, ThemeProvider, ThemeScript } from "@assetis/ui";
import "@assetis/ui/styles.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <AssetisFonts />
        <ThemeScript />
      </head>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

Inline code looks like --a-accent-h and stays neutral.