AG branding

import { ... } from '@ag.ds-next/react/ag-branding';

Agriculture theme

To use the agriculture theme in your website or application, pass the theme object from this package to our Core component.

import { Core } from '@ag.ds-next/react/core';
import { theme } from '@ag.ds-next/react/ag-branding';

export default function App({ Component }) {
	return (
		<Core theme={theme}>
			<Component />
		</Core>
	);
}

Agriculture logo

<Box maxWidth={600} color="text">
	<Logo />
</Box>

Colour

AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.

This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).

Light palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}>
	<Stack color="text" gap={1.5} maxWidth={600}>
		<H4>Agriculture logo: on light background</H4>
		<Logo />
	</Stack>
</Box>

Dark palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<Stack color="text" gap={1.5} maxWidth={600}>
		<H4>Agriculture logo: on dark background</H4>
		<Logo />
	</Stack>
</Box>