# Foundation Design System — OpenDesign Application Guide

A working Foundation proof desk using XY Grid, Abide custom validators, Reveal confirmation, actual Sass settings, and complete local integration code.

Foundation for Sites 6.9.0 with jQuery 3.7.1. Print rules and illustration are original examples. No file upload or print order is implemented.

## Source Reference

- **Library scope:** Responsive frontend framework ([source](https://get.foundation/))
- **Platform or architecture:** Foundation for Sites has installation documentation ([source](https://get.foundation/sites/docs/installation.html))
- **Integration:** Includes a responsive grid ([source](https://get.foundation/sites/docs/installation.html))
- **Component support:** Includes Sass customization ([source](https://get.foundation/sites/docs/installation.html))
- **Customization or behavior:** Includes JavaScript plugins ([source](https://get.foundation/sites/docs/installation.html))
- **Additional capability:** Includes form and navigation patterns ([source](https://get.foundation/sites/docs/installation.html))


## Design Reference

Foundation for Sites 6.9.0 settings and compiled default CSS, with jQuery 3.7.1. Dollar-prefixed names are Sass settings, not browser CSS custom properties. Print rules and cover colors are original example choices.

### Foundation palette

[Official reference](https://get.foundation/sites/docs/global.html)

| Name / Rule | Value / Configuration | Use |
| --- | --- | --- |
| $primary-color | #1779ba | Primary action role from foundation-palette. |
| $secondary-color | #767676 | Secondary role. |
| $success-color | #3adb76 | Success palette entry. |
| $warning-color | #ffae00 | Warning palette entry. |
| $alert-color | #cc4b37 | Error/alert role. |
| $body-font-color | #0a0a0a | Default reading text. |
| $body-background | #fefefe | Default page background. |
| $light-gray | #e6e6e6 | Neutral light surface/border source. |
| $medium-gray | #cacaca | Mid neutral. |
| $dark-gray | #8a8a8a | Dark neutral. |

### Typography and geometry

[Official reference](https://get.foundation/sites/docs/global.html)

| Name / Rule | Value / Configuration | Use |
| --- | --- | --- |
| $global-font-size | 100% | Base browser-relative font size. |
| $global-lineheight | 1.5 | Body line height. |
| $body-font-family | Helvetica Neue, Helvetica, Roboto, Arial, sans-serif | Default family preference. |
| $global-margin | 1rem | Base margin rhythm. |
| $global-padding | 1rem | Base padding rhythm. |
| $global-radius | 0 | Square corners by default. |
| $global-width | rem-calc(1200) | Default maximum grid width. |
| $button-padding | 0.85em 1em | Default button vertical/horizontal padding. |

### XY Grid breakpoints

[Official reference](https://get.foundation/sites/docs/xy-grid.html)

| Name / Rule | Value / Configuration | Use |
| --- | --- | --- |
| small | 0 | Base range. |
| medium | 640px | Proof form and preview split 7/5. |
| large | 1024px | Large range. |
| xlarge | 1200px | Available Sass breakpoint. |
| xxlarge | 1440px | Available Sass breakpoint. |
| $breakpoint-classes | small medium large | Only these named width classes are generated by the default setting. |

### Explicit proof-desk rules

[Official reference](https://get.foundation/sites/docs/abide.html)

| Name / Rule | Value / Configuration | Use |
| --- | --- | --- |
| booklet validator | integer, 4–200, divisible by 4 | Original preflight assumption implemented in Abide. |
| copies validator | integer, 1–10 | Original local proof quantity limit. |
| Page heading | 38px / 1.15; mobile 30px | Original typography refinement. |
| Form padding | 24px; mobile 18px | Original compact form composition. |
| Cover colors | #e3d8bd / #718474 / #31483b | Original illustration, not Foundation palette values. |

## Foundation Design System for Sites With a Real Runtime

### Foundation for Sites With a Real Runtime

Foundation for Sites combines a responsive CSS framework with JavaScript plugins. The proof desk uses XY Grid for layout, Abide for validation and Reveal for its review dialog. Its compiled runtime is loaded after jQuery 3.7.1, and $(document).foundation() initializes the data attributes once the page exists.

This is distinct from Foundation for Emails. The page uses browser forms, JavaScript validation and a modal; its markup is not an email template. The offline specimen bundles the actual 6.9.0 files and adds a small original script rather than drawing a static imitation of those components.

[Supporting specification](https://get.foundation/sites/docs/javascript.html)

## Foundation Design System Sass Settings and the Default Palette

### Sass Settings and the Default Palette

The reference table names settings from the installed Sass configuration. The default palette includes primary #1779ba, secondary #767676, success #3adb76, warning #ffae00 and alert #cc4b37. They describe the framework’s color roles; the warm booklet cover is original CSS artwork with its own palette.

The dollar-prefixed settings are compile-time inputs. They are not CSS custom properties that can be assigned in a browser style attribute. Use a Sass build to change the framework theme, or add clearly scoped ordinary CSS after the compiled stylesheet for a screen-specific adjustment. The example takes the latter approach for its heading, form padding and background.

[Supporting specification](https://get.foundation/sites/docs/global.html)

## Foundation Design System Default Geometry and Local Reading Hierarchy

### Default Geometry and Local Reading Hierarchy

Foundation starts with a browser-relative 100% font size, a 1.5 body line height, and a Helvetica Neue/Helvetica/Roboto/Arial stack. Its global radius is zero, producing a more square-edged default than many contemporary component kits. Inputs, callouts and the proof form keep that character rather than acquiring an unrelated large-radius treatment.

The application chooses a 38px page heading with a 1.15 line height, reduced to 30px on mobile. The lead is eighteen pixels. The illustration uses bold stacked lettering and a simple circle to make the print context visible, while the form remains a stable white working surface. These are local decisions, fully listed in the supplied CSS.

[Supporting specification](https://get.foundation/sites/docs/global.html)

## Foundation Design System XY Grid and Gutter Selection

### XY Grid and Gutter Selection

The grid-container holds a grid-x grid-margin-x row. Its two cells are medium-7 and medium-5, dividing twelve columns between the form and booklet preview above 640px. Below that breakpoint they stack in source order. The nested Pages/Proof copies row uses small-6 cells so the two compact number fields remain paired on a phone.

Foundation supports both margin and padding grids. This example consistently chooses margin gutters inside the container rather than mixing both types on one row. The breakpoint map includes xlarge and xxlarge for Sass use, but the default breakpoint-classes setting generates small, medium and large width classes. A map entry does not automatically mean every corresponding utility class exists in the compiled file.

[Supporting specification](https://get.foundation/sites/docs/xy-grid.html)

## Foundation Design System Register the Actual Validation Rules

### Register the Actual Validation Rules

The form uses data-abide with novalidate and data-validate-on=submit to avoid change-triggered error reflow during a button click, and each form-error span points to its input through data-form-error-for. An alert callout marked data-abide-error provides a form-level summary. Required title and preflight checkbox errors are handled alongside two explicit numeric validators.

The booklet validator accepts integers from four to two hundred divisible by four. The copies validator accepts integers from one to ten. Both are registered on Foundation.Abide.defaults.validators before initialization and referenced by data-validator. In this tested flow, the native step attribute alone did not enforce the booklet increment, so the implementation does not rely on it. The four-page assumption belongs to this example, not to every printing process.

1. Enter five pages and submit: review must remain closed.
2. Enter sixteen pages, a title, and complete the preflight check.
3. Review the captured values before recording the local proof.

[Supporting specification](https://get.foundation/sites/docs/abide.html)

## Foundation Design System Connect Error Appearance to Navigation

### Connect Error Appearance to Navigation

On forminvalid.zf.abide, the application focuses the first field carrying data-invalid. This places the user at a correction point while the alert callout explains the overall problem. Input error spans are associated through aria-describedby, so the message is not merely a red visual marker beside an otherwise unnamed field.

The complete event flow is visible in the JavaScript example. The ordinary submit event is prevented so the browser cannot navigate to a nonexistent endpoint. Only formvalid.zf.abide builds the pending snapshot and opens the review. This is important: binding the review dialog directly to the submit button would bypass the validation result.

[Supporting specification](https://get.foundation/sites/docs/abide.html)

## Foundation Design System Review a Snapshot in Reveal

### Review a Snapshot in Reveal

The modal carries data-reveal and an aria-labelledby relationship to its heading. The valid form handler creates a pending object and builds its definition list with textContent. Reveal opens through the Foundation API, supplies modal behavior, and closes through data-close buttons or the confirmation handler.

Keep editing closes the dialog without recording a result. Record local proof writes the same pending values to the status callout before closing. The close icon has an explicit label. The confirmation makes no claim that a file was uploaded or a print order was created, because neither operation exists in the application.

- Reveal shows the values captured by the valid form event.
- Cancel changes no recorded local result.
- Confirm records only the preview status, not an external order.

[Supporting specification](https://get.foundation/sites/docs/reveal.html)

## Foundation Design System Pin and Load the Dependency Chain

### Pin and Load the Dependency Chain

Install foundation-sites@6.9.0 and jquery@3.7.1, then copy the compiled CSS, Foundation JavaScript and jQuery into local assets. Load the stylesheet before the page refinements. Load jQuery first, Foundation second and the application script third; defer preserves that order after document parsing.

Register custom validators before calling $(document).foundation(). Registering them after initialization creates an avoidable timing dependency. The current example uses the full compiled runtime for reproducibility. A production bundle can select plugins and their dependencies, but should not remove Abide or Reveal while leaving their data attributes in the markup.

[Supporting specification](https://get.foundation/sites/docs/javascript.html)

## Foundation Design System Preflight Is a Local Decision, Not Production Approval

### Preflight Is a Local Decision, Not Production Approval

The diagram and page-count rule make the proof context concrete, but they are not production specifications for a particular printer. The example explicitly asks users to confirm real constraints with their production provider. Its copy count is a local example limit rather than inventory or pricing information.

A real submission flow would need file inspection, server validation and a traceable acceptance response. Foundation can supply the interface primitives, but those domain checks must come from the application. Keeping that boundary explicit lets the reader reuse the validation and review pattern without inheriting a misleading success claim.

[Supporting specification](https://get.foundation/sites/docs/abide.html)

## Component Examples

### Proof desk markup

XY Grid, explicit form errors, preflight checkbox, callouts and Reveal confirmation.

```html
<main class="grid-container proof-desk"><header><p class="eyebrow">FOUNDATION / PRINT PROOF DESK</p><h1>Check the job before it leaves the desk.</h1><p class="lead">A local proof checklist built with XY Grid, Abide and Reveal.</p></header><div class="grid-x grid-margin-x"><section class="cell medium-7"><form id="proof-form" data-abide data-validate-on="submit" novalidate><div data-abide-error class="alert callout" style="display:none" role="alert"><p>Check the marked fields before reviewing this proof.</p></div><label for="job">Job title<input id="job" type="text" required pattern=".*\S.*" placeholder="Autumn studio booklet" aria-describedby="job-error"></label><span class="form-error" id="job-error" data-form-error-for="job">Enter a job title.</span><div class="grid-x grid-margin-x"><div class="cell small-6"><label for="pages">Pages<input id="pages" data-validator="booklet" type="number" value="16" min="4" max="200" step="4" required aria-describedby="pages-error"></label><span class="form-error" id="pages-error" data-form-error-for="pages">Use a multiple of four, from 4 to 200.</span></div><div class="cell small-6"><label for="copies">Proof copies<input id="copies" data-validator="copies" type="number" value="2" min="1" max="10" required aria-describedby="copies-error"></label><span class="form-error" id="copies-error" data-form-error-for="copies">Use a whole number from 1 to 10.</span></div></div><label for="stock">Paper stock<select id="stock"><option>Uncoated / warm white</option><option>Coated / bright white</option><option>Recycled / natural</option></select></label><fieldset class="fieldset"><legend>Preflight check</legend><input id="bleed" type="checkbox" required aria-describedby="bleed-error"><label for="bleed">Bleed and safe area have been checked</label><span class="form-error" id="bleed-error" data-form-error-for="bleed">Complete the preflight check.</span></fieldset><div class="button-group"><button type="submit" class="button">Review proof</button><button type="reset" class="button hollow secondary">Reset</button></div></form><div id="result" class="callout secondary" role="status">No proof recorded. This preview does not submit a print order.</div></section><aside class="cell medium-5"><div class="paper-preview" aria-label="Original booklet cover illustration"><span>STUDIO<br>NOTES</span><div class="paper-circle"></div><strong>08 / AUTUMN</strong></div><div class="callout"><h2 class="h5">Why four-page increments?</h2><p>This example assumes folded booklet signatures. It is a local preflight rule, not a universal printing requirement.</p><p>Confirm production constraints with the actual printer before using this pattern.</p></div></aside></div></main><div class="reveal" id="proof-review" data-reveal aria-labelledby="review-title"><h2 id="review-title">Review the proof details</h2><dl id="proof-summary"></dl><p>This confirms only the local example. No file is uploaded and no print order is created.</p><button id="confirm" class="button">Record local proof</button><button class="button hollow secondary" data-close>Keep editing</button><button class="close-button" data-close aria-label="Close review" type="button"><span aria-hidden="true">×</span></button></div>

```

[Code reference](https://get.foundation/sites/docs/xy-grid.html)

- The form has data-abide and novalidate so Abide owns the error flow.
- Reveal is identified by a unique ID and data-reveal.

### Custom Abide validators and Reveal flow

Validators are registered before Foundation initialization; formvalid opens a snapshot in Reveal.

```javascript
Foundation.Abide.defaults.validators.booklet=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=4&&n<=200&&n%4===0};
Foundation.Abide.defaults.validators.copies=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=1&&n<=10};
$(document).foundation();let pending=null;
$('#proof-form').on('submit',event=>event.preventDefault()).on('formvalid.zf.abide',()=>{pending={title:$('#job').val().trim(),pages:Number($('#pages').val()),copies:Number($('#copies').val()),stock:$('#stock').val()};const list=document.getElementById('proof-summary');list.replaceChildren();for(const[label,value]of [['Job',pending.title],['Pages',pending.pages],['Proof copies',pending.copies],['Stock',pending.stock]]){const dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=label;dd.textContent=value;list.append(dt,dd);}$('#proof-review').foundation('open');}).on('forminvalid.zf.abide',()=>{document.querySelector('#proof-form [data-invalid]')?.focus()}).on('reset',()=>{$('#result').text('No proof recorded. This preview does not submit a print order.')});
$('#confirm').on('click',()=>{$('#result').text('Recorded locally: '+pending.title+' — '+pending.pages+' pages, '+pending.copies+' proof copies. No order was created.');$('#proof-review').foundation('close')});

```

[Code reference](https://get.foundation/sites/docs/abide.html)

- The step attribute alone did not enforce four-page increments in this tested Abide path; the custom validator does.
- Only a valid form opens the review dialog.

### Original cover and layout refinements

CSS artwork and page-specific typography, separate from default Foundation settings.

```css
body{background:#f6f5f1}.proof-desk{max-width:1100px;padding-top:32px;padding-bottom:32px}header{margin-bottom:32px;max-width:760px}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:700;color:#596456}h1{font-size:38px;line-height:1.15}.lead{font-size:18px;color:#53606a}form{background:white;padding:24px;border:1px solid #ddd}.paper-preview{background:#e3d8bd;aspect-ratio:4/3;padding:24px;position:relative;overflow:hidden;margin-bottom:20px}.paper-preview span{position:relative;z-index:1;font-size:36px;line-height:1;font-weight:700;letter-spacing:-.04em;color:#31483b}.paper-circle{position:absolute;width:75%;aspect-ratio:1;background:#718474;border-radius:50%;top:25%;left:40%}.paper-preview strong{position:absolute;bottom:20px;left:24px;color:#31483b;font-size:12px;letter-spacing:.13em}.callout h2{font-weight:600}#result{margin-top:16px}.reveal dl{display:grid;grid-template-columns:110px 1fr;gap:10px}.reveal dd{overflow-wrap:anywhere}.button:focus-visible{outline:3px solid #143e5b;outline-offset:3px}@media(max-width:639px){h1{font-size:30px}form{padding:18px}.paper-preview{margin-top:16px}}

```

[Code reference](https://get.foundation/sites/docs/global.html)

- All cover colors are application choices.

## Implementation Starting Point

The supplied app.js registers Abide validators before initialization and wires Reveal to a valid form event. Save the original CSS as style.css. The local preview inlines these same dependencies. The HTML wrapper includes the full body markup; save the supplied interaction and CSS examples under the filenames referenced here.

```html
<!-- npm install foundation-sites@6.9.0 jquery@3.7.1
mkdir -p assets
cp node_modules/foundation-sites/dist/css/foundation.min.css assets/
cp node_modules/foundation-sites/dist/js/foundation.min.js assets/
cp node_modules/jquery/dist/jquery.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Proof desk</title>
<link rel="stylesheet" href="assets/foundation.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/jquery.min.js" defer></script>
<script src="assets/foundation.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="grid-container proof-desk"><header><p class="eyebrow">FOUNDATION / PRINT PROOF DESK</p><h1>Check the job before it leaves the desk.</h1><p class="lead">A local proof checklist built with XY Grid, Abide and Reveal.</p></header><div class="grid-x grid-margin-x"><section class="cell medium-7"><form id="proof-form" data-abide data-validate-on="submit" novalidate><div data-abide-error class="alert callout" style="display:none" role="alert"><p>Check the marked fields before reviewing this proof.</p></div><label for="job">Job title<input id="job" type="text" required pattern=".*\S.*" placeholder="Autumn studio booklet" aria-describedby="job-error"></label><span class="form-error" id="job-error" data-form-error-for="job">Enter a job title.</span><div class="grid-x grid-margin-x"><div class="cell small-6"><label for="pages">Pages<input id="pages" data-validator="booklet" type="number" value="16" min="4" max="200" step="4" required aria-describedby="pages-error"></label><span class="form-error" id="pages-error" data-form-error-for="pages">Use a multiple of four, from 4 to 200.</span></div><div class="cell small-6"><label for="copies">Proof copies<input id="copies" data-validator="copies" type="number" value="2" min="1" max="10" required aria-describedby="copies-error"></label><span class="form-error" id="copies-error" data-form-error-for="copies">Use a whole number from 1 to 10.</span></div></div><label for="stock">Paper stock<select id="stock"><option>Uncoated / warm white</option><option>Coated / bright white</option><option>Recycled / natural</option></select></label><fieldset class="fieldset"><legend>Preflight check</legend><input id="bleed" type="checkbox" required aria-describedby="bleed-error"><label for="bleed">Bleed and safe area have been checked</label><span class="form-error" id="bleed-error" data-form-error-for="bleed">Complete the preflight check.</span></fieldset><div class="button-group"><button type="submit" class="button">Review proof</button><button type="reset" class="button hollow secondary">Reset</button></div></form><div id="result" class="callout secondary" role="status">No proof recorded. This preview does not submit a print order.</div></section><aside class="cell medium-5"><div class="paper-preview" aria-label="Original booklet cover illustration"><span>STUDIO<br>NOTES</span><div class="paper-circle"></div><strong>08 / AUTUMN</strong></div><div class="callout"><h2 class="h5">Why four-page increments?</h2><p>This example assumes folded booklet signatures. It is a local preflight rule, not a universal printing requirement.</p><p>Confirm production constraints with the actual printer before using this pattern.</p></div></aside></div></main><div class="reveal" id="proof-review" data-reveal aria-labelledby="review-title"><h2 id="review-title">Review the proof details</h2><dl id="proof-summary"></dl><p>This confirms only the local example. No file is uploaded and no print order is created.</p><button id="confirm" class="button">Record local proof</button><button class="button hollow secondary" data-close>Keep editing</button><button class="close-button" data-close aria-label="Close review" type="button"><span aria-hidden="true">×</span></button></div>
</body></html>
```

## Agent Prompt

Start from the supplied Foundation 6.9.0 print-proof desk, its XY Grid markup, Abide validators and Reveal flow. Keep the integer and multiple-of-four page-count checks and submit-driven validation, preserving labels and error associations. Open the native Reveal review only for valid proof details, and keep cancellation separate from local confirmation. Retain the full initialization and original layout CSS; do not replace the validators with visual error classes alone or imply that a print job was ordered.

## Sources

- [Global styles](https://get.foundation/sites/docs/global.html) — Sass foundations and palette.
- [XY Grid](https://get.foundation/sites/docs/xy-grid.html) — Cell widths and gutter types.
- [Abide](https://get.foundation/sites/docs/abide.html) — Validation rules and events.
- [Reveal](https://get.foundation/sites/docs/reveal.html) — Modal anatomy and API.
- [JavaScript](https://get.foundation/sites/docs/javascript.html) — Dependency loading and initialization.
- [Forms](https://get.foundation/sites/docs/forms.html) — Native form markup and styling.