Design System

Semantic callout scale

Long-form content uses a fixed seven-colour scale so a reader learns the meaning once and carries it across every article. Colours are never mixed between meanings.

Text tone ramp

Rather than a set of grey tokens, secondary text is expressed as opacity against brand-black. This keeps text harmonious on both white and tinted surfaces.

Type scale

Sizes are responsive pairs rather than a fixed ramp — most headings step up once at the md breakpoint and again at xl for the hero.

Eyebrow label

A single recurring device: small, uppercase, wide-tracked Lexend in teal. It sits above headings, labels footer columns, marks partner panels and titles form fields. Tracking varies between 0.12em and 0.18em depending on how much room it has.

Container and Section

Container caps content at max-w-6xl (1152px) and applies a uniform 20px gutter. Section is a positioned wrapper that establishes stacking context for decorative blobs and waves.

Vertical rhythm

Spacing is deliberately coarse. Major page sections are separated by my-20, headings are followed by mt-5 on mobile and mt-10 from md up, and paragraphs within a block use mt-4 or mt-6.

Breakpoints

Standard Tailwind breakpoints plus a custom 3xl at 120rem. The navigation is the one component that switches at lg rather than md, to make room for the extra top-level item.

Borders

A hairline border does most of the work of separating surfaces. Three weights are in use across the whole site.

Entrance animations

Scroll this panel out of view and back to replay them. Each class sets animation-play-state: paused; a single rule — .in-view .in-up — releases them. Stagger is applied per element with an inline animationDelay rather than nth-child rules.

Stagger

Grids cascade by deriving the delay from the item index. Testimonials use index / 3 + 2, technology tiles use index / 9 + 1 — the divisor sets how tightly the cascade bunches up.

Decorative blocks

A background flourish for dark panels. Six columns of bars drop in from above with a slight overshoot on the way down, staggered across roughly four seconds and held at 10% opacity so they never compete with the content in front of them.

Primary — hero call to action

The main conversion button. A continuous 4-second pulse draws a soft teal glow around it, and hovering fills the button from a 3px inset ring out to solid. Reserved for the single most important action on a page, normally on a dark background.

Source

src/app/buttonAnimations.scss

Animation

pulseAnimation, 4s ease-in-out, infinite

Hover

inset ring expands to solid fill, 0.5s

Height

60px (icon-size token)

Primary — compact

The same animated button with the glow and pulse removed and the height reduced to 40px. Used in the navigation bar, inside expanded service rows, and anywhere the full-size version would dominate.

Size

60 × 40px, widened by min-w-36

Resting

Solid #7de2d1 fill, no shadow

Hover

Fill darkens to brand-black

Solid pill

The workhorse secondary action — 'Read', 'Explore Articles', 'View Code'. Inverts completely on hover: the brand-blue fill becomes white and the outline picks up the blue.

Ghost on gradient

Used on the teal gradient CTA panels where a solid button would compete with the background. A white 2px outline over a transparent fill, inverting to a solid white pill on hover.

Article call to action pair

Every long-form article closes with a gradient panel carrying two actions: a filled white primary pointing at the relevant service page, and an outlined blue secondary pointing at contact.

Text links

Inline actions that sit in body copy or at the foot of a panel. All use teal as the resting colour and shift to brand-blue on hover, with an arrow to signal direction of travel.

Pagination

Fixed 32px square cells with a 6px radius — the only place on the site where a control is not a pill. The current page is filled; the rest invert to brand-blue on hover. The list is clamped to two pages either side of the current one.

Tags

Three tag treatments, all fully rounded and uppercase-free. Article tags are the heaviest, technology tags sit one step lighter, and related-service tags are interactive — they fill with teal on hover.

Desktop bar

80px tall, capped to the same max-w-6xl measure as page content. Links are Lexend medium at 70% black, moving to teal on hover over 200ms. The call to action sits hard right at both breakpoints.

HomeAbout UsServicesProjects

Let's talk

Height

h-20 (80px)

Breakpoint

lg — switches to the mobile panel below 1024px

Scroll down

-mt-32, transition 500ms

Scrolled

border-b swaps to shadow-md

Services mega menu

A 580px panel in a two-column grid, shown here in its open state. Each item pairs a Lexend label with a plain-English description, so a visitor who does not know what Celigo is can still work out whether it applies to them. A teal eyebrow heads the panel and a consultation link closes it.

Footer navigation

A four-column sitemap on brand-black. Column headings reuse the teal eyebrow; links sit at 60% white and go to full white on hover. A gradient teal hairline separates the footer from the page above it.

Service accordion row

The homepage services list. Rows are stacked inside one rounded container with dividers between them; hovering or focusing a row expands it. The open row takes a soft tinted fill, a 4px teal left border and rotates its arrow 90 degrees. The expand animation uses a grid-rows 0fr to 1fr transition, so it works without measuring content height.

Client logo tile

Client marks sit at 60% opacity until hovered, which keeps a grid of mismatched logos looking even. Each tile takes an optional background colour, so a logo drawn for a dark background still reads properly in a grid of white tiles.

Partner badge panel

A bordered white panel that groups credentials under teal eyebrow headings, split by a hairline. Each logo sits on its own light grey plinth so partner marks of different shapes still align.

Certified Partners

Platforms We Specialise In

Thumbnail

Article and project images crop to a fixed 256px height inside a rounded mask, so a mixed set of source images still produces an even grid. The image scales to 105% on hover while the mask holds its shape.

Contact form

Labels are the teal eyebrow treatment inverted to white. Inputs use a 20% white fill with a 30% border, brightening to a solid white border and a soft ring on focus. The textarea is fixed at min-h-36 with resize disabled so the card cannot be pulled out of shape.

Card

bg-gradient-to-br from-brand-blue to-brand-light-blue

Radius

rounded-2xl, p-8, shadow-xl

States

idle → pending → success | error

Callout boxes

A tinted fill, an optional 4px left border for the two tones that need urgency, a Lexend heading in the 900 shade and a bulleted list in the 800 shade at text-sm. Nothing else varies between them.

Outcome callout

A compact variant used on project entries. The heading is set in small uppercase rather than sentence case, which stops it competing with the project title above it.

Pull quote

A 4px teal left border with generous left padding and an oversized serif quotation mark at 25% opacity above the text. Used for the founder introduction and anywhere a first-person voice needs setting apart.

Secondary call to action

The panel that closes almost every page. A blue-to-light-blue gradient carrying an oversized heading, one supporting line capped at max-w-xl, and a ghost button. Title, description, label and destination are all overridable, so the same component adapts per page.

Message banner

A shorter, denser CTA for mid-page. Three layers build the surface: a three-stop gradient, a white dot-grid at 10% opacity, and a soft bloom in the top-right corner. Content sits above them on z-10.

Article call to action

The in-article variant, on a blue-to-purple gradient that deliberately sits outside the brand palette so it reads as an interruption rather than part of the article.

Achievement heading

A heading with a gradient underline that hugs the text rather than spanning the column, because the h4 is set inline-block.

Dark hero

The homepage opening. Four layers stack up on brand-black: a teal dot grid, a radial vignette that fades the grid at the edges, a soft teal bloom in the top-left, then the content. Trust signals sit between the headline and the body copy, separated by 4px teal dots.

Wave transitions

Two SVG waves handle every transition between a dark band and the white page. wave2 closes the hero and is pulled up by -mt-5 to hide the seam; wave1 opens the footer, with the footer content pulled up over it at lg and above.

wave2 — dark to light · wave1 — light to dark

Article template

A three-column grid where the body takes two and the sidebar takes one. The sidebar is sticky from md up with a 40px offset, so the quick reference and service links stay in view for the length of a long read. On mobile the sidebar drops below the article.

Article list item

A five-column grid giving three columns to the text and two to the thumbnail. Below md the thumbnail moves inline under the description rather than being dropped, so mobile readers still get the image.

Celigo error troubleshooting guide

What the common failures actually mean

CeligoNetSuiteIntegrations

A plain-English walkthrough of the errors that show up most often in Celigo, and what to do about each one.

Read

Writing style

Copy is part of the design system. The rules below apply to every heading, label and paragraph on the site.