Adopt the smallest production layer

Import

Use the public entry point. Portal, ModalSurface, and field association utilities are internal APIs.

import {
  Button, Input, Select, Tabs, TabList, Tab, TabPanel,
  Alert, Progress, Dialog, Drawer, ToastProvider, useToast,
} from "@/components/design-system";

Foundation

• Prefer semantic --ndf-color-* variables over raw palette values.
• Use breakpoints for JavaScript decisions; CSS follows the same 320 / 720 / 960 standards.
• Use Safe Area variables for fixed mobile surfaces and bottom actions.

import { breakpoints, safeAreaVariables } from "@/components/design-system";

const mobileMax = breakpoints.tablet;
const bottomInset = safeAreaVariables.bottom;

/* CSS */
.surface { background: var(--ndf-color-bg-surface); }

Website foundation

• Website Foundation is additive; do not change Product Core component APIs for marketing needs.
• Use shared website width and spacing tokens before inventing page-local max-width or padding values.
• On desktop, check width and layout before reducing headline size; on tablet and mobile, allow natural wrapping.
• Do not add layout-only <br> tags or force nowrap content that can overflow at 320px.

import {
  websiteContainers,
  websiteContentWidths,
  websiteTypographyRoles,
} from "@/components/design-system";

/* CSS */
.websiteSection {
  padding-block: var(--ndf-website-section-space-large);
}

.websiteContainer {
  width: min(calc(100% - 40px), var(--ndf-website-container));
  margin-inline: auto;
}

.sectionTitle {
  max-width: var(--ndf-website-heading-width);
  font-size: var(--ndf-website-section-title-size);
  line-height: var(--ndf-website-section-title-line-height);
}

Form and action

<Input label="Project name" helperText="Use a recognizable name." required />

<Select label="Status" placeholder="Choose status" required>
  <option value="ready">Ready</option>
</Select>

<Button loading={saving} type="submit">Save project</Button>

Navigation

Tabs are controlled. Keep values stable so tab and panel IDs remain associated.

<Tabs value={tab} onValueChange={setTab}>
  <TabList label="Project sections">
    <Tab value="overview">Overview</Tab>
    <Tab value="evidence">Evidence</Tab>
  </TabList>
  <TabPanel value="overview">...</TabPanel>
  <TabPanel value="evidence">...</TabPanel>
</Tabs>

Feedback

<Alert title="Saved" variant="success" live="polite">
  The project is ready to review.
</Alert>
<Progress label="Uploading evidence" value={68} />

function SaveFeedback() {
  const { toast } = useToast();
  return <Button onClick={() => toast({ message: "Saved", variant: "success" })}>Save</Button>;
}

<ToastProvider><Application /></ToastProvider>

Overlay

• Use closeOnOutside={false} for destructive or interruption-sensitive work.
• Keep a visible close path when outside dismissal is disabled.
• Do not mount nested modals; v1.0 supports one modal surface at a time.

<Dialog open={open} onOpenChange={setOpen}
  title="Delete request?" description="This action cannot be undone."
  closeOnOutside={false} footer={<Button variant="danger">Delete</Button>}>
  Review the request before continuing.
</Dialog>

<Drawer open={sheetOpen} onOpenChange={setSheetOpen}
  title="Next step" placement="bottom">...</Drawer>