API Industries
Built on Bootstrap 5.3 with custom apids-* components and overrides. Headings use Plus Jakarta Sans, body uses Inter. All values reference CSS tokens — never hardcode hex or pixel values in component CSS.
All colours defined as CSS custom properties on :root. Always reference a token — never write a raw hex in component CSS.
Brand — Blue (Primary)Two fonts — Plus Jakarta Sans for headings (500/700/800), Inter for body and UI text (400/500/600). Load both from Google Fonts.
8px base unit. Use tokens for padding and margin — this keeps rhythm consistent when you need to adjust a value globally.
Radius is contextual — each step maps to a specific component type. Don't mix these up.
Buttons, inputs,
nav CTA
Icon wells,
feature icons
Service cards,
why cards
Sector cards,
main cards
AI panel,
large containers
Badges, pills,
stat dots
Blue-tinted shadows to match the brand palette. Used on cards and hover states — never on flat layout sections. Borders handle the rest.
Three variants. All use 6px border radius. Primary (blue) is the main page CTA. Red is used for secondary CTAs alongside primary, or on blue backgrounds. Ghost for low-priority actions.
All Variants Small Modifier States — Primary6px radius on all inputs. 44px minimum height for touch targets. Label always sits above the input — never inline or inside. Focus ring uses blue glow.
Three card types used across the homepage — Sector, Service, and Why. Each has a distinct radius and use case.
Sector Card — 12px radius, white bg, blue hover borderNext-generation agentic AI automating financial business processes for faster decision-making.
API-driven app for field service engineering teams powered by AI.
Developing AI in small language models. Award-winning Innovate UK finalists.
Expert full stack, front-end, and back-end developers with UX and CX capabilities.
User-Friendly Interface
Intuitive design that lets your team focus on productivity, not technology.
Customisable Solutions
Adaptable to businesses of all sizes, industries, and unique workflows.
Used for sector tags on cards and status indicators. Semantic colours are fixed — green = success, red/amber = error/warning. Don't repurpose them.
White background with a tinted blue circle on the right and a subtle grid overlay. Badge, H1 with coloured words, subtext, and two buttons. Stats strip separated by a border sits beneath.
Sections alternate between white and off-white (--apids-off) backgrounds. The client strip uses the primary blue background. All section padding is 6rem 5% via Bootstrap container or .apids-section.
| Class | Background | Padding | Used for |
|---|---|---|---|
| .apids-section | White | 6rem 5% | Hero, AI, Why, CTA sections |
| .apids-section .apids-section-off | #f5f7fc | 6rem 5% | Sectors, What We Do |
| .apids-section .apids-section-blue | #1A3C8F | 4rem 5% | Client logo strip |
Within each section, use Bootstrap's .container for max-width and centring, and .row .g-4 for card grids.
5-column horizontal timeline. Numbered circles connected by a horizontal rule. First step is always blue-filled (active). Remaining steps use the border/muted colour.
We identify your exact needs.
We begin building the platform.
Demo on staging, gather feedback.
Auto-generated reports identified.
Launch with full support.
Blue background section. Label in uppercase white/55 opacity. Client names as outline pills — these are text-only placeholders until logo assets are supplied.
Use Bootstrap breakpoints as-is — no custom ones needed. Mobile-first: write base styles, then override upward with @media (min-width: ...).
| Bootstrap | Width | Key changes |
|---|---|---|
| xs (default) | < 576px | 1-col stacked, 5% side padding, buttons full-width, nav hamburger, process steps 1-col |
| sm | 576px+ | 2-col grids start, card layouts appear |
| md | 768px+ | AI split section collapses to 1-col below this, footer 2-col |
| lg | 992px+ | Nav links visible, AI section 2-col, process 5-col |
| xl | 1200px+ | Full layout, max-width container centred |
Full :root block. Drop this at the top of your custom CSS file, after the Bootstrap import.
Core rules for keeping the design consistent across all pages and components.
- Reference --apids-* tokens for every colour and spacing value
- Use Plus Jakarta Sans 800 for all page and section headings
- Use Inter for all body text, nav links, labels, and buttons
- Keep blue as the dominant brand colour — primary buttons, headings, footer background
- Use red for section labels, secondary CTAs, and accent tags only
- Keep button radius at 6px across all button variants
- Alternate section backgrounds between white and --apids-off
- Use blue-tinted shadows (--apids-shadow-*) on all card hover states
- Keep 44px minimum height on all interactive elements for touch
- Use semantic colours correctly — green=success, amber=warning, red=error
- Hardcode hex values in component CSS — always use a token
- Use red as a primary CTA — it's secondary to blue on this brand
- Mix button radius values — 6px everywhere, no exceptions
- Use more than two accent colours in a single section
- Apply shadows to flat layout backgrounds — borders and spacing only
- Set body text below 14px — accessibility minimum
- Skip hover, focus, and disabled states on interactive elements
- Use --apids-off (#f5f7fc) as text colour — it's backgrounds only
- Use red casually — it signals urgency and should feel deliberate
- Use Plus Jakarta Sans for body copy — that's Inter's job