# Security certifications Schema: Design Details SECTION.md v3.2 Website: PayPath Source: https://paypath.ai/ Source section IDs: gap-4c41a96c-7561-8313 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The two-column split puts the argument on the left and the proof on the right, so the compliance claims and the SOC2, PCI-DSS and ISO badges can be read together. - A mono eyebrow, serif heading and plain sans list give a clear three-step hierarchy without any decoration. - Three equal grey cards sit evenly spaced and aligned to the text block, and they stand out against the light section. Specific callouts like TCPA, FDCPA, Reg F and CFPB make the claims feel credible. What a screenshot can't show: - The recording showed no motion, so hover or scroll behaviour is unknown. - No font sizes, spacing or padding were measured, so exact scale and rhythm can't be read from the images. Borrow: Pair a short list of specific claims with a row of equal, neutral proof cards so the evidence sits right beside the argument. Leave alone: Don't copy the dark green and lime palette, the serif and mono pairing, or the exact CFPB and TCPA wording and badge set; use your own brand tokens and the certifications you actually hold. ## Classification - Type: features - Layout: Two columns: left text list of security features, right three grey cards with certification badges. - Styles: minimal, corporate - Confidence: 95% ## Purpose and structure A light section highlighting enterprise security features and compliance certifications with badges. Visual signature: A clean light section with text on the left and three distinct grey rectangular cards holding security logos on the right. ## Components - feature list - certification badges - grey cards ## Typography - Display: Season Mix Regular — 72px 420 - Heading: Season Mix Regular — 64px 420 - Body: Geist — 16px 400 - Mono: JetBrains Mono — 11px 500 ## Functional palette - Canvas: canvas #0E1711 - Text: text #FCFAEE - Primary-Action: primary action #A2F08C - Surface: surface #F5F4F4 ## Motion evidence - No section-specific authored motion was established. ## Section quality Overall: 54.53/100 (Competent) Scored coverage: 85% - Typography: 56 — Uses the site's serif display font for the heading with a clean sans body and mono eyebrow label, giving decent hierarchy, but sizing/scale here is modest and the layout is a standard list-plus-cards pattern with no distinctive typographic treatment. Next tier: No unexpected scale contrast, custom treatment, or refined pairing beyond default heading/body/label roles. - Composition: 58 — Simple, legible two-column split with clear left-right balance and generous whitespace; the three equal-width grey cards are evenly spaced and aligned to the text block, but the layout is a very common feature-list-plus-badges template with large empty space below the cards left unresolved. Next tier: Needs tighter visual integration between text column and card grid (e.g. varied card heights, connecting lines, or asymmetry) to move past a generic two-column template. - Motion: not_assessed — No motion_moments or timestamped evidence supplied for this section. Next tier: Requires timestamped visible motion evidence to assess. - Content: 55 — Certification badges (SOC2, PCI-DSS, ISO) are real and relevant content directly supporting the enterprise security message, paired with specific compliance callouts (TCPA, FDCPA, Reg F, CFPB) that feel substantive rather than generic. Next tier: Content is functional and specific but presented as a plain list/card pattern with no added framing device or visual proof beyond badges and text. - Originality: 42 — This is a very standard enterprise-SaaS trust pattern (eyebrow label, heading, feature list, badge cards) seen across countless B2B sites with no unique structural or visual idea distinguishing it. Next tier: Lacks any distinctive compositional or interactive idea that would make this memorable versus interchangeable with any other compliance section. - Adaptability: 60 — Structure (two-column, list items with icons, three equal cards) is clearly separable from skin; palette/typography tokens are documented and badges are swappable logo assets, making reskinning straightforward. Next tier: Dependency on specific real certification logos and lack of defined responsive/mobile stacking behavior limits full adaptability certainty. Strengths: - Clear two-column hierarchy separating narrative text from proof badges - Specific, credible compliance references (TCPA, FDCPA, Reg F, CFPB) rather than vague claims - Consistent card sizing and spacing creates calm, professional rhythm Weaknesses: - Highly generic enterprise-trust section pattern with no distinguishing structural idea - Large unused whitespace below the card row is unresolved - No motion evidence provided, so dynamic behavior can't be credited - Grey badge cards feel like a placeholder treatment rather than a designed detail Why it does not reach the next tier: The section executes a familiar compliance/trust-badge template competently but introduces no unique compositional, typographic, or interactive idea, and leaves noticeable unresolved whitespace, keeping it in the serviceable range rather than polished or memorable. ## Adaptation guidance - Effort: Low - Guidance: Reuse the two-column layout and list/card components directly; swap badge images and compliance copy for any other trust-signal context, keeping the same spacing and icon-label pattern. What transfers: - Two-column text-list plus badge-card grid structure - Icon-led feature list with short label and description pattern - Eyebrow label + heading + supporting list hierarchy Dependencies: - Specific certification logos (SOC2, PCI-DSS, ISO) are proprietary assets - Light grey surface color token for alternating section background ## Living vocabulary - No reusable vocabulary candidates were supported by this section. Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented. ## Provenance and limitations - Section boundaries and naming: Gemini Pro visual observation - Motion observations: Gemini Pro direct-video analysis - Quality judgment: Claude - Exact design facts: browser/CSS extraction at website scope - Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%) - No timestamped motion data provided so motion axis could not be scored - Exact spacing, radius, and card color values are approximate from the crop, not deterministic per-section data ## Usage guidance Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly. ## Build blueprint v3.2 ### Purpose and classification - Canonical type: features - Source type: features - Structure: Two columns: left text list of security features, right three grey cards with certification badges. - Layout: Two columns: left text list of security features, right three grey cards with certification badges. - Styles: minimal, corporate - Components: feature list, certification badges, grey cards - Purpose: A light section highlighting enterprise security features and compliance certifications with badges. - Visual signature: A clean light section with text on the left and three distinct grey rectangular cards holding security logos on the right. - Place on the page: 9 of 12, after Feature collection (`paypath-ai:C05`), before FAQ (`paypath-ai:C06`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. ### Exact typography evidence The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements. ```json { "sectionScale": [], "siteRoles": [ { "role": "display", "size": "72px", "family": "Season Mix Regular", "source": "computed", "traits": "Regular", "weight": "420", "evidence": "font-4: computed CSS at 1440×1000; AI role: Largest 'Season Mix' text at 72px for the main hero headline.", "sampleId": "font-4", "confidence": 1, "lineHeight": "72px", "letterSpacing": "-2.2px" }, { "role": "heading", "size": "64px", "family": "Season Mix Regular", "source": "computed", "traits": "Regular", "weight": "420", "evidence": "font-3: computed CSS at 1440×1000; AI role: 'Season Mix' at 64px for major section headings.", "sampleId": "font-3", "confidence": 0.95, "lineHeight": "73.6px", "letterSpacing": "-1.9px" }, { "role": "body", "size": "16px", "family": "Geist", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-12: computed CSS at 1440×1000; AI role: 'Geist' at 16px used for readable descriptive text and FAQ questions.", "sampleId": "font-12", "confidence": 0.9, "lineHeight": "24px", "letterSpacing": "-0.5px" }, { "role": "mono", "size": "11px", "family": "JetBrains Mono", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-10: computed CSS at 1440×1000; AI role: 'JetBrains Mono' at 11px uppercase used for small labels and UI details.", "sampleId": "font-10", "confidence": 0.9, "lineHeight": "15.4px", "letterSpacing": "0.3px" } ] } ``` ### Exact color evidence The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate. ```json { "sectionUsage": [], "functionalPalette": [ { "hex": "#0E1711", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(14, 23, 17); AI role: Deep dark green/black (#0E1711) used as the primary background for the page.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#FCFAEE", "name": "text", "role": "text", "source": "computed", "evidence": "color-6: computed rgb(252, 250, 238); AI role: Off-white (#FCFAEE) used for primary headings and prominent text.", "sampleId": "color-6", "confidence": 0.95 }, { "hex": "#A2F08C", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-13: computed rgb(162, 240, 140); AI role: Bright neon green (#A2F08C) used for primary buttons, highlights, and active states.", "sampleId": "color-13", "confidence": 0.95 }, { "hex": "#F5F4F4", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-2: computed rgb(245, 244, 244); AI role: Light gray (#F5F4F4) used as an alternating background for the FAQ/Security section.", "sampleId": "color-2", "confidence": 0.9 } ] } ``` ### Design tokens ```json { "radius": "Buttons and badges are fully rounded (pill shapes); floating UI panels feature medium border radii (e.g., 12px-16px).", "density": "Overall low density to emphasize the premium, cinematic feel, but high density within the specific 'product UI' mockups.", "evidence": "Observed from the full-page layout, distinct UI card shapes, button styling in the nav and hero, and structural alignment.", "borderStyle": "Subtle borders primarily used on the light background section (FAQ dividers) and very subtle, semi-transparent borders on floating dark UI cards to define edges.", "buttonStyle": "Pill-shaped, solid fill (neon green or white) with contrasting text, or ghost buttons with subtle borders.", "cornerStyle": "Combination of sharp edges on large images and distinct, varied rounding on UI components (some slightly rounded, some heavily pill-shaped).", "contentWidth": "Wide, fluid layouts for backgrounds with centered, constrained text blocks and asymmetrical grids extending near the edges.", "spacingRhythm": "Generous spacing with large vertical gaps between major sections to allow background effects to breathe; tighter, structured padding within UI components." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root container was not deterministically isolated. - Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": null, "captureBounds": null }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": null } ``` #### Media treatment ```json [] ``` #### Browser-exposed animation parameters ```json [] ``` ### Measured geometry, surfaces, media, and animation These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values. ```json null ``` ### Observed motion No timestamped authored motion is attached. Use only restrained baseline transitions. The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing. ### Responsive contract - Measured viewport: unknownpx wide. - Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed. - Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints. ### Structure versus visual skin - Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose. - Adapt: brand colors, font family, copy, imagery, icons, decorative details. - Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details. ### Adaptation and dependencies - Effort: low - What transfers: Two-column text-list plus badge-card grid structure; Icon-led feature list with short label and description pattern; Eyebrow label + heading + supporting list hierarchy - Dependencies: Specific certification logos (SOC2, PCI-DSS, ISO) are proprietary assets; Light grey surface color token for alternating section background - Guidance: Reuse the two-column layout and list/card components directly; swap badge images and compliance copy for any other trust-signal context, keeping the same spacing and icon-label pattern. ### Evidence readiness - Coverage: 4/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion. ### Agent implementation prompt Create an original features section inspired by the design evidence titled “Security certifications”. Purpose: A light section highlighting enterprise security features and compliance certifications with badges. Structure: Two columns: left text list of security features, right three grey cards with certification badges.. Source layout label: Two columns: left text list of security features, right three grey cards with certification badges.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: A clean light section with text on the left and three distinct grey rectangular cards holding security logos on the right. Components: feature list, certification badges, grey cards. Style direction: minimal, corporate. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"72px","family":"Season Mix Regular","source":"computed","traits":"Regular","weight":"420","evidence":"font-4: computed CSS at 1440×1000; AI role: Largest 'Season Mix' text at 72px for the main hero headline.","sampleId":"font-4","confidence":1,"lineHeight":"72px","letterSpacing":"-2.2px"} {"role":"heading","size":"64px","family":"Season Mix Regular","source":"computed","traits":"Regular","weight":"420","evidence":"font-3: computed CSS at 1440×1000; AI role: 'Season Mix' at 64px for major section headings.","sampleId":"font-3","confidence":0.95,"lineHeight":"73.6px","letterSpacing":"-1.9px"} {"role":"body","size":"16px","family":"Geist","source":"computed","traits":"Regular","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: 'Geist' at 16px used for readable descriptive text and FAQ questions.","sampleId":"font-12","confidence":0.9,"lineHeight":"24px","letterSpacing":"-0.5px"} {"role":"mono","size":"11px","family":"JetBrains Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-10: computed CSS at 1440×1000; AI role: 'JetBrains Mono' at 11px uppercase used for small labels and UI details.","sampleId":"font-10","confidence":0.9,"lineHeight":"15.4px","letterSpacing":"0.3px"} Color evidence: {"hex":"#0E1711","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(14, 23, 17); AI role: Deep dark green/black (#0E1711) used as the primary background for the page.","sampleId":"color-1","confidence":0.95} {"hex":"#FCFAEE","name":"text","role":"text","source":"computed","evidence":"color-6: computed rgb(252, 250, 238); AI role: Off-white (#FCFAEE) used for primary headings and prominent text.","sampleId":"color-6","confidence":0.95} {"hex":"#A2F08C","name":"primary action","role":"primary-action","source":"computed","evidence":"color-13: computed rgb(162, 240, 140); AI role: Bright neon green (#A2F08C) used for primary buttons, highlights, and active states.","sampleId":"color-13","confidence":0.95} {"hex":"#F5F4F4","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(245, 244, 244); AI role: Light gray (#F5F4F4) used as an alternating background for the FAQ/Security section.","sampleId":"color-2","confidence":0.9} No section-bounded typography samples were measured. No section-bounded color samples were measured. No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values. Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Two-column text-list plus badge-card grid structure; Icon-led feature list with short label and description pattern; Eyebrow label + heading + supporting list hierarchy. Dependencies: Specific certification logos (SOC2, PCI-DSS, ISO) are proprietary assets; Light grey surface color token for alternating section background. Adaptation guidance: Reuse the two-column layout and list/card components directly; swap badge images and compliance copy for any other trust-signal context, keeping the same spacing and icon-label pattern. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.