Style Guide
Colour Palette
Brand Colours
Primary
#079992
Teal — Primary
#1565C0
Blue — H1, H2, Buttons
Gradient (Footer & CTA)
#1E4263
Navy — Gradient Start
#079992
Teal — Gradient End
Live gradient
Neutral
#333333
Body Text
#E9ECEF
Border
#F8F9FB
Container Fill only
Typography
Type Scale
Headings: Montserrat — Body: Open Sans
Page Title
Section Heading
Card or Feature Heading
Ready to Transform Your Compliance?
Most sanctions tools were built for London banks screening British names. They panic when they see African or Asian names, flooding you with false positives that waste days of investigation. We built something different.
Upload your data however works—API, batch file, manual entry. We'll take it from there.
Buttons
Button Styles
.anqa-btn-primary — #1565C0
.anqa-btn-teal — #079992
.anqa-btn-outline — #1565C0
.anqa-btn-signup — #079992
On dark background:
Hero
Page Hero — Image Only
Every page uses a full-width image hero with no text overlay — matching the home page pattern. Rendered via the page_hero block in baseof.html, outside the padded content wrapper. Set heroImage: in front matter to assign the image.
Front matter: heroImage: "/images/filename.jpg"
Placeholder (no image assigned yet)
Front matter: heroPlaceholder: true (temporary until image is chosen)
Page Image Assignments
| Page | Image File | Status |
|---|---|---|
| Home | Risk-Assessment3.jpg | ✓ Assigned |
| Sanctions Screening | Sanctions-Watchlist-Screening-8.jpg | Pending |
| Transaction Monitoring | Transaction-Monitoring-5.jpeg | Pending |
| KYC Hub | KYC-Hub-7.jpeg | Pending |
| Digital Onboarding (eKYC) | Digital-Onboarding-2.jpeg | Pending |
| Nature & Purpose | SOW1.jpg | Pending |
| Loan Assessment | Loan-Assessment-2.jpg | Pending |
| Case Management | Case-management-white.jpg | Pending |
| Crypto Investigator | Crypto-Investigator2.jpg | Pending |
| About Us | Africa-Advantage-2.jpg | Pending |
| Pricing | Pricing-Getting-Started.png | Pending |
| Style Guide | HomePageAbstract.jpg | ✓ Assigned |
| Industry / Region pages | — to be confirmed — | ⚠ Needs review |
Sections
Section Backgrounds
Both sections are white. Alt adds a hairline border top & bottom for rhythm. #F8F9FB inside bordered containers only. All sections: padding: 4rem 0 + .anqa-container.
Cards
Feature Cards
.anqa-feat-grid (3-col) + .anqa-feat-card
Feature Title
Short description of this feature. Explains the value in one or two concise sentences.
Feature Title
Short description of this feature. Explains the value in one or two concise sentences.
Feature Title
Short description of this feature. Explains the value in one or two concise sentences.
.anqa-feat-grid-2 (2-col) + .anqa-feat-card
Feature Title
Short description of this feature. Explains the value in one or two concise sentences.
Feature Title
Short description of this feature. Explains the value in one or two concise sentences.
.anqa-feature-card (used in country "The Platform" sections — background #F8F9FB, teal top border, supports bullet lists)
KYC & Customer Due Diligence
- Risk-based CDD and EDD workflows
- Document collection and verification
- Beneficial ownership mapping
Sanctions Screening
- Real-time screening against OFAC, UN, EU lists
- Fuzzy matching and alias detection
- Automated alert triage
Transaction Monitoring
- Rule-based and ML pattern detection
- Configurable thresholds per risk tier
- STR workflow integration
.anqa-module-card (4-col grid used on homepage)
MODULE 01
KYC Hub
Centralised customer data and document management.
MODULE 02
Digital Onboarding
Mobile-first customer onboarding for field teams.
MODULE 03
Sanctions Screening
Real-time screening against global watchlists.
MODULE 04
Transaction Monitoring
Pattern detection across all payment channels.
.anqa-team-card (3-col grid used on About page)
Daniel Rogers
Founder & CEO — New Zealand
Short bio describing background, expertise, and contribution to the team.
"Compliance shouldn't be a luxury good."
Joel Barasa
Chief Technology Officer — Kenya
Short bio describing background, expertise, and contribution to the team.
"I don't just connect systems — I connect dots."
Justin Pemberton
Co-founder & Creative Lead — New Zealand
Short bio describing background, expertise, and contribution to the team.
"We can make compliance tools that actually make sense."
.anqa-price-card — standard & featured variant
Demo Panels
UI Showcase Panels
Used on Sanctions, KYC Hub, and Nature & Purpose pages to show live-style interface mockups.
Anqa's Smart Results
Mohamed Hassan Ahmed Al-Rashid
- Match Rate
- 92%
- Source
- UN Sanctions List
- DOB Match
- Partial
- Nationality
- Sudan
.anqa-demo-wrap > .anqa-demo-label + .anqa-demo-panel > .anqa-demo-panel-title + dl>.anqa-demo-row
Steps
Process Step Flow
Used on the Crypto Investigator page. Auto-fit grid — wraps based on available width.
Start With a Wallet Address
Get the wallet address as part of enhanced due diligence.
Analyze the Blockchain
Examine transaction history and map network connections.
Risk Scoring
Dynamic 0–100 scoring based on multiple risk factors.
See the Network
Visualize multi-hop connections three levels deep.
Document Decision
Generate reports with visual evidence for regulators.
.anqa-steps > .anqa-step > .anqa-step-num + h3 + p
Lists
Feature List
Used on Sanctions (developer section) and Transaction Monitoring pages for structured feature lists.
- Real-Time Data ProcessingEvery transaction analyzed as it happens across all channels
- Multi-Layer Pattern AnalysisDetects structuring, layering, velocity changes, and network behaviours
- Dynamic Risk ScoringSophisticated scoring based on your configured parameters
ul.anqa-feat-list > li > div > strong + text
Statistics
Stat Row
Used on the Loan Assessment page case study section.
.anqa-stat-row > .anqa-stat-item > .anqa-stat-value + .anqa-stat-label
Code
Code Block
import requests
API_KEY = "YOUR_ANQA_API_KEY"
URL = "https://api.anqacompliance.com/v1/screen"
payload = {
"name": "Mohamed Hassan",
"dob": "1975-08-15",
"country": "SD"
}
response = requests.post(URL, json=payload,
headers={"Authorization": f"Bearer {API_KEY}"})
print(response.json()).anqa-code-wrap > pre
FAQ
FAQ Section
FAQ always appears after the CTA section — never before. Heading uses .anqa-mod-heading. JS accordion loaded globally via /static/js/anqa-faq.js — no script tags needed in page files. Answer text-decoration is suppressed globally via .anqa-faq-answer, .anqa-faq-answer * { text-decoration: none !important; } in custom.css.
Sanctions screening involves checking customers, companies, and transactions against global blacklists — like those issued by the UN, OFAC, EU, or local regulators.
- Global sanctions lists (UN, OFAC, EU, UK)
- Regional and national watchlists
- Politically Exposed Persons (PEPs)
Yes. Anqa offers automated, real-time screening during customer onboarding, loan or payment approvals, and periodic client reviews.
.anqa-faq > .anqa-faq-item > button.anqa-faq-question + div.anqa-faq-answer
Icons
Icon Library
All icons use Heroicons 24px outline style — fill="none" stroke-width="1.5" stroke="currentColor". Social branded icons use their official SVGs from the Blowfish library.
UI & Navigation
Status & Alerts
Actions & Interactions
Content & Discovery
Social & Sharing (branded SVGs — not Heroicons)
Standard: <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> — Heroicons outline
Page Section Order
Module Page Section Order
All module pages follow this section sequence. Do not deviate.
.anqa-action-bar— Navigation pills / jump links- Content sections —
.anqa-section/.anqa-section-altalternating .anqa-section-cta— CTA card (always last content section).anqa-section-alt+.anqa-faq— FAQ always after CTA, never before
FAQ heading uses .anqa-mod-heading. FAQ question text must have text-decoration: none — enforced via .anqa-faq-question in custom.css. FAQ section is optional; omit if page has no FAQ content.
CTA Section — .anqa-section-cta > .anqa-container > .anqa-cta-card
Ready to Transform Your Compliance Approach?
Join forward-thinking financial institutions who are already benefiting from our enterprise-grade compliance platform designed for growing institutions.
Footer
Footer
Global partial — layouts/partials/footer.html. Full-width on every page. Gradient: #079992 → #1E4263 (teal-forward, matches CTA).
