Trust & Authority

Also called: Institutional landing, Credibility-first landing

A conservative navy-and-white landing page that leads with credentials: accreditation seals, licences, expert names, guarantees and hard numbers.

“Navy & seals”Landing Page PatternsEra: Timeless (banks, hospitals, law firms)TrustworthySeriousCalm

Open full screen ↗

trust-authority / landingEN

trust-authority / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm2pxRadius md4pxRadius lg4pxRadius xl6pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

This recipe redefines surface, surface-2, text, text-muted, border in its own rules, so edits to those colours may show only in part.

Design keywords

Say these words to ask for this style.

deep navyaccreditation sealsgold hairline rulessober text serifguilloche patternverified numbers bandguarantee badgesquare corners

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

Not to be confused with

Social Proof-Focused →Social Proof shows crowds — stars, faces and quotes on warm cream; Trust & Authority shows institutions — seals, licences and guarantees in navy.Enterprise SaaS →Enterprise SaaS is an app UI system (dense tables, roles); Trust & Authority is a marketing landing pattern built around credentials.Accessible & Ethical →Accessible & Ethical is about AAA contrast, big type and plain language; Trust & Authority is about institutional signals — serif, seals, navy and gold.

On mobile

Keep a white app bar with a 1px rule, a licence number instead of ratings, and a row of 3 small seals on the onboarding screen; lists stay square-cornered with 1px rules. Gold only for the verified tick and the guarantee line — never for buttons.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinSource Serif 4 · 600/700

The quick brown fox

Heading · ThaiNoto Serif Thai · 600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinPublic Sans · 400/500/600

Clear words make shared decisions.

Body · ThaiSarabun · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Design tokens

Radius	`sm 2px · md 4px · lg 4px · xl 6px · pill 999px`
Border	`1px`
Shadow	`0 4px 14px rgba(11,31,58,0.08)`
Display	`clamp(2.5rem, 5vw, 4rem)`
Motion	`160ms ease-out`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Trust & Authority (trust-authority) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a light mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 4px;
  --background: #F7F8FA;
  --foreground: #0B1F3A;
  --card: #FFFFFF;
  --card-foreground: #0B1F3A;
  --popover: #FFFFFF;
  --popover-foreground: #0B1F3A;
  --primary: #0B2E59;
  --primary-foreground: #FFFFFF;
  --secondary: #B08A3E;
  --secondary-foreground: #0B1F3A;
  --muted: #EEF2F7;
  --muted-foreground: #4A5B73;
  --accent: #EEF2F7;
  --accent-foreground: #0B1F3A;
  --destructive: #B42318;
  --border: #D5DCE6;
  --input: #D5DCE6;
  --ring: #0B2E59;
  --chart-1: #0B2E59;
  --chart-2: #1F6FB2;
  --chart-3: #B08A3E;
  --chart-4: #7C97BA;
  --chart-5: #A9B4C3;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0B1F3A;
  --sidebar-primary: #0B2E59;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #EEF2F7;
  --sidebar-accent-foreground: #0B1F3A;
  --sidebar-border: #D5DCE6;
  --sidebar-ring: #0B2E59;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Trust & Authority (trust-authority) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a light mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #F7F8FA;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEF2F7;
  --color-text: #0B1F3A;
  --color-text-muted: #4A5B73;
  --color-primary: #0B2E59;
  --color-on-primary: #FFFFFF;
  --color-secondary: #B08A3E;
  --color-on-secondary: #0B1F3A;
  --color-accent: #1F6FB2;
  --color-border: #D5DCE6;
  --color-success: #1E7A46;
  --color-warning: #A15C00;
  --color-danger: #B42318;
  --color-chart-1: #0B2E59;
  --color-chart-2: #1F6FB2;
  --color-chart-3: #B08A3E;
  --color-chart-4: #7C97BA;
  --color-chart-5: #A9B4C3;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11,31,58,0.06);
  --shadow-md: 0 4px 14px rgba(11,31,58,0.08);
  --shadow-lg: 0 14px 36px rgba(11,31,58,0.12);
  --font-heading: "Source Serif 4", "Noto Serif Thai", system-ui, sans-serif;
  --font-body: "Public Sans", "Sarabun", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Sarabun", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Trust & Authority (trust-authority). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.9725,
            0.9804
          ],
          "hex": "#f7f8fa"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.949,
            0.9686
          ],
          "hex": "#eef2f7"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.1216,
            0.2275
          ],
          "hex": "#0b1f3a"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.3569,
            0.451
          ],
          "hex": "#4a5b73"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.1804,
            0.349
          ],
          "hex": "#0b2e59"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6902,
            0.5412,
            0.2431
          ],
          "hex": "#b08a3e"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.1216,
            0.2275
          ],
          "hex": "#0b1f3a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.4353,
            0.698
          ],
          "hex": "#1f6fb2"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8353,
            0.8627,
            0.902
          ],
          "hex": "#d5dce6"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.4784,
            0.2745
          ],
          "hex": "#1e7a46"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6314,
            0.3608,
            0
          ],
          "hex": "#a15c00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.1373,
            0.0941
          ],
          "hex": "#b42318"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.1804,
            0.349
          ],
          "hex": "#0b2e59"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.4353,
            0.698
          ],
          "hex": "#1f6fb2"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6902,
            0.5412,
            0.2431
          ],
          "hex": "#b08a3e"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4863,
            0.5922,
            0.7294
          ],
          "hex": "#7c97ba"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6627,
            0.7059,
            0.7647
          ],
          "hex": "#a9b4c3"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0431,
              0.1216,
              0.2275
            ],
            "hex": "#0b1f3a",
            "alpha": 0.06
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0431,
              0.1216,
              0.2275
            ],
            "hex": "#0b1f3a",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 14,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0431,
              0.1216,
              0.2275
            ],
            "hex": "#0b1f3a",
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 14,
            "unit": "px"
          },
          "blur": {
            "value": 36,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Source Serif 4",
        "Noto Serif Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Public Sans",
        "Sarabun",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Sarabun",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 160,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0,
      0,
      0.58,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!