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.

Generated 2026-05-07 07:06 UTCSource A · Tai design screenshotSource B · Real full-page browser capture
01 · Overall

72%

Overall similarity

Combined fidelity across structure, copy and visual rendering.

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

PrioritySeverityConfidenceIssueEvidence
P1HighHighViewport/source mismatch prevents reliable pixel-perfect comparisonSource A located as low-resolution 224×1200 Slack media; Source B is 1440×5305 full-page browser screenshot.
P1HighHighImplementation page is proportionally much taller than the design exportSource B height is 5305 px versus Source A 1200 px; many sections show expanded vertical spacing.
P2MediumHighRepeated heading capitalization and punctuation mismatchesHero, AI future heading, and blog heading differ in case and/or terminal period.
P2MediumMediumIllustration/case-study asset crop and proportions differLarge AI illustration and work image blocks appear framed differently in Source B.
P3LowMediumBlog metadata alignment differsArticle date such as April 2026 appears appended/closer to title in Source B compared with design feed layout.
P3LowMediumMinor border/radius/padding differences in cards and principle rowsService cards, principle dividers, and rows feel more spacious at browser scale.

Part IText analysis

StatusSeverityConfidenceElementSource ASource B
SameNoneHighHeaderBrand/logo wordmarkKACHERSOFTKACHERSOFT
SameNoneMediumHeaderNavigation item 1AboutAbout
SameNoneMediumHeaderNavigation item 2ServicesServices
SameNoneMediumHeaderNavigation item 3WorkWork
SameNoneMediumHeaderNavigation item 4BlogBlog
SameNoneMediumHeaderHeader CTAStart a ProjectStart a Project
ChangedMediumHighHeroHero headlineBringing AI to every business in Vietnam.Bringing AI to Every Business in Vietnam
SameNoneHighHeroHero intro paragraphWe 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.
SameNoneMediumHeroPrimary hero CTABook a Strategy CallBook a Strategy Call
SameNoneMediumHeroSecondary hero CTAExplore ServicesExplore Services
ChangedMediumHighAI futureSection headingBuilding Vietnam's AI-powered future.Building Vietnam's AI-Powered Future
Same_Or_UnreadableNoneLowAI futureSupporting paragraphLong explanatory paragraph about practical AI adoption in Vietnam businesses.Long explanatory paragraph about practical AI adoption in Vietnam businesses.
SameNoneHighServicesSection headingHow we deliver AI excellence.How we deliver AI excellence.
SameNoneHighServicesService card title 1Solution ArchitectureSolution Architecture
SameNoneHighServicesService card title 2Model Fine-TuningModel Fine-Tuning
SameNoneHighServicesService card title 3Workflow MaximizationWorkflow Maximization
SameNoneHighServicesService card title 4Integration ExpertiseIntegration Expertise
SameNoneHighServicesService card title 5Knowledge TransferKnowledge Transfer
Same_Or_UnreadableLowLowServicesService descriptionsShort explanatory descriptions below each service title.Short explanatory descriptions below each service title.
SameNoneHighMetricsMetric 1 value40%40%
SameNoneHighMetricsMetric 2 value65%65%
SameNoneHighMetricsMetric 3 value3x3x
SameNoneHighMetricsMetric 4 value52%52%
Same_Or_UnreadableLowLowMetricsMetric labelsFour brief labels under the metrics.Four brief labels under the metrics.
SameNoneHighPrinciplesPrinciple 1 titleAccessibility FirstAccessibility First
SameNoneHighPrinciplesPrinciple 2 titlePractical InnovationPractical Innovation
SameNoneHighPrinciplesPrinciple 3 titleContinuous LearningContinuous Learning
SameNoneHighPrinciplesPrinciple 4 titleLocal InsightLocal Insight
SameNoneHighPrinciplesPrinciple 5 titlePartnership MindsetPartnership Mindset
Same_Or_UnreadableLowLowWorkWork/case-study section headingRecent work / shipped work heading presentRecent work / shipped work heading present
Same_Or_UnreadableLowLowWorkCase study card headingsMultiple project/card headings presentMultiple project/card headings present
ChangedMediumHighBlogBlog section headingOur blogs & articles.Our Blogs & Articles
Same_Or_UnreadableLowLowBlogBlog article 1 titleReadable article title row 1 presentReadable article title row 1 present
SameNoneHighBlogBlog article 2 titleAI commerce: 3 bài học từ Salesforce B2CAI commerce: 3 bài học từ Salesforce B2C
ChangedLowMediumBlogBlog article 2 metadata/dateDate metadata separate/less prominentApril 2026 appended on same readable row
Same_Or_UnreadableLowLowBlogBlog article 3 rowThird article row presentThird article row present
SameNoneHighContact/FooterContact headlinePick the channel that fits the question.Pick the channel that fits the question.
Same_Or_UnreadableLowLowContact/FooterFooter/contact channel labelsMultiple contact channels/cards presentMultiple contact channels/cards present
Same_Or_UnreadableLowLowFooterFooter brand/copyright areaFooter brand area presentFooter brand area present

Part IIVisual analysis

StatusSeverityConfidenceComponentSource A visualSource B visual
SameNoneHighGlobalPage section orderHeader, hero, AI future, services, metrics, principles, work, blog, contact/footer.Same section sequence appears in the full-page capture.
ChangedHighHighGlobalCanvas dimensions / scaleCompact Slack design export at 224×1200 px.Real browser screenshot at 1440×5305 px.
ChangedHighHighGlobalTotal page height ratioDesign export is compressed into a much shorter vertical artifact.Implementation is very tall with substantially larger vertical whitespace.
SameNoneHighGlobalBackground colorMostly off-white / very pale gray sections.Mostly off-white / very pale gray sections.
SameNoneHighGlobalPrimary ink colorDark navy/near-black text.Dark navy/near-black text.
SameNoneHighGlobalTeal accent colorTeal emphasis in hero and metrics.Teal emphasis in hero and metrics.
SameNoneHighHeaderHeader horizontal compositionLogo left, nav centered/right, CTA at far right.Logo left, nav centered/right, CTA at far right.
ChangedLowMediumHeaderHeader vertical paddingCompact top bar in design export.Top bar appears taller at real browser scale.
SameNoneHighHeaderCTA pill shapeDark rounded pill button.Dark rounded pill button.
SameNoneHighHeroHero two-column layoutLarge headline block left; paragraph/CTAs right.Large headline block left; paragraph/CTAs right.
SameNoneHighHeroHero headline size dominanceHeadline is oversized and dominant.Headline is oversized and dominant.
ChangedMediumHighHeroHero line breaksCompact design line breaks caused by narrow export.Different wrapping at 1440px browser width.
ChangedMediumMediumHeroHero top/bottom whitespaceTighter vertical spacing before next visual block.More generous vertical whitespace around hero.
SameNoneHighHeroCTA button pairingPrimary filled button plus secondary light/outline button.Primary filled button plus secondary light/outline button.
SameNoneHighAI futureLarge illustration presenceLarge pastel AI/city illustration below hero.Large pastel AI/city illustration below hero.
ChangedMediumMediumAI futureIllustration cropIllustration appears compact within a light frame.Illustration appears wider/larger with slightly different crop/proportions.
ChangedMediumHighAI futureSection heading capitalization visualSentence-case heading with period creates softer editorial look.Title-case heading without period creates different visual rhythm.
SameNoneHighServicesServices grid countFive service cards visible.Five service cards visible.
SameNoneHighServicesServices grid arrangementMulti-column card grid with one standout dark card.Multi-column card grid with one standout dark card.
SameNoneHighServicesDark highlighted service cardOne card uses dark navy fill and light text.One card uses dark navy fill and light text.
ChangedLowMediumServicesCard border/radiusSubtle thin borders and rounded corners.Subtle borders and rounded corners, but radius/padding appear slightly different.
ChangedLowMediumServicesCard internal spacingCompact card padding in design export.Cards have more visible breathing room.
SameNoneHighMetricsFour-column metric layoutFour metrics in a row.Four metrics in a row.
ChangedLowMediumMetricsMetric typography scaleLarge numbers but compact in export.Large numbers at browser scale, possibly larger relative to labels.
SameNoneHighMetricsMetric accent treatmentSelected metrics use teal accent.Selected metrics use teal accent.
SameNoneHighPrinciplesPrinciple row countFive horizontal rows.Five horizontal rows.
ChangedLowMediumPrinciplesPrinciple dividersThin horizontal separators.Thin horizontal separators visible but spacing/contrast vary slightly.
ChangedMediumMediumPrinciplesPrinciple row whitespaceRows are relatively compact.Rows appear taller with more vertical padding.
SameNoneHighWorkCase-study section presenceWork/case-study area with alternating image/text blocks.Work/case-study area with alternating image/text blocks.
ChangedMediumMediumWorkCase-study image cropsImage/blank blocks appear with compact crops.Image blocks appear larger and cropped differently.
ChangedMediumMediumWorkCase-study card proportionsBalanced image/text cards in tighter rows.Cards/text blocks occupy taller rows.
SameNoneHighBlogBlog feed row structureTable-like list with horizontal separators.Table-like list with horizontal separators.
ChangedMediumHighBlogBlog heading styleSentence-case heading with terminal period.Title-case heading without terminal period.
ChangedLowMediumBlogBlog metadata alignmentMetadata appears separated in columns/row ends.Date metadata appears closer/appended to row text in at least one row.
ChangedLowMediumBlogBlog row spacingCompact row heights.Rows look taller with more padding.
SameNoneHighContact/FooterContact block presenceFinal contact section appears after blog.Final contact section appears after blog.
SameNoneHighContact/FooterContact headline treatmentEditorial headline with period.Same headline and period.
Same_Or_Minor_ChangeLowMediumContact/FooterContact card/channel layoutMultiple contact/channel options in structured blocks.Multiple contact/channel options in structured blocks.
ChangedLowMediumFooterFooter final spacingFooter is compact at bottom of export.Footer has more browser-scale vertical padding.
SameNoneMediumGlobalTypography family impressionModern sans-serif, likely Inter-like.Modern sans-serif, similar Inter-like rendering.
ChangedMediumHighGlobalTypography capitalization systemSeveral key headings use sentence case with terminal periods.Several key headings use title case and no terminal periods.
ChangedHighHighGlobalResponsive breakpoint representedDesign 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.