Styling

Styling

The site is styled entirely with Tailwind utility classes written inline in the .astro files. There is no global stylesheet, no CSS modules, and no component library.

Tailwind setup

Tailwind is wired in by the @astrojs/tailwind integration in astro.config.mjs, so there is no separate PostCSS configuration to maintain.

tailwind.config.mjs scans ./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}. Anything outside src/ is not scanned, so a class written into a file in public/ will be purged from the build.

The config adds three color scales under theme.extend.colors and registers no plugins.

Palette

Scale	Classes	Role
brand	brand-50 through brand-950	Primary blue. Links, active nav underline, section gradients, the dark brand-950 feature blocks
accent	accent-50 through accent-950	Orange. Primary calls to action and highlights — the Try the Demo buttons, the Cloud Enterprise button and badge
chart	chart-blue, chart-red, chart-orange, chart-gold, chart-teal, chart-purple	Six-color data-viz palette taken from the logo. No page uses these classes today; the marks and the tinted hero word hard-code the same hex values

brand-600 (#0074c7) is the canonical blue. It appears outside Tailwind in three places that need a literal value: the theme-color meta tag, the mask-icon color, and the Mermaid theme variables in Mermaid.astro.

The data-viz components take hex values as props or hard-code them in their segments and bars arrays rather than using Tailwind classes, because they set SVG fill and stroke attributes. Keep those literals in step with the chart scale in the config.

Layout conventions

Following these keeps a new section visually consistent with the existing ones.

Convention	Classes
Page container	mx-auto max-w-6xl px-6
Section vertical rhythm	py-20 or py-24
Section separation	Alternate bg-white and bg-gray-50, with border-y border-gray-100 or border-t on the tinted one
Card	rounded-2xl border border-gray-100 bg-white p-6 shadow-sm
Icon tile	flex h-11 w-11 items-center justify-center rounded-xl plus the module's accent classes
Eyebrow pill	inline-flex items-center rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-xs font-medium text-brand-700
Section heading	text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl
Primary button	rounded-lg bg-accent-500 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-accent-600
Secondary button	rounded-lg border border-gray-300 bg-white px-6 py-3 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50

The body is fixed at bg-white text-gray-900 antialiased, and the layout sets <meta name="color-scheme" content="light">. The marketing pages are light-only by design; /docs is the sole page that adapts to a dark system theme, and it does so through the [data-theme='dark'] rules described in Architecture.

Conditional classes

Astro's class:list directive is used wherever classes depend on props or on the current path — the active nav link, FeatureBlock's dark and light tones, and the pricing cards' highlighted state. Prefer it over string concatenation so the class strings stay literal enough for Tailwind's scanner to find.

Icons

Icons are inline SVG paths, in the Heroicons outline style, rendered at viewBox="0 0 24 24" with stroke-width around 1.7 and stroke="currentColor". Nav icon paths live in the navIcon object in Layout.astro; module icon paths live on each entry in src/data/modules.js. No icon package is installed.