--- name: hiast-visual-identity description: apply the hiast visual identity to designed or formatted outputs. use when the user asks for hiast branding, hiast colors, hiast typography, hiast visual style, or any output aligned with the identity of the higher institute for applied sciences and technology. focus strictly on visual identity: color system, qomra arabic typography, rtl arabic layout, spacing, visual hierarchy, and institutional consistency. do not impose content structures, dashboards, academic sections, metrics, or data models unless explicitly requested. --- # HIAST Visual Identity ## Core behavior Apply the HIAST visual identity to any requested visual or formatted output. Focus strictly on visual identity: colors, typography, RTL layout, spacing, hierarchy, institutional consistency, and disciplined visual composition. Do not force a dashboard structure, KPI layout, academic model, teaching methodology, invented data, metrics, tables, or educational sections unless the user explicitly asks for them. ## Identity scope Use this identity system whenever the output should visually belong to HIAST or the Higher Institute for Applied Sciences and Technology. Applicable outputs include: - HTML pages and landing pages. - Presentations and slide decks. - Reports and institutional documents. - Lecture materials and classroom screens. - Infographics and visual summaries. - Posters, announcement cards, and communication assets. - Tables, forms, templates, and structured pages. - Any Arabic or bilingual formatted output requiring HIAST visual consistency. ## Visual identity system Use the following palette as the default HIAST brand system: ```css :root { --hiast-green: #054239; --hiast-deep: #002623; --hiast-gold: #B9A779; --hiast-beige: #EDEBE0; --hiast-burgundy: #4A151E; --hiast-burgundy-2: #6B1F2A; --hiast-white: #FFFFFF; --hiast-black: #000000; --hiast-gray-50: #F5F5F2; --hiast-gray-200: #D7D5CA; --hiast-gray-600: #6B6B6B; --hiast-gray-900: #2B2B2B; } ``` Apply colors as follows: - Use dark green `#054239` as the dominant institutional color. - Use deep green `#002623` for headers, footers, title bands, strong blocks, and high-contrast areas. - Use gold `#B9A779` for emphasis, section markers, borders, dividers, refined highlights, and key accents. - Use light beige `#EDEBE0` and controlled neutral grays for calm formal backgrounds. - Use burgundy `#4A151E` and `#6B1F2A` only for warnings, risks, urgent notes, secondary contrast blocks, or limited accent areas. - Use white for clean reading surfaces and content cards. - Avoid bright unrelated colors, saturated decorative gradients, informal palettes, and inconsistent accent colors. ## Typography Use Qomra Arabic as the primary HIAST Arabic typeface through the hosted font URL. Use this font definition in HTML/CSS outputs: ```css @font-face { font-family: "Qomra Arabic"; src: url("http://hiast-cie.sy/fonts/itfQomraArabic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } body { font-family: "Qomra Arabic", Tahoma, Arial, sans-serif; } .latin, code, .metric-code, .technical-label { font-family: "Cascadia Mono", Consolas, Monaco, monospace; } ``` Typography rules: - Use `"Qomra Arabic"` as the primary Arabic font. - Load the font from `http://hiast-cie.sy/fonts/itfQomraArabic-Regular.woff2`. - Use fallback fonts only when the hosted font is unavailable. - Use monospaced fonts only for Latin labels, codes, formulas, technical identifiers, or compact data labels. - Do not use decorative Arabic fonts. - Do not use `Changa` or unrelated web fonts. - Do not attach, embed, redistribute, or package font files. ## Direction and language Use Arabic RTL layout by default when the content is Arabic: ```html ``` For bilingual outputs: - Keep Arabic as RTL. - Keep English or code-like labels readable in LTR spans where needed. - Preserve correct alignment for numbers, formulas, URLs, and Latin technical labels. - Avoid mixed-direction clutter. ## Layout principles Use a formal, geometric, technical, and institutional layout. General layout rules: - Align Arabic content naturally to the right. - Use clear hierarchy between titles, subtitles, sections, cards, tables, captions, notes, and footers. - Avoid centering all content unless the design specifically requires it. - Use consistent spacing and strong visual grouping. - Prefer grids, columns, cards, bands, and structured containers. - Make the design suitable for the target medium: screen, print, slide, projector, report, or web page. - Keep the layout calm, disciplined, and readable. ## Visual style Preferred visual elements: - Geometric cards and containers. - Thin gold separators. - Dark green title zones. - Beige or neutral backgrounds. - Subtle technical grid or angular motifs. - Moderate border radius. - Minimal shadows. - Strong contrast between text and background. - Clear section markers. - Borders and color blocks instead of heavy effects. Avoid: - Decorative noise. - Excessive animation. - Weak contrast. - Tiny text. - Informal colors. - Heavy shadows. - Excessive emoji or icons. - Overly playful design language. - Random gradients or unrelated graphic styles. ## Medium-specific guidance For HTML outputs: - Produce a complete ready-to-open HTML document when the user asks for a file or page. - Use embedded CSS unless the user requests separate files. - Use responsive CSS. - Include the hosted Qomra Arabic `@font-face` declaration. - Include print-friendly styling when appropriate. - Avoid unavailable local assets. - Do not require a build system. - Do not depend on external libraries unless explicitly requested. For presentations: - Use dark green title slides or section dividers. - Use gold sparingly for separators, numbering, and emphasis. - Use large, readable Arabic typography. - Keep each slide visually disciplined and uncluttered. - Avoid decorative templates that dilute the institutional identity. For documents and reports: - Use restrained headers, footers, dividers, and section markers. - Use green for structure and gold for refined emphasis. - Maintain generous margins and readable line spacing. - Use tables with clear borders, calm backgrounds, and strong header rows. For visual communication assets: - Keep the institutional tone formal and confident. - Use concise visual hierarchy. - Avoid social-media-like decoration unless the user explicitly requests a lighter communication style. ## Brand consistency checklist Before finalizing, verify: - The output is visually identifiable as HIAST through color, typography, and layout discipline. - HIAST green is the dominant color. - Gold is used as a restrained accent, not as a dominant background. - Burgundy is limited to warnings, risks, urgent notes, or secondary emphasis. - Qomra Arabic is used as the primary Arabic font where technically possible. - RTL handling is correct when Arabic is used. - Spacing, borders, cards, tables, and sections follow one consistent system. - The result looks academic, institutional, technical, and calm. - No unrelated colors, decorative fonts, noisy effects, or inconsistent visual motifs were introduced. - The design fits the requested output type without forcing a dashboard pattern. ## Minimal response format When tools are available and a file is created, return the file link with a brief note. When file creation is not available, provide the complete requested code, style guide, template, or formatted output directly, without long explanation.