Design Guidelines

Across all broad web platforms and general applications, we strictily allow only 1 pixel borders. Do not use borders thicker than 1px anywhere by default.

All padding and margins must strictly be divisible by 4 or 8. In Tailwind CSS, the base spacing unit is 4px (e.g. p-1 = 4px, p-2 = 8px, p-4 = 16px). You must use standard tailwind values and never use arbitrary pixel values unless specifically required for an absolute positioned layout calculation.

• Always use predefined V1Button components instead of standard HTML <button> tags.
• Use V1Button instead of <Link> when a navigation element is styled as a button. V1Button natively supports the href prop.
• It is perfectly acceptable to use <Link> for standard textual navigation that does not resemble a button.
• Require Accessibility: For primary, secondary, and important actions, you must always pass accessibility={true} to enable focus rings for keyboard navigation.
• Avoid Overrides: Do not pass the className prop to V1Buttons unless strictly necessary for layout tweezers, to avoid overriding default centralized styles.

You must prefer rounded-lg for all generic containers, cards, and interactive elements. Avoid using default rounded or rounded-md. Only use rounded-full when a perfect circle or maximum pill shape is explicitly required (e.g., Avatars).

Any label intended to indicate a feature is in beta must use the V1LabelWithBeta component. This component automatically detects the (Beta) suffix and styles it consistently as a blue superscript.Do not write "Beta" manually in plain text next to labels.

Hero badges must be readable and centered. Use the V1Badge component which provides standardized horizontal padding (px-4) and text-sm font-semibold styling. Avoid tiny uppercase text for important branding status.

You should use all-uppercase text with wide letter spacing (uppercase tracking-wider) very rarely and only for specific, highly-stylized accents. By default, prefer standard sentence casing with font-semibold or font-medium. This improves readability and maintains our simple, refined aesthetic.

Across all applications, you must explicitly search for and use Remix Icons (react-icons/ri) first. Only use other icon libraries (like FontAwesome) if the desired icon strictly does not exist within the Remix set.

To achieve the consistent frosted glass effect used across our floating navigation elements and menus, you must use this exact Tailwind class combination: