01 · Overall
72%
Overall similarity
Combined fidelity across structure, copy and visual rendering.
Design vs Implementation
Kachersoft Design vs Implementation.
A comprehensive side-by-side QA comparison of the design export against the live, full-page browser capture.
02 · Copy
82%
Text match
How closely implementation copy matches the design source.
03 · Visual
65%
Visual match
Layout, color, spacing and component rendering fidelity.
Executive summary
Comprehensive visual QA findings.
Implementation follows the same landing-page information architecture and most major content, but equal-scale design validation is blocked by Source A being a very small Slack media export. The most actionable mismatches are heading case/punctuation, large vertical rhythm/page-height differences, and image/card proportion drift.
PriorityIssues to review
| Priority | Severity | Confidence | Issue | Evidence |
|---|---|---|---|---|
| P1 | High | High | Viewport/source mismatch prevents reliable pixel-perfect comparison | Source A located as low-resolution 224×1200 Slack media; Source B is 1440×5305 full-page browser screenshot. |
| P1 | High | High | Implementation page is proportionally much taller than the design export | Source B height is 5305 px versus Source A 1200 px; many sections show expanded vertical spacing. |
| P2 | Medium | High | Repeated heading capitalization and punctuation mismatches | Hero, AI future heading, and blog heading differ in case and/or terminal period. |
| P2 | Medium | Medium | Illustration/case-study asset crop and proportions differ | Large AI illustration and work image blocks appear framed differently in Source B. |
| P3 | Low | Medium | Blog metadata alignment differs | Article date such as April 2026 appears appended/closer to title in Source B compared with design feed layout. |
| P3 | Low | Medium | Minor border/radius/padding differences in cards and principle rows | Service cards, principle dividers, and rows feel more spacious at browser scale. |
Part IText analysis
| Status | Severity | Confidence | Element | Source A | Source B |
|---|---|---|---|---|---|
| Same | None | High | HeaderBrand/logo wordmark | KACHERSOFT | KACHERSOFT |
| Same | None | Medium | HeaderNavigation item 1 | About | About |
| Same | None | Medium | HeaderNavigation item 2 | Services | Services |
| Same | None | Medium | HeaderNavigation item 3 | Work | Work |
| Same | None | Medium | HeaderNavigation item 4 | Blog | Blog |
| Same | None | Medium | HeaderHeader CTA | Start a Project | Start a Project |
| Changed | Medium | High | HeroHero headline | Bringing AI to every business in Vietnam. | Bringing AI to Every Business in Vietnam |
| Same | None | High | HeroHero intro paragraph | We help businesses across Vietnam leverage cutting-edge AI technologies to transform operations, enhance efficiency, and drive innovation in an increasingly competitive digital landscape. | We help businesses across Vietnam leverage cutting-edge AI technologies to transform operations, enhance efficiency, and drive innovation in an increasingly competitive digital landscape. |
| Same | None | Medium | HeroPrimary hero CTA | Book a Strategy Call | Book a Strategy Call |
| Same | None | Medium | HeroSecondary hero CTA | Explore Services | Explore Services |
| Changed | Medium | High | AI futureSection heading | Building Vietnam's AI-powered future. | Building Vietnam's AI-Powered Future |
| Same_Or_Unreadable | None | Low | AI futureSupporting paragraph | Long explanatory paragraph about practical AI adoption in Vietnam businesses. | Long explanatory paragraph about practical AI adoption in Vietnam businesses. |
| Same | None | High | ServicesSection heading | How we deliver AI excellence. | How we deliver AI excellence. |
| Same | None | High | ServicesService card title 1 | Solution Architecture | Solution Architecture |
| Same | None | High | ServicesService card title 2 | Model Fine-Tuning | Model Fine-Tuning |
| Same | None | High | ServicesService card title 3 | Workflow Maximization | Workflow Maximization |
| Same | None | High | ServicesService card title 4 | Integration Expertise | Integration Expertise |
| Same | None | High | ServicesService card title 5 | Knowledge Transfer | Knowledge Transfer |
| Same_Or_Unreadable | Low | Low | ServicesService descriptions | Short explanatory descriptions below each service title. | Short explanatory descriptions below each service title. |
| Same | None | High | MetricsMetric 1 value | 40% | 40% |
| Same | None | High | MetricsMetric 2 value | 65% | 65% |
| Same | None | High | MetricsMetric 3 value | 3x | 3x |
| Same | None | High | MetricsMetric 4 value | 52% | 52% |
| Same_Or_Unreadable | Low | Low | MetricsMetric labels | Four brief labels under the metrics. | Four brief labels under the metrics. |
| Same | None | High | PrinciplesPrinciple 1 title | Accessibility First | Accessibility First |
| Same | None | High | PrinciplesPrinciple 2 title | Practical Innovation | Practical Innovation |
| Same | None | High | PrinciplesPrinciple 3 title | Continuous Learning | Continuous Learning |
| Same | None | High | PrinciplesPrinciple 4 title | Local Insight | Local Insight |
| Same | None | High | PrinciplesPrinciple 5 title | Partnership Mindset | Partnership Mindset |
| Same_Or_Unreadable | Low | Low | WorkWork/case-study section heading | Recent work / shipped work heading present | Recent work / shipped work heading present |
| Same_Or_Unreadable | Low | Low | WorkCase study card headings | Multiple project/card headings present | Multiple project/card headings present |
| Changed | Medium | High | BlogBlog section heading | Our blogs & articles. | Our Blogs & Articles |
| Same_Or_Unreadable | Low | Low | BlogBlog article 1 title | Readable article title row 1 present | Readable article title row 1 present |
| Same | None | High | BlogBlog article 2 title | AI commerce: 3 bài học từ Salesforce B2C | AI commerce: 3 bài học từ Salesforce B2C |
| Changed | Low | Medium | BlogBlog article 2 metadata/date | Date metadata separate/less prominent | April 2026 appended on same readable row |
| Same_Or_Unreadable | Low | Low | BlogBlog article 3 row | Third article row present | Third article row present |
| Same | None | High | Contact/FooterContact headline | Pick the channel that fits the question. | Pick the channel that fits the question. |
| Same_Or_Unreadable | Low | Low | Contact/FooterFooter/contact channel labels | Multiple contact channels/cards present | Multiple contact channels/cards present |
| Same_Or_Unreadable | Low | Low | FooterFooter brand/copyright area | Footer brand area present | Footer brand area present |
Part IIVisual analysis
| Status | Severity | Confidence | Component | Source A visual | Source B visual |
|---|---|---|---|---|---|
| Same | None | High | GlobalPage section order | Header, hero, AI future, services, metrics, principles, work, blog, contact/footer. | Same section sequence appears in the full-page capture. |
| Changed | High | High | GlobalCanvas dimensions / scale | Compact Slack design export at 224×1200 px. | Real browser screenshot at 1440×5305 px. |
| Changed | High | High | GlobalTotal page height ratio | Design export is compressed into a much shorter vertical artifact. | Implementation is very tall with substantially larger vertical whitespace. |
| Same | None | High | GlobalBackground color | Mostly off-white / very pale gray sections. | Mostly off-white / very pale gray sections. |
| Same | None | High | GlobalPrimary ink color | Dark navy/near-black text. | Dark navy/near-black text. |
| Same | None | High | GlobalTeal accent color | Teal emphasis in hero and metrics. | Teal emphasis in hero and metrics. |
| Same | None | High | HeaderHeader horizontal composition | Logo left, nav centered/right, CTA at far right. | Logo left, nav centered/right, CTA at far right. |
| Changed | Low | Medium | HeaderHeader vertical padding | Compact top bar in design export. | Top bar appears taller at real browser scale. |
| Same | None | High | HeaderCTA pill shape | Dark rounded pill button. | Dark rounded pill button. |
| Same | None | High | HeroHero two-column layout | Large headline block left; paragraph/CTAs right. | Large headline block left; paragraph/CTAs right. |
| Same | None | High | HeroHero headline size dominance | Headline is oversized and dominant. | Headline is oversized and dominant. |
| Changed | Medium | High | HeroHero line breaks | Compact design line breaks caused by narrow export. | Different wrapping at 1440px browser width. |
| Changed | Medium | Medium | HeroHero top/bottom whitespace | Tighter vertical spacing before next visual block. | More generous vertical whitespace around hero. |
| Same | None | High | HeroCTA button pairing | Primary filled button plus secondary light/outline button. | Primary filled button plus secondary light/outline button. |
| Same | None | High | AI futureLarge illustration presence | Large pastel AI/city illustration below hero. | Large pastel AI/city illustration below hero. |
| Changed | Medium | Medium | AI futureIllustration crop | Illustration appears compact within a light frame. | Illustration appears wider/larger with slightly different crop/proportions. |
| Changed | Medium | High | AI futureSection heading capitalization visual | Sentence-case heading with period creates softer editorial look. | Title-case heading without period creates different visual rhythm. |
| Same | None | High | ServicesServices grid count | Five service cards visible. | Five service cards visible. |
| Same | None | High | ServicesServices grid arrangement | Multi-column card grid with one standout dark card. | Multi-column card grid with one standout dark card. |
| Same | None | High | ServicesDark highlighted service card | One card uses dark navy fill and light text. | One card uses dark navy fill and light text. |
| Changed | Low | Medium | ServicesCard border/radius | Subtle thin borders and rounded corners. | Subtle borders and rounded corners, but radius/padding appear slightly different. |
| Changed | Low | Medium | ServicesCard internal spacing | Compact card padding in design export. | Cards have more visible breathing room. |
| Same | None | High | MetricsFour-column metric layout | Four metrics in a row. | Four metrics in a row. |
| Changed | Low | Medium | MetricsMetric typography scale | Large numbers but compact in export. | Large numbers at browser scale, possibly larger relative to labels. |
| Same | None | High | MetricsMetric accent treatment | Selected metrics use teal accent. | Selected metrics use teal accent. |
| Same | None | High | PrinciplesPrinciple row count | Five horizontal rows. | Five horizontal rows. |
| Changed | Low | Medium | PrinciplesPrinciple dividers | Thin horizontal separators. | Thin horizontal separators visible but spacing/contrast vary slightly. |
| Changed | Medium | Medium | PrinciplesPrinciple row whitespace | Rows are relatively compact. | Rows appear taller with more vertical padding. |
| Same | None | High | WorkCase-study section presence | Work/case-study area with alternating image/text blocks. | Work/case-study area with alternating image/text blocks. |
| Changed | Medium | Medium | WorkCase-study image crops | Image/blank blocks appear with compact crops. | Image blocks appear larger and cropped differently. |
| Changed | Medium | Medium | WorkCase-study card proportions | Balanced image/text cards in tighter rows. | Cards/text blocks occupy taller rows. |
| Same | None | High | BlogBlog feed row structure | Table-like list with horizontal separators. | Table-like list with horizontal separators. |
| Changed | Medium | High | BlogBlog heading style | Sentence-case heading with terminal period. | Title-case heading without terminal period. |
| Changed | Low | Medium | BlogBlog metadata alignment | Metadata appears separated in columns/row ends. | Date metadata appears closer/appended to row text in at least one row. |
| Changed | Low | Medium | BlogBlog row spacing | Compact row heights. | Rows look taller with more padding. |
| Same | None | High | Contact/FooterContact block presence | Final contact section appears after blog. | Final contact section appears after blog. |
| Same | None | High | Contact/FooterContact headline treatment | Editorial headline with period. | Same headline and period. |
| Same_Or_Minor_Change | Low | Medium | Contact/FooterContact card/channel layout | Multiple contact/channel options in structured blocks. | Multiple contact/channel options in structured blocks. |
| Changed | Low | Medium | FooterFooter final spacing | Footer is compact at bottom of export. | Footer has more browser-scale vertical padding. |
| Same | None | Medium | GlobalTypography family impression | Modern sans-serif, likely Inter-like. | Modern sans-serif, similar Inter-like rendering. |
| Changed | Medium | High | GlobalTypography capitalization system | Several key headings use sentence case with terminal periods. | Several key headings use title case and no terminal periods. |
| Changed | High | High | GlobalResponsive breakpoint represented | Design source is a narrow downscaled export, not a true 1440px screenshot. | Implementation is true 1440px desktop browser capture. |
Source A is a low-resolution design export; confidence is marked per row where exact verification is limited.