1

How the Options Differ

Both samples use the same copy, section content, and design system. The table compares Option A with Option B.

2

Color

Core Blue, Dark Blue, Deep Teal, and Egg Blue do most of the work. Lilac is an accent for small details. Lemon is the hover color on dark surfaces and a small accent. Neither ever fills a resting button.

Approved text pairs

Ratios are computed from the hex values. AAA needs 7:1 for body text.

Pairs to avoid

3

Typography

Figtree throughout. Headings get lighter as they get larger: H1 Light, H2 Regular, H3 SemiBold. H1 and H2 use Title Case. H3 uses sentence case, except where it is a proper name such as a service category.

4

Shape, Space, and Depth

Generous space and no shadows. Borders and color changes show depth. Sharp corners are the baseline in the brand rules and are used in Option A. Option B applies a rounded variant for comparison. Egg Blue corner brackets mark the one or two key visuals in a view.

5

Buttons and Links

Every button has a resting color and a hover color, and every pair passes AAA (7:1 or higher). Buttons have sharp corners (pill-shaped in the rounded variant), a 48 px minimum height, and a visible 3 px focus outline. On dark surfaces the Egg Blue button turns Lemon on hover. No button rests in Lemon.

State contrast

6

Navigation

Six top-level items: About, Services, Technologies, Accelerators, Industries, and Resources. Accelerators is a single link. The other five open menus. Services opens a four-column menu grouped by what the client wants to achieve. Menus open on click, close with the Escape key, and work from the keyboard. On the dark navigation band (Option A), hover and open states turn the label and its underline Lemon. On Option B's white bar they use Deep Teal, because Lemon and Egg Blue text both fail contrast on white. Option B's Services menu is different: it lists the four groups, and each group opens a flyout of its own services (shown below).

Option A: four-column Services menu

Option B: Services groups with flyouts (AI & Automation open)

• Each flyout is sized to its own list, so a four-item group and a five-item group have different heights and nothing sits empty. A ">" marks every group that has more services under it.
• Mouse: hovering a group opens its flyout after a short pause (80 ms), and it closes 220 ms after the pointer leaves. The pause stops the flyout from flickering or closing when the pointer cuts across a corner. A click keeps it open.
• Keyboard: Tab reaches each group button. Right arrow opens its flyout and moves into it, Left arrow or Escape closes it and returns to the group, and the Up and Down arrows move between groups.
• Touch and small screens: there is no hover on touch, so a tap opens and closes the flyout. Under 1,020 px the groups become an accordion inside the menu button.
• Trade-off: the 18 service names are hidden until someone opens a group, so they are less visible than in Option A's open four-column menu. They stay in the page code, the footer links all four groups, and the homepage Services section links to each group.

Menu contents

7

Components

These are the building blocks used in the samples. Both options share the same tokens and differ in how they assemble them.

Service card: Option A (left) and Option B (right)

Stat tiles and tags

Platform and industry links

Resource cards: Option A (left) and Option B (right)

AI-First research block (Option B)

Video (Option A)

Footer

• Four link columns (Services, Technologies, Industries, Company). The first three end with an "All" link (All Services, All Technologies, All Industries). Technologies lists SAP, Oracle, Salesforce, and Workday.
• Contact Us block: a link to the contact page, a link to the demo scheduler, and the four regions where we have offices (Americas, Europe, Middle East, Asia-Pacific). "View all locations" goes to the Office Locations page. These links have no arrows.
• Follow Us: LinkedIn, Instagram, and Facebook as 44 px icon buttons with a 2 px white border (square in Option A, round in Option B). Each has a text label for screen readers and opens in a new tab.
• Base line: logo, copyright, then Accessibility Statement, Privacy Policy, and Terms of Use.
• Region switcher: a globe icon sits before the region name. The icon is decorative.

Testimonial carousel (Option B)

Form fields

Interactive: the QMA maturity radar

8

Imagery and Logos

Photos and logos add character, so they follow a few rules that keep them tied to the brand.

• Real work, cool tones. Photos of people working on screens fit best. Warm light in a photo is fine, but interface colors stay in the palette.
• Brackets on one or two photos per view, never on logos. On rounded photos the bracket is concentric with the corner.
• Text over a photo needs a Dark Blue overlay of at least 85% behind the words, and a lighter one only where there is no text. The AI-First research cards follow this: the overlay is 88% or more across the lower half where the words sit.
• Decorative photos get no alt text. A photo that carries information gets a description.
• Export at twice the display width and lazy-load everything below the first screen.

9

Writing Rules on the Page

• American English for the US site, and contractions are fine.
• Title Case for H1 and H2. Sentence case for H3.
• No eyebrow text on the homepage. Add one only when it carries information the heading can't.
• One primary button per section. A secondary button is allowed for a second destination, as with Careers in the About section. Links inside body copy are fine, and each service card carries one text link.
• AI-First is the brand term. AI-Enhanced is a supporting term. AI-Powered names tools we use.
• Buttons say what happens: Start the Assessment, Download the Case Study.
• Every number has a baseline and, where it comes from outside, a source.
• Avoid all caps, em dashes, and the hype words in the Writing Guide.
• Logos get alt text in the form "Name logo". Decorative graphics get none.
• Link text is specific and uses phrases people search where it reads naturally. A service card link names its group, such as "AI and automation services".

10

Search and Answer-Engine Setup

What the live page needs behind the design. Both options support all of it.

11

Before Launch

Items to confirm before either sample becomes the live page.

• Logo and font: the header uses the check and "ttc" mark cropped from the stacked logo file and recolored with CSS. Use the master SVG on the live page. Figtree loads from Google Fonts in this file. Self-host it on the live site.
• Photos: confirm usage rights for each one. The Playwright card photo is 814 px wide and will look soft at full width. The refinery photo is generic, so confirm it is fine to show beside an unnamed client.
• Client logos: Harborline Bank, Northpeak, Veloran, and Corvale Mutual are fictional placeholders. Swap in approved client logos, recolored to Core Blue, before launch.
• Platform logos (Option A): SAP, Oracle, Salesforce, Workday, and Duck Creek use local files. Guidewire and Microsoft Dynamics 365 still load from assets.ttcglobal.com. Check each vendor's brand rules before using grayscale on the live site.
• Testimonials (Option B): quote one is a real client quote. Quotes two and three show the layout only. Every quote needs client approval.
• Case study stats: the client is unnamed. Confirm the client approved the 6 months, US$5M+, and 92% figures for publication and that each has a clear baseline.
• 15% claim: the QMA page lists benchmark sources but does not tie them to this figure. Confirm the citation.
• Assessment tool: the link sits under "Event Content", so confirm it is public. The radar's dimension and level names should match the live tool's 10 questions.
• Video: 80 seconds, 1280 x 720, no audio. The text version beneath it is typed from the on-screen words, so check it. On the live page, host the video (for example in Wistia) rather than inside the page.
• Resource cards: the images are stand-ins matched to each post, and the titles are working titles. The AI in Software Testing guide needs a gated landing page before it earns a place here.
• FAQ: answers need sign-off before publishing, and a separate FAQ page may suit better than the homepage.
• About and Careers: one section with two buttons, the one exception to "one primary button per section". Confirm the closing line and that the secondary button goes to the Careers page.
• "Unrivaled" in the About heading: a superlative. "Software Quality Specialists Since 2005" is a safer option.
• Footer links: the contact page and office page use live URLs. The demo scheduler and Instagram links are placeholders. Confirm an Accessibility Statement page exists. The live footer also links X (Twitter), which is not included here.
• AI-First research cards (Option B): working titles built from the AI-First Efficiency Gain series. Confirm titles, destinations, and the paragraph.
• Region menu: lists United States and India only. Confirm the full list.
• Hero buttons: the square shape from this system, not the live site's pill with an arrow circle. Confirm the shape.
• Contact details: phone and email are left off the page. For local search, add them to the Organization schema.
• hreflang: check that the US and India homepages point at each other before the India homepage ships.

12

Design Tokens

:root{
  /* brand */
  --dark-blue:#0A2033;  --core-blue:#25415C;  --deep-teal:#005A6C;  --egg-blue:#3CCDCD;
  --grey:#E9EDF0;  --tint:#F4F6F8;  --line:#C9D3DD;
  --lilac:#D296FE; --lemon:#FFE229;    /* Lilac: accent only. Lemon: hover color on dark surfaces (buttons, navigation) and small highlights. Never a resting button color, never text on white */
  /* type */
  --font:'Figtree',system-ui,sans-serif;
  --h1-weight:300; --h1-size:clamp(38px,5vw,64px);
  --h2-weight:400; --h2-size:clamp(30px,3.6vw,36px);
  --h3-weight:600; --h3-size:24px;
  /* space */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px; --s9:128px;
  /* shape and depth */
  --radius:0; --shadow:none;           /* baseline and Option A */
  /* rounded variant (Option B only) */
  --r-card:16px; --r-panel:24px; --r-ctl:12px; --r-btn:999px;
  /* Egg Blue corner bracket: 56px square, 4px line, offset -12px (small: 32px, 3px, -8px)
     On rounded images the bracket radius is the image radius + 12px (small: + 8px) and the arms grow to 72px (small: 48px) */
  /* Buttons: every pair is 7:1 or higher
     primary on light    #FFF on #005A6C     hover #FFF on #0A2033
     secondary on light  #25415C on #FFF     hover #FFF on #25415C   (2px border)
     primary on dark     #0A2033 on #3CCDCD  hover #0A2033 on #FFE229
     secondary on dark   #FFF on #0A2033     hover #0A2033 on #FFF   (2px border) */
}