Open finance.
In full view.

01 / Independent by design.

OpenFinance-OS is the community home for UAE Open Finance. Its mission is to bring visibility, resources, and collaboration to the ecosystem through community-driven, open-source tools and content.

02 / A simpler signal.

The open-circle mark expresses openness and connection. Its central stroke gives it structure; one amber point carries forward the previous identity's signal motif. The wordmark remains OpenFinance-OS.

Light surfaces

Dark surfaces

Usage

• Use the supplied SVG assets. Wordmark glyphs are outlined, so the full logo has no font dependency.
• Allow clear space of at least one amber-dot diameter on every side. Minimum mark size: 24px. Minimum full-lockup width: 180px. Below that width, use the mark alone.
• Use teal on light surfaces and mint on dark surfaces. Preserve the amber point, proportions, orientation, and hyphenated name. Do not add glow, shadows, gradients, or a container tile to the logo.
• Live interface wordmarks use DM Sans 700 for “OpenFinance” and 500 for “-OS”. Keep the suffix quiet. Use the supplied outlined asset for export or external materials.
• Beta is a small outlined label, beta, separated from the logo. It has no orange fill or glow.

Version 2 replaces the globe-in-a-square mark, technical monospace wordmark, and Fraunces display typography. The Open Circuit animation is a separate illustration and is retained.

03 / Teal, with room to breathe.

Deep teal and warm amber remain the brand anchors. Light mode leads with pale neutral surfaces; dark mode uses a deep green ground and mint accents. Amber is a restrained visual signal, not a general text colour on white.

Use semantic surface and text tokens for theme-aware UI. The existing numbered primary and gray scales remain available in src/styles/global.css and invert in dark mode; do not pair an inverted light fill with white text. Use --color-primary-fill for filled buttons that always carry white text.

Accessible colour

Target WCAG AA: 4.5:1 for normal text and 3:1 for large text and meaningful interface graphics. Pale borders are decorative; selected controls also need a text, shape, or state cue. Never rely on amber, green, or red alone to communicate meaning. Reserve success, warning, and error colours for their semantic states.

04 / One clear typographic voice.

DM Sans weights 400, 500, 600, and 700 are served from /fonts/; the SIL Open Font License is distributed there. Fraunces is retired from the website's display system.

05 / Clear hierarchy, useful information.

• Use a 1224px content width, comfortable page gutters (20px on mobile, 24px or more on desktop), and the existing 4px spacing scale.
• Lead the homepage with a purpose headline and compact dated Observatory preview. One primary action leads to the Observatory; a secondary action leads to starting points.
• Use flat surfaces, fine borders, 8–16px corner radii, and restrained shadows. Give sections generous vertical spacing. Keep cards purposeful and links explicit.
• Preserve search, theme selection, accessible mobile navigation, directory coverage, saved briefing, ecosystem record, and news. Design simplification must not remove useful content or evidence context.
• Stack columns on small screens. Keep text, controls, charts, and source notes within the viewport. Support keyboard focus, labelled controls, and reduced motion.

Interior pages and dashboards

Keep inactive and unexposed capability descriptions fully legible. Use secondary text instead of fading the whole card. Check SVG chart labels as text, and use readable, viewport-bounded tooltips with keyboard access, a visible focus indicator and Escape dismissal for both hover and focus. Keep tooltips attached while scrolling and hide them when their trigger leaves the viewport. Allow the pointer to move onto the explanation.

Use the same quiet introduction on directory, learning, news, community and detail pages: a medium-weight DM Sans heading, descriptive secondary text, and a fine border. Use the shared page layout for navigation, search, theme selection and the founder footer, including Ecosystem Watch.

Use semantic surface and text tokens for cards, sidebars, badges and controls. Never use an inverted numbered gray as a code background. Code uses a stable dark teal surface with pale text; status text has separate accessible positive, warning and error colors. Preserve written status labels and reporting context.

Allow grid tracks and children to shrink; wrap long participant names and source URLs. Keep wide data tables and code in local scroll containers. Verify 320px, 390px, 768px and desktop widths in both themes, plus keyboard focus and reduced motion. Aim for 44px controls and AA text contrast. A clean automated scan is evidence, not a complete accessibility certification.

Keep the sticky mobile menu within the screen height and let its contents scroll on landscape and short screens. Theme controls should announce the mode they will switch to and update that label after system changes, selection and reload.

Underline references within prose so links do not rely on color alone. Use description lists for term/definition pairs and a logical heading sequence; article cards use the level appropriate to their containing section.

Stack the homepage actions vertically on mobile. Keep their layout stable while fonts load, so the directory preview does not jump between initial and completed rendering.

06 / Keep Open Circuit.

The approved Open Circuit animation belongs in its own prominent responsive section below the opening screen. The message remains “People · Institutions · Builders” and “Connected through permission.” It illustrates the idea of connection; it is not a live network or data visualization.

• Use /media/open-circuit-hero.mp4 with /media/open-circuit-poster.webp. Keep muted inline playback, no automatic looping, and keyboard-operable pause, play, and replay.
• Retain the still poster when motion is reduced, data saving is requested, autoplay is blocked, or the video fails. Reduced-motion and data-saving modes must not fetch the video automatically.
• Only fetch and play when the section is in view; pause offscreen and when the document is hidden. Explicit playback is available to the user.
• Generate responsive poster variants from the approved still source, with sizes that follow the displayed media box. Keep the separate still-image fallback visible until video playback succeeds; avoid downloading a second full-size video poster. Preserve the source video, framing and playback behavior.
• Keep illustrative media separate from directory observations. Decorative orbital rings do not encode usage, certification, or maturity.

07 / Evidence, in the open.

Write plainly, actively, and inclusively. Be helpful and precise. Explain what the site lets someone do. Avoid hype, authority claims, and jargon where ordinary language works.

• Primary message: “Open finance. In full view.”
• Positioning: “The independent view of UAE Open Finance.” Community home, open source, independent by design.
• Founder: MiddleLeap founded OpenFinance-OS as an open-source community initiative. Keep the project community-led and its editorial decisions independent.
• Footer credit: “A community initiative founded by MiddleLeap.” Link the logo to www.middleleap.com. Place it beside the open-source credit. Keep the attribution understated, with a small MiddleLeap logo beside the founder wording and in the About governance section. Use the official square-and-diamond pivot mark together with the DM Sans 600 wordmark. Preserve the square on the left, the diamond at 45 degrees on the right, and clear space of one square height. Use the supplied assets in brand/middleleap/. Keep the full lockup at least 120px wide and choose light/dark colours with AA text contrast. Give the logo link the accessible name “MiddleLeap.” The logo is static; retain the approved Open Circuit animation.
• About-page explanation: “OpenFinance-OS was founded by MiddleLeap as an open-source community initiative. It remains community-led, with independent editorial decisions.” Distinguish the founding role from sponsorship, paid placement, and official endorsement.
• Keep directory registration, issuer publication, self-certification, go-live approval, and operational traffic distinct. A registration does not establish usage.
• Show the observation date, environment, source, and reporting window for data claims. Call saved observations saved observations. Preserve raw family names, IDs, versions, and unknowns.
• Link builders to official operator documentation and the Nebras developer hub. Do not imply the community site replaces certification, operator support, or regulatory guidance.

08 / One maintained source.

The canonical guide and assets live in the repository's brand/. The published mirror in public/brand/ must match. Theme tokens live in src/styles/global.css.

• Full wordmark — light / Full wordmark — dark
• Mark — light / Mark — dark / Favicon SVG
• PNG mark exports: 32, 64, 128, 256, and 512px. Wordmark exports: 360, 720, and 1440px wide. App icons have pale neutral padding.
• Logo specimen
• Reusable Codex skill: brand/skills/openfinance-os-brand/SKILL.md. Keep its guidance aligned with this guide. The discoverable local installation is ~/.codex/skills/openfinance-os-brand/.

Version 2.3 · Clear signal · 10 October 2026. Replaces the December 2025 visual identity.