OCAI GO — website design and working rules
Revised 12 October 2026

PURPOSE

Create new websites using the OCAI GO design saved in this Project.
OCAI GO means Okanagan College AI Growth Opportunities.
Keep that exact name and expansion.
The audience includes faculty, staff, administrators and students.

This file contains the complete working and layout rules for this Project.
Use it with ocai-go-web-template.html, or its identical .txt source.

WHAT TO FOLLOW

Use the new source I provide for the subject matter.
Use the saved reference files for design, reusable elements and layout.
The HTML template contains sample text. Replace it with the new content.

Read the complete source and the relevant design files before planning.
Open the actual reference file, not just a text summary of it.
If you can only read the words in a reference and cannot inspect its layout,
images or styles, say so before building. Do not claim to have matched it.

My specific instructions for the current task take priority.
Next follow this file's detailed layout rules, then its general working rules.
Use the template's styles, components and embedded assets wherever possible.
Preserve existing formatting when the reference already supplies it.
If the template and a written rule disagree, identify the difference; do not
quietly substitute a third design.

COLOUR PALETTE

Use these approved OCAI GO colours for the website:
- Cabernet #6E1E32: headings and accents.
- Deep cabernet #421524: dark headers and footer fields.
- Cherry #B5121B: occasional emphasis.
- Gold #F4B000: small labels, markers and selected controls.
- Paper #FFFAF4: light reading backgrounds.
- Cream #F7EEE7: shaded panels and cards.
- Ink #2B2928: normal text.
- Muted #6D625D: supporting text; line #E3D2C7: subtle borders.
- White #FFFFFF: light text on dark backgrounds and white panels where supplied.

Follow the detailed website colour roles and box treatments below.
Keep accent colours tied to a purpose, with gold as a small highlight.
Use light text on dark backgrounds and dark text on gold.
Do not recolour the pixels in supplied logos, photographs or source diagrams.

SOURCE CONTENT AND WORDING

Preserve the source's meaning, important facts, qualifications and distinctions.
Show any planned shortening or omission before making the finished output.
Do not invent statistics, quotations, contact details, policies or citations.
Identify examples as examples and unconfirmed details as unconfirmed.
Use familiar words and direct sentences. Explain unfamiliar terms when needed.
Name the topic clearly in headings. Avoid slogans and vague announcements.
Use tables for comparisons and diagrams when they explain a relationship.
Keep supporting detail in readable web prose.

Keep the source's attribution and licence notice, including a supplied URL.
Keep a full notice somewhere readable; do not reduce it to an unexplained icon.
If the source covers the four Ds, retain all four, including Description.
Do not replace a source's four Ds with OCAI GO's three-D operating frame.
Only apply OCAI GO's program structure when the task concerns the program.

LOGOS AND IMAGES

Use the supplied OCAI GO and College images. Never generate a replacement logo.
Preserve each image's proportions, colour, background and transparent areas.
Do not crop, stretch, outline, recolour or add a shadow to a logo.
Keep the reference's logo size and placement on comparable layouts.
Leave the reference's surrounding clear space free of other content.
For a new College-logo placement, leave clear space at least the diameter
of the first O in the Okanagan wordmark.

Use the images embedded in the HTML template before requesting extra
uploads. Preserve the embedded logo and favicon data in the new HTML file.

Use source images only when relevant to the new task. An earlier session's
diagram or photograph is not automatically a reusable design element.
Flag a missing required image. Do not invent an official image to replace it.
Give informative images concise alternative text. Keep decorative elements
out of the reading order where the output format supports that.

BUILD AND REVISE

First show a short plan listing:
- the new material's purpose and audience;
- section headings and the main content under each;
- the proposed layout for each part;
- any shortening, omissions, missing assets or font substitutions.

Let me review that plan before creating the finished output.
Create the actual working HTML file after the review.
An outline or image preview is not the finished file.
If the account cannot create or inspect the requested file, explain that early.
Do not promise that saved instructions enable a tool the account does not have.

When I request a change, edit the named part and preserve the rest, including
manual refinements. Do not regenerate the whole output for a small correction.
When I approve a reusable design change, give me the revised website-design-rules.txt
and, if needed, revised HTML template. I will replace the saved Project files.
Do not leave the only record of a design decision in chat history.

CHECK BEFORE DELIVERY

Compare the content against the new source, including qualifications and credits.
Compare the result against the saved design: colours, type, spacing, logos,
layouts and interactions. Check every page section.
Repair clipped text, overlap, unreadable contrast, missing images and broken links.
Use the detailed checks below; report any you cannot perform.
Say what file is ready to use and identify any remaining problem affecting it.
Never report a visual inspection, successful download or fresh-chat reuse test
unless it happened.

REUSE

Start a new task with the same saved design and a new content source.
Re-read the relevant saved files; do not depend on the earlier chat's memory.
Keep the design, replace the content, and check the new result again.

DETAILED LAYOUT AND FILE RULES

Use the saved HTML template.
If HTML upload is rejected, use the identical ocai-go-web-template.txt source.
Start from the supplied HTML template and replace its sample content.
Its approved styles, embedded logo/favicon and working controls are reusable.
Do not reconstruct the design from this description when the template is readable.

OUTPUT AND SCOPE

One working, downloadable HTML file for the demo, with embedded styles,
scripts, logo and favicon. It should open without an internet connection.
If new pictures/downloads need separate files, supply an adjacent assets folder
and use assets/<filename> links. Never use a drive path or parent-folder link.
Distinguish a downloadable page from an Artifact or page running inside an app.

This standalone guide uses the actual OCAI GO presentation: masthead,
decorative O, reading area, boxes, navigation and footer.
The demo sidebar links to this guide's sections, in the same 240 px layout.
It does not pretend the full course's other pages have been supplied.
For a course page, use real navigation and confirmed relative links only
when I supply the course files or explicitly request that integration.
Do not invent a schedule, session list, return link or download destination.

PRESERVE THE TEMPLATE

Keep complete style/script blocks, embedded image data and favicon.
Change title, label, subtitle, section links/IDs and marked content areas.
Choose only components needed for the new content; delete unused samples.
Clone an existing component for repeated elements instead of designing new ones.
Keep the footer name and tagline. Replace its sample source notice with the
new source's attribution/licence. Remove all sample text from the finished page.

Use meaningful unique section IDs. Update matching links whenever an ID changes.
Keep Start here linked to the opening, without a visible Start Here heading.
Do not add an "On this page" content section.
One-document guides use horizontal links directly beneath the hero.
Menu stays visible while scrolling, wraps on a phone and leaves clicked
headings fully visible. Retain the script measuring the menu height.

COLOURS

Cabernet #6E1E32; deep cabernet #421524; cherry #B5121B; gold #F4B000.
Paper #FFFAF4; cream #F7EEE7; white #FFFFFF; outer background #F0E9E3.
Normal text #2B2928; muted text #6D625D; borders #E3D2C7.
Keep the dark hero/footer, cream reading area and restrained gold accents.
Use the actual OCAI GO logo. Never recolour it to match the CSS red.

TYPE

Body stack: Avenir Next, Avenir, Aptos, Segoe UI, Arial, sans-serif.
Heading stack: Iowan Old Style, Palatino Linotype, Book Antiqua, Palatino,
Georgia, serif. Keep the stack; availability determines which font displays.
Base: 18 px; body line height: 1.75. Normal text left-aligned.
Main heading: 2.25–3.5 rem responsive; letter spacing -0.035 em.
Section: 2 rem (36 px); subheading: 1.5 rem (27 px).
Smaller heading: 1.1 rem (19.8 px). Main heading line height: 1.2.
Lead: 1.3 rem, line height 1.65, maximum width 760 px.
Hero subtitle: 1.18 rem, line height 1.65, maximum width 720 px.
The 760 px limit applies to the lead, not every body paragraph.
Paragraph bottom margin: 1.4 rem; list-item vertical margin: 0.65 rem.

LAYOUT, BRANDING AND SPACING

Site maximum width: 1440 px; desktop sidebar: 240 px, sticky at 20 px.
Masthead padding: 28 × 38 px; cherry top border: 8 px; logo width: 165 px.
Pair logo with Okanagan College / AI Growth Opportunities, separated by
the supplied vertical rule and 26 px gap. Preserve logo proportions.
Hero padding: 62 px top, 6% sides, 64 px bottom.
Keep the faint gold circular O behind the text. It must not cover text or
intercept clicks; retain positioning, opacity and mobile adjustment.
Reading padding: 54 px top, 6% sides, 68 px bottom.
Sections: 72 px separation; following sections have thin top border and
62 px top padding. Section subheadings have 56 px top spacing where defined.
Normal box: 32 × 34 px padding, 38 px vertical margin, thin border,
5 px cabernet top edge. Retain exact corner/shadow treatments.
Two-column feature cards: 28 px gap, 30 px padding, 5 px cabernet top edge.
Footer: deep cabernet, padding 38 px and 6%; gold OCAI GO name, readable credits,
exact tagline "Learn by building something useful."
Retain supplied partial-gold-O favicon, already embedded in the file.

CHOOSE THE RIGHT BOX

Use a box for a particular kind of content, not every paragraph.
Retain these template classes and their treatments:
- Normal explanation: white, cabernet top edge.
- Try it / promise: pale gold #FFF5DF, gold top edge.
- Warning: #FFF7DF, brown #8C6210 top edge.
- Artifact / useful output: deep cabernet, gold 6 px left edge, light text,
  gold headings and strong text.
- Human checkpoint / three Ds: #F3F6F8, gold top edge.
- Resources: cream, cherry top edge.
- Prompt: #FBF7F3, gold top edge.
- Tool card: normal treatment with supplied subtle shadow.

Expandable examples use native details/summary. Retain appearance and keyboard
behaviour. Start collapsed unless the task needs immediately visible instructions.
Prompt/code text uses the dark selectable block, gold 6 px left edge and wrapped
text. Keep Copy, success/failure feedback and manual-selection fallback.
Without JavaScript, prompts remain visible and selectable.
Images have the supplied light border/caption treatment; add useful alt text.

PHONE, KEYBOARD AND PRINT

Retain 1000 px and 760 px breakpoints.
At 1000 px, feature cards become one column and some padding is reduced.
At 760 px, sidebar becomes collapsible, logo is 140 px, hero padding is
42/24/46 px and reading padding is 38/24/48 px.
Heading sizes become 2.25, 1.8 and 1.4 rem. Retain template mobile spacing.
Allow links, headings and long words to wrap without horizontal page overflow.
Wide tables may scroll within their own container.
Keep skip link, visible keyboard focus and Copy status announcements.
Keep print styles: remove navigation/Copy; use white backgrounds/dark text;
hide decorative O; show readable content and source credits.

CHECK THE FINISHED PAGE

Open at desktop and phone widths. Inspect all sections, expanded examples,
dark boxes, navigation and footer.
Check logo/favicon, section IDs/links, images, downloads and keyboard focus.
Click section links: headings must not hide behind the sticky menu.
Test Copy and failure/manual selection; check without JavaScript.
Check no horizontal page overflow; preview print styles.
Confirm complete new content/source notice and no remaining sample text.
Check the page after moving it to another folder.
Report any check unavailable. An app preview alone does not verify downloaded HTML.