# NachoDS

This file is the entry point to the NachoDS (version 0.1.0) for people and AI tools. Everything a piece of on-brand work needs is here or one link away: the colors, the fonts and where to get them, the logo files, the asset formats, and the guidance pages. Take every color, font, logo, and image from this system; when it lacks something, say so rather than inventing it.

Machine-readable index: /index.json — every page below links to its Markdown mirror.
Full text: /llms-full.txt — every page's Markdown in one file.
Design tokens: /tokens.json — every CSS custom property the pages load, resolved by scope.
Brand kit: /brand.json — role colors and fonts, logos, and imagery for on-brand production.
Asset formats: /formats.json — every print sheet and screen canvas with its size, bleed, and safe margin.
Website designs: /designs.json — whole pages as HTML with JavaScript on the system's stylesheets, the reference a product port must match.
Consumer bundle: /bundle.json — the stylesheets, scripts, and assets a website loads from this system, each with its digest; a website pins the immutable copy it names under `versioned`.

## Colors

- Background (`color.background`): `#f5f7fa` — CSS `var(--color-canvas)`
- Panel (`color.panel`): `#ffffff` — CSS `var(--color-surface)`
- Accent (`color.accent`): `#2457d6` — CSS `var(--color-accent)`
- Text (`color.text`): `#17202a` — CSS `var(--color-ink)`
- Muted text (`color.muted`): `#5d6876` — CSS `var(--color-muted)`

## Fonts

- Display (headlines) (`font.display`): **Georgia** — CSS `Georgia, "Times New Roman", serif` — a system font stack; rendering may use a platform fallback
- Body (`font.body`): **ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif** — CSS `ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` — a system font stack; rendering may use a platform fallback
- UI (`font.ui`): **ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif** — CSS `ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` — a system font stack; rendering may use a platform fallback

## Asset formats

### print

- Letterhead · US Letter (`letterhead`): 8.5 × 11 in · bleed 0.125 in · safe 0.5 in · 70–80 lb uncoated text, white or natural; laser and inkjet compatible. · Minimal prints without bleed in the office; Accent and Bold need a press with bleed. · guidance page planned
- Second sheet · US Letter (`letterhead-second`): 8.5 × 11 in · bleed 0.125 in · safe 0.5 in · Same stock as the first sheet. · guidance page planned
- Business card · US (`business-card`): 3.5 × 2 in · bleed 0.125 in · safe 0.125 in · 16–32 pt uncoated or soft-touch cover. · guidance page planned
- Tri-fold brochure · letter (`brochure`): 11 × 8.5 in · bleed 0.125 in · safe 0.25 in · 100 lb gloss or silk text; 80 lb uncoated for Minimal. · Roll fold: the tuck-in panel is 1/16″ narrower than the other two. · guidance page planned
- Booklet · 6 × 9 trade (`booklet`): 6 × 9 in · bleed 0.125 in · safe 0.375 in · Interior 60–70 lb natural uncoated text; cover 100 lb cover with matte laminate. · Saddle-stitched at 48 pages or fewer with a page count that is a multiple of 4; perfect bound above that. · guidance page planned
- Worksheet · US Letter (`worksheet`): 8.5 × 11 in · safe 0.5 in · 24 lb bond or 70 lb uncoated text so it takes pen and pencil. · No bleed: a white margin on every template so it prints on any office printer. · guidance page planned
- Calendar · US Letter (`calendar`): 8.5 × 11 in · bleed 0.125 in · safe 0.5 in · 100 lb uncoated cover, so the sheet pins flat and takes pen. · Two single-sheet templates share this format: the year at a glance and the month page. · guidance page planned
- Notepad · half letter (`notepad`): 5.5 × 8.5 in · bleed 0.125 in · safe 0.375 in · 60–70 lb uncoated text, 50 sheets, padded at the head onto chipboard. · Top-glued: the padding compound takes about 1/8″ at the head, so nothing sits above the safe line. · guidance page planned
- Desk pad · 4 × 6 (`notepad-desk`): 4 × 6 in · bleed 0.125 in · safe 0.25 in · Same text stock, 50 sheets, padded at the head. · guidance page planned
- Retractable pull-up banner (`pull-up`): 33 × 80 in · bleed 0.5 in · safe 1 in · 13 oz anti-curl vinyl or polyester fabric. · The bottom 8″ disappears into the stand cassette; keep everything critical above it. · guidance page planned
- Hanging or table banner (`wide-banner`): 96 × 36 in · bleed 0.5 in · safe 1.5 in · 13 oz matte vinyl with grommets, or dye-sublimated fabric. · Grommets sit 1″ in from each corner and every 24″; nothing within 1.5″ of the edge. · guidance page planned
- Poster · tabloid (`poster-11x17`): 11 × 17 in · bleed 0.125 in · safe 0.5 in · 100 lb gloss text; in-office or digital press. · guidance page planned
- Poster · medium (`poster-18x24`): 18 × 24 in · bleed 0.125 in · safe 0.75 in · 100 lb silk cover or 9 mil satin photo paper. · guidance page planned
- Poster · large (`poster-24x36`): 24 × 36 in · bleed 0.125 in · safe 1 in · 9 mil satin photo paper; foam-core mount for easels. · guidance page planned
- Poster · one-sheet (`poster-27x40`): 27 × 40 in · bleed 0.125 in · safe 1 in · 9 mil satin photo paper, or backlit film for light boxes. · guidance page planned

### digital

- Medium rectangle (`gdn-300x250`): 300 × 250 px · safe 12 px · max 150 KB · PNG or JPG · guidance page planned
- Large rectangle (`gdn-336x280`): 336 × 280 px · safe 12 px · max 150 KB · PNG or JPG · guidance page planned
- Leaderboard (`gdn-728x90`): 728 × 90 px · safe 8 px · max 150 KB · PNG or JPG · guidance page planned
- Billboard (`gdn-970x250`): 970 × 250 px · safe 14 px · max 150 KB · PNG or JPG · guidance page planned
- Half page (`gdn-300x600`): 300 × 600 px · safe 14 px · max 150 KB · PNG or JPG · guidance page planned
- Wide skyscraper (`gdn-160x600`): 160 × 600 px · safe 10 px · max 150 KB · PNG or JPG · guidance page planned
- Mobile banner (`gdn-320x50`): 320 × 50 px · safe 6 px · max 150 KB · PNG or JPG · Too small for a disclaimer line; do not use it where one is required. · guidance page planned
- Large mobile banner (`gdn-320x100`): 320 × 100 px · safe 8 px · max 150 KB · PNG or JPG · guidance page planned
- Responsive landscape (`rda-1200x628`): 1200 × 628 px · safe 60 px · max 5120 KB · JPG · The platform crops and overlays its own copy on responsive ads; keep text off the image. · guidance page planned
- Responsive square (`rda-1200x1200`): 1200 × 1200 px · safe 60 px · max 5120 KB · JPG · The platform crops and overlays its own copy on responsive ads; keep text off the image. · guidance page planned
- Webinar page hero (`web-1920x600`): 1920 × 600 px · safe 80 px · JPG, under 400 KB · The outer 240 px crop away on narrow screens; keep copy in the centre 1440 px. · guidance page planned
- Registration banner (`web-1200x628`): 1200 × 628 px · safe 60 px · JPG or PNG · guidance page planned
- Webinar title slide (`web-1920x1080`): 1920 × 1080 px · safe 96 px · PNG · guidance page planned
- Virtual background (`zoom-1920x1080`): 1920 × 1080 px · safe 96 px · JPG or PNG, under 5 MB · The speaker covers the central keep-clear region; the brand sits top left and the message upper right. · guidance page planned
- Email header (`email-1200x400`): 1200 × 400 px · safe 48 px · JPG at 2×, displayed 600 × 200 · guidance page planned
- Email signature banner (`sig-1200x200`): 1200 × 200 px · safe 24 px · PNG at 2×, displayed 600 × 100 · guidance page planned
- Website promo hero (`site-1920x800`): 1920 × 800 px · safe 96 px · WebP or JPG, under 300 KB · guidance page planned
- Website promo strip (`site-1440x120`): 1440 × 120 px · safe 24 px · HTML preferred; WebP fallback · guidance page planned
- Business profile post (`gbp-1200x900`): 1200 × 900 px · safe 60 px · JPG or PNG · guidance page planned

### social

- Eventbrite event image (`eventbrite-2160x1080`): 2160 × 1080 px · safe 108 px · JPG or PNG, under 10 MB · Listings crop toward the centre; keep the headline in the middle 1600 px. · guidance page planned
- Facebook event cover (`fb-event-1920x1005`): 1920 × 1005 px · safe 96 px · JPG or PNG · guidance page planned
- LinkedIn event cover (`li-event-1776x444`): 1776 × 444 px · safe 64 px · JPG or PNG · guidance page planned
- Webinar promo post (`webinar-1080x1080`): 1080 × 1080 px · safe 64 px · JPG or PNG · guidance page planned
- Webinar story (`webinar-1080x1920`): 1080 × 1920 px · safe 64 px · JPG or PNG · guidance page planned
- Facebook square post (`fb-1080x1080`): 1080 × 1080 px · safe 64 px · JPG or PNG · guidance page planned
- Facebook link or landscape post (`fb-1200x630`): 1200 × 630 px · safe 60 px · JPG or PNG · guidance page planned
- Facebook story (`fb-1080x1920`): 1080 × 1920 px · safe 64 px · JPG or PNG · guidance page planned
- Instagram square (`ig-1080x1080`): 1080 × 1080 px · safe 64 px · JPG · guidance page planned
- Instagram portrait (`ig-1080x1350`): 1080 × 1350 px · safe 64 px · JPG · The profile grid crops portrait posts to 3:4; keep copy inside the centred 1012 × 1350. · guidance page planned
- Instagram story or reel cover (`ig-1080x1920`): 1080 × 1920 px · safe 64 px · JPG · guidance page planned
- Meta feed ad (`meta-1080x1080`): 1080 × 1080 px · safe 64 px · JPG or PNG · guidance page planned
- Meta feed ad · portrait (`meta-1080x1350`): 1080 × 1350 px · safe 64 px · JPG or PNG · guidance page planned
- LinkedIn sponsored (`li-1200x627`): 1200 × 627 px · safe 60 px · JPG or PNG · guidance page planned

## brand

- [Color](/brand/color/index.md): Every color is a token. Pages and components read the custom property, never the value, so changing one token recolors the whole system.
- [Typography](/brand/typography/index.md): A serif sets headings, a sans sets everything read at length, and a mono names tokens and code.

## digital

- [The digital design system](/digital/index.md): Paid ads, event banners, and promotional graphics for screens: everything placed in front of people who have not visited the website yet, and the banners that bring them to an event. It uses the Brand

## index

- [NachoDS](/index.md): Repository-owned visual and interface standards.

## print

- [The print design system](/print/index.md): How the brand meets paper, vinyl, and board: stationery, collateral, desk and office pieces, and event display. It uses the Brand view's mark, type, and palette, and adds what the screen never needs: 

## social

- [The social design system](/social/index.md): How the brand shows up on social channels. It inherits the identity from the Brand view and adapts it to fixed-canvas, mobile-first surfaces, then layers on the platform specs, the post and event temp

## use

- [Using the system](/use/index.md): NachoDS is published once and read many ways: as these pages in a browser, as one text file an AI tool reads, as a machine-readable layer a script joins, over MCP for an agent, as a pinned bundle a we

## web

- [Components](/web/components/index.md): Each component is a live preview, the rules for using it, and the markup to copy. Their styles live in `/styles/system.css`.
- [Spacing & shape](/web/spacing/index.md): The values that fix rhythm and geometry: one spacing scale, three radii, the constants of the page shell, and how long a state change takes.