# Trust & Authority > A conservative navy-and-white landing page that leads with credentials: accreditation seals, licences, expert names, guarantees and hard numbers. - Nickname: Navy & seals - Also called: Institutional landing, Credibility-first landing - Category: Landing Page Patterns - Moods: Trustworthy, Serious, Calm - Industries: Healthcare, Fintech & Banking, Government & Nonprofit, Corporate & B2B, Real Estate - Style page: https://uilingo.dev/styles/trust-authority/ Trust & Authority borrows the visual language of institutions — certificates, banknotes, hospital signage. Deep navy carries the brand, a muted gold is used only for seals, rules and guarantees, and headlines are set in a sober text serif. Right after the hero comes a row of credential seals, then a navy band of verified numbers with a faint guilloche (security-paper) pattern. Corners are nearly square, borders are thin and everything aligns; nothing bounces, glows or rotates. ## Best for - Telehealth, clinics and insurers - Banks, brokers and payment providers - Law, audit and consulting firms - Government or regulated services that must look official ## Avoid for - Playful consumer or kids products - Youth fashion and entertainment - Brands whose edge is being rebellious or new ## Do - Place licences and certifications directly under the hero, before features - Name the regulator or standard in plain text (e.g. HA, ISO 27799, PDPA); no logos, no invented awards - Keep gold to seals, rings, hairline rules and borders (section rules, testimonial top rules, nav underline, numbers-band borders) — never fills, buttons, links or FAQ icons - Use 2–4px radii and 1px borders consistently ## Don't - No gradients, glows, emoji or rotated elements - Don’t invent fake award logos — use plain, verifiable statements - Don’t use more than one accent colour besides gold ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Trust & Authority" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line A conservative navy-and-white landing page that leads with credentials: accreditation seals, licences, expert names, guarantees and hard numbers. Design keywords: deep navy, accreditation seals, gold hairline rules, sober text serif, guilloche pattern, verified numbers band, guarantee badge, square corners. ## Visual language An institutional, certificate-like landing page: white and pale blue-grey paper, deep navy (#0B2E59) for brand, headings and bands, and a muted gold (#B08A3E) used only on a closed allow-list of seals, rings, hairline rules and borders (dark gold #7A5B1E for small text). Headlines are a sober upright text serif, body is a plain government-style sans. Corners are nearly square (radii 2–4px everywhere), borders 1px, shadows faint, and there are no gradients except a guilloche (security-paper) line pattern on navy bands. The page leads with credentials, not features — it should feel like a hospital, bank or ministry you can rely on. ## Signature details (must be visible) - 5px navy strip with a 1px gold underline across the very top of the nav - Hero note turned into a credential line: navy shield-check icon + text in a white box with a 3px gold left border - Hero visual is a framed white product card full of credential data — practitioner name, licence number, board certification, accredited affiliation and the next available slots with a navy book button — not a generic chart. A gold rosette seal overlaps its bottom-right corner (right/bottom -28px): 104px white disc, 3px dashed gold ring (2.5px dashes) at inset 5px, 1.5px and 1px solid gold rings at inset 13px and 17px, navy disc at inset 21px, a 28px #E3C27A check centred - Credential row right after the hero, with the same centred navy serif title and 48×2px gold rule as every other section: 4 equal cells divided by 1px rules, each with a 56px circular icon on #F4EEE1 inside a gold double ring (1px border + 1px outline offset 4px). The numbers band that follows has no title - Verified-numbers band: navy background with the guilloche repeating-radial-gradient(circle at 100% 120%, transparent 0 11px, rgba(255,255,255,.06) 11px 12px), 3px double gold borders top/bottom, white serif numbers and #E3C27A labels (uppercase in Latin only). Numbers are verifiable facts (patients, licensed doctors, accredited branches), never star ratings - Centred section titles in navy serif with a 48×2px gold rule underneath; eyebrows in dark gold #7A5B1E (≥6:1 on white) with a 24px gold hairline before. Latin eyebrows uppercase 0.74rem tracked; Thai eyebrows no uppercase, letter-spacing 0, 0.85rem. Never use #B08A3E for text under 18px - Featured price card in navy with a 3px gold top edge and a 64px gold shield ‘guarantee’ seal (gold disc, white dashed ring, navy shield, white check) pinned over its top-right corner at top -22px; its button is white with navy text and a 1px white border, never gold - Gold allow-list — nothing else is gold. #B08A3E: the top-strip 1px underline, logo inner ring, active nav-link 2px underline, eyebrow 24px hairlines, the 48px section rule, the hero credential line's 3px left border, seals (rosette, guarantee shield, small onboarding seals), credential and step rings, avatar 1px rings, numbers-band double borders and dividers, testimonial 3px top rules and quote marks, fieldset legend underlines, the active tab underline, the solid badge (gold with navy text), the featured price/mobile card top edge, the CTA panel's inset 1px outline (offset -10px), the dashboard top-bar border and KPI label icons, the mobile tab-bar active line and the footer border. #E3C27A (light gold, on navy only): numbers-band labels, check icons in the featured price card, active dashboard-nav underline, illustration ink. #7A5B1E (dark gold): eyebrow text. FAQ +/−, all text links and every button stay navy or white ## Design tokens — use these exact values Colours (light mode): - background #F7F8FA - surface #FFFFFF - surface-2 #EEF2F7 - text #0B1F3A - text-muted #4A5B73 - primary #0B2E59 (text on it #FFFFFF) - secondary #B08A3E (text on it #0B1F3A) - accent #1F6FB2 - border #D5DCE6 - success #1E7A46 · warning #A15C00 · danger #B42318 - chart series #0B2E59, #1F6FB2, #B08A3E, #7C97BA, #A9B4C3 Radius: sm 2px, md 4px, lg 4px, xl 6px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(11,31,58,0.06)`, md `0 4px 14px rgba(11,31,58,0.08)`, lg `0 14px 36px rgba(11,31,58,0.12)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 160ms ease-out ## Typography (Latin + Thai) - Headings: Source Serif 4 600/700 with Thai fallback Noto Serif Thai 600/700 - Body: Public Sans 400/500/600 with Thai fallback Sarabun 400/500/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@600;700&family=Public+Sans:wght@400;500;600&family=Noto+Serif+Thai:wght@600;700&family=Sarabun:wght@400;500;600&display=swap - CSS stacks: heading `"Source Serif 4", "Noto Serif Thai", system-ui, sans-serif`; body `"Public Sans", "Sarabun", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.5rem, 5vw, 4rem), heading weight 600, heading tracking -0.01em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Noto Serif Thai has the same moderate contrast and sturdy serifs as Source Serif 4; Sarabun — the Thai government’s official face — mirrors Public Sans, the US government’s own sans. ## Components - Primary button: navy #0B2E59, white text, 4px radius, no shadow, hover #082246 (no lift) - Secondary button: white with 1px navy border and navy text - Cards: white, 1px #D5DCE6, faint shadow; feature cards get a 2px navy top edge or 3px navy left edge in list layout - Testimonial cards: 3px gold top rule, a 24px gold quote mark, then the quote upright in the heading serif (Source Serif 4 / Noto Serif Thai) 600 at 1.1rem — no italic in any language (no italic face is loaded); navy avatar with a 1px gold ring - Steps: 3 steps in a row; numbers in white circles with a 1px navy border and a gold outer ring (box-shadow 0 0 0 4px bg, 0 0 0 5px gold) - FAQ: stacked white boxes sharing 1px borders, navy questions and a navy +/− (never gold) - Inputs: 2px radius, #BFC9D6 border, navy labels, focus navy border + 3px navy-15% ring; fieldset legends underlined in gold - Badges: 2px radius, uppercase 0.68rem with 0.04em tracking in Latin; Thai badges 0.78rem, no uppercase, no tracking; the solid badge in gold with navy text is the only gold label - Dashboard: navy top bar with 3px gold bottom border, active link white with gold underline; KPI cards with a 2px navy top edge and navy numbers; tables with a 2px navy header rule - Footer: full navy with 3px gold top border - Accent button (rare, e.g. components sheet): #1F6FB2 with white text; the CTA panel button is white with navy text - Allowed off-token extras: primary hover #082246, credential icon fill #F4EEE1, input border #BFC9D6, band label gold #E3C27A, dark-gold text #7A5B1E - Fonts: override the generated heading stack with "Source Serif 4", "Noto Serif Thai", Georgia, serif and the body stack with "Public Sans", "Sarabun", Arial, sans-serif, so a missing webfont still reads institutional ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → trust → stats → features → steps → testimonials → faq → pricing → cta. Feature section as list. Split hero: serif headline, lead, navy + outlined CTAs and the credential line on the left; the product shot framed in a white bordered box with the gold seal on the right. Then the credential row (centred title + gold rule), the untitled navy guilloche numbers band, a two-column feature list, 3 numbered steps in a row, testimonials, a boxed FAQ (answer doubts before price), pricing and a navy CTA with an inset gold hairline frame. Health pricing has 3 plans (per consult / family monthly / corporate); the featured family plan carries the guarantee seal; give the seal an aria-label naming its promise (e.g. a refund if no doctor is available within 30 minutes). Thai pages spell units as Thai words (minutes, failed), never Latin 'min'. Dashboards use a top navigation bar in navy; data stays in navy/blue/gold. ## Content Use realistic product copy (fictional brand) suited to: Telehealth, clinics and insurers. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Place licences and certifications directly under the hero, before features - Name the regulator or standard in plain text (e.g. HA, ISO 27799, PDPA); no logos, no invented awards - Keep gold to seals, rings, hairline rules and borders (section rules, testimonial top rules, nav underline, numbers-band borders) — never fills, buttons, links or FAQ icons - Use 2–4px radii and 1px borders consistently ## Don't - No gradients, glows, emoji or rotated elements - Don’t invent fake award logos — use plain, verifiable statements - Don’t use more than one accent colour besides gold - Star ratings, avatar walls and playful review cards (that is Social Proof-Focused) - Bright or multiple accent colours, gradients, glows or rotated elements - Rounded pill buttons and big radii — they read as consumer and casual - Gold on buttons, text links, FAQ icons or large fills — it stays on the allow-list - Logos of regulators or invented awards: name real regulators and standards (HA, ISO 27799, PDPA) as plain-text statements only ## Stack notes One self-contained HTML file with a