--- bcp_version: "1.0" file_type: visual parent: https://registry.brandcontextprotocol.dev/interface-ai-c4f5e1a8/.well-known/brand.md last_updated: 2026-09-24 --- # Visual guidance > Public-source demonstration. These observations come from live interface.ai HTML, theme CSS, and Elementor kit variables checked 24 September 2026. They are website implementation evidence, not an official brand-guidelines pack. interface.ai has not reviewed or approved them. This file does not claim parity with a design system. ## Authority and DAM Canonical visual assets are referenced by URL on interface.ai. They are not assets hosted by Encoded or the Registry. ```yaml asset_distribution: status: observed hosts: - name: "interface.ai WordPress uploads" serves: "Logo SVG, favicon PNG, Elementor self-hosted Manrope, IBM Plex Serif, and Roboto files" - name: "interface.ai theme" serves: "Theme CSS that repeats the blue and gold" rules: - "BCP records these paths so agents and demos can load the live faces and the logo." - "Encoded does not re-host or redistribute the binaries in the BCP package or the Encoder repo." - "Paths can change when the site is edited. Re-verify against the live page before republishing." - "Observed public URLs are implementation evidence, not a license grant." - "Encoded interface.ai /examples demos may hotlink them for a page whose audience includes the brand." ``` ## Authority and gaps ```yaml visual_authority: status: observed source_grade: "website CSS and assets, not an official guidelines pack" observed_pages: - "https://interface.ai/" observed_stylesheets: - "https://interface.ai/wp-content/themes/interface-ai/assets/css/styles.css?ver=1.0" - "https://interface.ai/wp-content/themes/interface-ai/assets/css/outer.css?ver=1.0" - "https://interface.ai/wp-content/themes/interface-ai/style.css?ver=1.0" - "https://interface.ai/wp-content/uploads/elementor/css/base-desktop.css?ver=6a9a7bce4a2c1" - "https://interface.ai/wp-content/uploads/elementor/google-fonts/css/manrope.css?ver=1743835746" - "https://interface.ai/wp-content/uploads/elementor/google-fonts/css/ibmplexserif.css?ver=1743835758" - "https://interface.ai/wp-content/uploads/elementor/google-fonts/css/roboto.css?ver=1743835754" inline_evidence: "Elementor kit variables in a style block on the homepage, including .elementor-kit-145 button rules." not_confirmed: - "an official color system or accessibility pairing" - "font licensing beyond the files the site already serves" - "logo clear-space and minimum-size rules" - "email-client support for the self-hosted faces" - "which of the many observed radii is canonical" also_loaded_not_primary: - "Poppins from fonts.googleapis.com on the homepage. Not an Elementor global family." - "Inter and Bebas Neue named in theme CSS. Not the Elementor global stack." - "WordPress preset colors in the same HTML. Those are editor defaults, not the brand palette." ``` ## Logo The header logo on the homepage is the December 2023 SVG. A July 2023 SVG is in the markup with a `d-none` class. Both files use blue `#093EB0` and gold `#FDCD48`. Do not redraw the wordmark. ```yaml logo_usage: generation_policy: official_assets_only generation_instructions: "Do not draw, trace, or retype the wordmark. Hotlink the SVG." assets: - role: "header wordmark" url: "https://interface.ai/wp-content/uploads/2023/12/interface-logo.svg" format: svg viewbox: "0 0 149 27" status: "src on the visible header logo, checked 2026-09-24" - role: "earlier wordmark, hidden in the header markup" url: "https://interface.ai/wp-content/uploads/2023/07/interface-logo.svg" format: svg viewbox: "0 0 123 22" status: "present with class d-none" - role: "favicon" url: "https://interface.ai/wp-content/uploads/2023/07/cropped-interface-favicon-512x512-1.png" format: png status: "HTTP 200 on 2026-09-24. Cropped sizes are also linked from the homepage head." fills_observed_in_svg: - "#093EB0" - "#FDCD48" forbidden_modifications: - "retyping interface.ai in another font" - "stretching, rotating, outlining, or recoloring the SVG" - "placing the logo where it implies interface.ai approval of this demonstration" - "substituting a customer institution logo for the interface.ai mark" ``` ## Color Elementor global colors on the homepage are the primary record. Theme CSS repeats the same blue and gold. Hex values are copied from the page. ```yaml color: observed_tokens: - name: "--e-global-color-primary" hex: "#093EB0" role: "primary blue. Body text color on the kit button. Repeated throughout theme CSS." - name: "--e-global-color-secondary" hex: "#FDCD48" role: "gold. Kit button background. Also the accent token." - name: "--e-global-color-accent" hex: "#FDCD48" role: "same gold as secondary" - name: "--e-global-color-text" hex: "#000000" role: "Elementor text token" - name: "--e-global-color-75a8165" hex: "#06328E" role: "deeper blue in the kit" - name: "--e-global-color-6da534b" hex: "#FFFFFF" role: "white" - name: "--e-global-color-28c3899" hex: "#FDCD2D" role: "gold variant in the kit and in theme CSS" - name: "--e-global-color-4897664" hex: "#F0C22A" role: "gold variant" - name: "--e-global-color-109498c" hex: "#F2C42B" role: "gold variant" - name: "--e-global-color-6a3b855" hex: "#F9B700" role: "kit button hover background" observed_ink_and_surface: - hex: "#00091D" role: "near-navy text on a white homepage button" - hex: "#1B1D1C" role: "near-black used often in theme CSS" - hex: "#111827" role: "dark neutral in homepage post CSS" - hex: "#0F172A" role: "dark neutral in homepage post CSS" - hex: "#5A6577" role: "muted text in homepage post CSS" - hex: "#F3F8FF" role: "pale blue surface in homepage post CSS" - hex: "#EEF3FB" role: "pale blue surface" - hex: "#F3F7FF" role: "pale blue surface in theme CSS" rules: - "Use #093EB0 and #FDCD48 as the pair. Gold is the button field. Blue is the wordmark color and the label on that gold button." - "Keep body text on white or pale blue, not on gold." - "Do not import WordPress preset oranges, purples, or gradients. They are editor defaults in the same HTML." - "Do not invent a neon or purple AI palette." - "Do not infer print values from this web sample." ``` ## Typography Faces are self-hosted under the Elementor Google Fonts upload path. Encoded does not host the font files. ```yaml typography: observed_families: primary_and_text: family: "Manrope" token: "--e-global-typography-primary-font-family" also: "--e-global-typography-text-font-family" primary_observed: "40px, weight 600, line-height 45px" text_observed: "18px, weight 400, line-height 28px" evidence: "Elementor global typography on the homepage" editorial: family: "IBM Plex Serif" token: "--e-global-typography-d07686a-font-family" observed: "28px, weight 300, line-height 46px, letter-spacing -0.3px. A second token is 22px italic." evidence: "Elementor global typography on the homepage" accent: family: "Roboto" token: "--e-global-typography-accent-font-family" observed_weight: 500 evidence: "Elementor global typography. Secondary to Manrope on this homepage." observed_font_files: - family: "Manrope" style: normal weights_sharing_file: [200, 300, 400, 500, 600, 700, 800] format: woff2 subset: latin url: "https://interface.ai/wp-content/uploads/elementor/google-fonts/fonts/manrope-xn7gyhe41ni1adirggexsg.woff2" stylesheet: "https://interface.ai/wp-content/uploads/elementor/google-fonts/css/manrope.css?ver=1743835746" - family: "IBM Plex Serif" style: normal weight: 400 format: woff2 subset: latin url: "https://interface.ai/wp-content/uploads/elementor/google-fonts/fonts/ibmplexserif-jizdrevnn1dox-zrz2x3pzvktiuf2zc.woff2" stylesheet: "https://interface.ai/wp-content/uploads/elementor/google-fonts/css/ibmplexserif.css?ver=1743835758" - family: "IBM Plex Serif" style: normal weight: 300 format: woff2 subset: latin url: "https://interface.ai/wp-content/uploads/elementor/google-fonts/fonts/ibmplexserif-jizarevnn1dox-zrz2x3pzvkti20-si0q1s.woff2" - family: "IBM Plex Serif" style: italic weight: 400 format: woff2 subset: latin url: "https://interface.ai/wp-content/uploads/elementor/google-fonts/fonts/ibmplexserif-jizbrevnn1dox-zrz2x3pzvktiua6zutjg.woff2" - family: "Roboto" style: normal weights_sharing_file: [100, 200, 300, 400, 500, 600, 700, 800, 900] format: woff2 subset: latin url: "https://interface.ai/wp-content/uploads/elementor/google-fonts/fonts/roboto-kfo7cnqeu92fr1me7ksn66agldtyluama3yuba.woff2" stylesheet: "https://interface.ai/wp-content/uploads/elementor/google-fonts/css/roboto.css?ver=1743835754" fallback_guidance: landing: "Load Manrope and IBM Plex Serif with @font-face from the URLs above. Keep Arial or Helvetica after Manrope, and Georgia after IBM Plex Serif, as last-resort fallbacks only." rights_note: "These URLs are observed public site evidence, not a license to redistribute the files. Do not copy the binaries into the Encoder repo." rules: - "Use Manrope for headlines, body, and controls." - "Use IBM Plex Serif for a short editorial line, not for the whole page." - "Do not name the family without a src. The face will not load." - "Do not re-host the font files." ``` ## Components and layout ```yaml components: kit_button: background: "#FDCD48" foreground: "#093EB0" font: "Manrope, 20px, weight 700, line-height 30px" shadow: "4px 4px 10px 0px rgba(0, 0, 0, 0.25)" hover_background: "#F9B700" source: ".elementor-kit-145 button on the homepage" homepage_buttons: - background: "#FFFFFF" radius_px: 12 font: "16px, weight 700" - background: "transparent" border: "1px solid rgba(255,255,255,0.24)" radius_px: 12 foreground: "#FFFFFF" - background: "#FFFFFF" foreground: "#00091D" radius_px: 25 font: "16px, weight 500" layout: - "Pale blue fields (#F3F8FF and nearby) sit under blue type." - "Gold is a button color, not a page wash." - "Radii on the homepage post CSS cluster at 10, 12, 16, 20, and 25px, plus full circles for avatars. There is no single house radius in the CSS." - "Use 12px for a primary marketing button unless the specific control on the live page uses 25px." ``` ## Imagery ```yaml imagery: observed_assets: - role: "header logo" url: "https://interface.ai/wp-content/uploads/2023/12/interface-logo.svg" page: "https://interface.ai/" - role: "favicon" url: "https://interface.ai/wp-content/uploads/2023/07/cropped-interface-favicon-512x512-1.png" page: "https://interface.ai/" rules: - "Hotlink the logo. Do not copy the SVG into the repo." - "Do not hotlink a customer institution's logo into an Encoded demonstration." - "Homepage photography and ebook cards are campaign art. Re-verify the path before use. Do not invent a dashboard." forbidden_treatments: - "purple or neon gradients standing in for the blue and gold" - "a robot, chip, or neural mesh as the logo" - "a fake core-banking screenshot presented as a product result" - "customer logos used as if those institutions approved this page" ``` ## Landing page notes - Load Manrope and IBM Plex Serif with @font-face from the recorded URLs. - Hotlink the December 2023 logo SVG. - Use a gold button with blue Manrope label, 12px radius, and the observed kit shadow. - Keep homepage figures dated. Leave customer dollar results and automation percentages off the page unless the quotation and speaker travel with them. - State that interface.ai is not a bank or a credit union. - Do not use an em dash. Follow voice.md and voice/anti-ai.md. - Footer provenance is enough on the with-BCP page. Do not put an Encoded notice above the brand work.