For the complete documentation index, see llms.txt. Prefer markdown by appending.mdto documentation URLs or sendingAccept: text/markdown.
Styling
Tailwind CSS and Kumo styling, including shared color tokens, typography, responsive layouts, and light and dark mode in Edge Kit.
Edge Kit uses Tailwind CSS for styling and Kumo for its component design system. Tailwind utilities control layout and spacing, while shared color tokens keep components consistent across themes.
The global stylesheet is src/assets/styles/globals.css. It includes the existing component styles, fonts, and application theme values.
Why Tailwind CSS?
Tailwind puts responsive layout and state styles alongside the component they affect. Shared theme values keep colors and spacing consistent, and Kumo already uses the same styling system, so custom views and supplied controls fit together.
Colors
Kumo's semantic colors describe a role rather than a fixed hue. Use a surface color for panels, a text color for content, and a brand color for primary actions. These roles adapt to the selected color mode.
For example, an application-level brand override can be added after the existing imports:
@theme {
--color-kumo-brand: light-dark(oklch(0.55 0.18 250), oklch(0.72 0.14 250));
--color-kumo-brand-hover: light-dark(
oklch(0.48 0.18 250),
oklch(0.66 0.14 250)
);
--text-color-kumo-brand: light-dark(
oklch(0.48 0.18 250),
oklch(0.78 0.12 250)
);
}The values illustrate separate light and dark choices. Check text contrast, focus indicators, and hover states with your own palette. Kumo's color reference describes the available roles.
Component styles
Keep the existing Kumo imports and Tailwind source declarations. They allow Tailwind to include the component styles in your build. Put your overrides in the application stylesheet rather than editing installed package files.
Typography
The starting styles use Inter for the application, Schibsted Grotesk for marketing, and a local monospace font. Change the font imports and their theme values together when adopting your own typefaces.
Review headings, form labels, long descriptions, and translated text at small screen sizes. A brand font should still support the languages your product offers.
Dark mode
The theme control supports light, dark, and the customer's system preference. The choice is saved in the browser and applied before the page is rendered.
Kumo uses data-mode and semantic colors for this behavior. Keep the existing theme provider when restyling, and check both modes rather than relying on fixed light-theme colors.
Layouts
Use Tailwind utilities for spacing, sizing, and responsive layouts. Shared components can take consistent application classes, while feature-specific views can define their own composition.
The components guide covers variants and reusable UI. For product names, artwork, and customer-facing copy, see branding.
How is this guide?
Last updated on