Visual identity

WealthHut

A governed operating workspace for family-office responsibilities, ownership graphs, approvals, records, and evidence.

wealthhut.com

Light surfacePrimary wordmark

Dark surfaceApproved dark treatment

Compact identity

Favicon scale

compactLogo

16px

32px

48px

Dark

Semantic system

Brand colour

data-brand

PrimaryIdentitySecondarySupportAccentHighlightNeutralContent

Brand ID: wealthhut
Token package: @brandos/tokens/css/wealthhut
Heading: Newsreader
Body: Source Sans 3

01.01 · Hut Teal ramp

19 shades of Hut Teal

Hut Teal identity ramp generated from canonical wealthhut token data.

01.02 · Hutcopper ramp

19 shades of Hutcopper

Hutcopper identity ramp generated from canonical wealthhut token data.

01.03 · Hutslate ramp

19 shades of Hutslate

Hutslate identity ramp generated from canonical wealthhut token data.

01.04 · Semantic slots

Meaning over hue

Components consume semantic slots, never raw ramps. The hue can evolve; the meaning shouldn't.

Brand PrimaryAnchor identity & CTAs

Token: --semantic-brand-primary
Class: bg-primary

Brand AccentHighlights & accents

Token: --semantic-brand-accent
Class: bg-accent

Surface 1Card surfaces & chrome

Token: --semantic-surface-1
Class: bg-base-100

ContentBody & headings text

Token: --semantic-content-primary
Class: text-base-content

InformativeInformation & neutral cues

Token: --semantic-status-informative
Class: text-info

SuccessPositive & confirm states

Token: --semantic-status-success
Class: text-success

WarningCaution & warning states

Token: --semantic-status-warning
Class: text-warning

ErrorDestructive & error states

Token: --semantic-status-error
Class: text-error

02 · Typography

Newsreader on display · Source Sans 3 for everything else

Heading and body families resolve from the canonical effective specification and its font registry.

Heading typefaceNewsreader

--brandOS-font-heading

Display specimen

WealthHut moves with purpose.

Family: Newsreader
Registry ID: newsreader
Primary use: Display and hierarchy

H1 · DisplayThe system in practice
H2 · Section107 brands, one system
H3 · CardProfile contract

Size: 4xl
Leading: Tight
Weight: Bold

Body typefaceSource Sans 3

--brandOS-font-body

Reading specimen

Clear systems make complex decisions feel simple, consistent, and unmistakably on brand.

Family: Source Sans 3
Registry ID: source-sans-3
Primary use: Reading and interface

LedeA clear, generous opening that orients the reader fast.
BodyStandard paragraph text. The quick brown fox jumps over the lazy dog.
CaptionSmall print, footnotes, and metadata.

Size: Base
Leading: Normal
Weight: Regular

Surface split

One voice across both surfaces

This brand uses the same pair everywhere. A marketing face and an application face can be split at any time by declaring one per surface in the brand registry; until then both panels resolve identically.

Marketing surface

Campaign pages, hero moments, the public site.

data-surface="marketing"

WealthHut, in its own voice.

Marketing copy gets room to breathe: generous measures, expressive headlines, and a face chosen to be seen before it is read.

Heading: Newsreader
Body: Source Sans 3
Origin: Inherits the base pair

Enterprise application surface

Product screens, dense tables, forms, operator tools.

data-surface="application"

Open invoices, 128 rows

Application copy is read all day at small sizes: labels, table cells, validation messages, and column headers that must stay legible under density.

Heading: Newsreader
Body: Source Sans 3
Origin: Inherits the base pair

03 · Effective specification

Registry-resolved visual contract

One resolved source for every visual rule

Version 1.1.0, effective 2026-09-27. Every rule below is generated from the canonical registry projection.

Resolution fingerprintThree-source effective identity

01Defaults: 1.0.0
02Brand: 1.1.0
03Content: rev 8f43c45b

The content revision is a checksum of the authored specification. It changes whenever any rule changes, so two profiles with the same revision are guaranteed identical.

Authored Direct: 6
Inherited Shared: 0
Defaulted System: 6

Colour and accessible pairings

authored

Token usage, print values, gradients, accent discipline, and derived WCAG pairings.

29 resolved values

PrimaryBrand Primary

AccentBrand Accent

SurfaceSurface 1

ContentContent Primary

Brand gradient135deg

InfoStatus Informative

SuccessStatus Success

WarningStatus Warning

ErrorStatus Error

Technical details29 canonical values and registry paths

Accent Token Refs 0: --semantic-brand-primaryColors · Accent token refs · #1
Accent Token Refs 1: --semantic-brand-accentColors · Accent token refs · #2
Body Surface Token Ref: --semantic-surface-1Colors · Body surface token ref
Body Text Token Ref: --semantic-content-primaryColors · Body text token ref
Direction: 135degColors · Gradients · #1 · Direction
From Token Ref: --semantic-brand-primaryColors · Gradients · #1 · From token ref
Id: brand-accentColors · Gradients · #1 · Id
To Token Ref: --brandOS-primary-700Colors · Gradients · #1 · To token ref
Enforceable: NoColors · Guidance · #1 · Enforceable
Id: single-accentColors · Guidance · #1 · Id
Text: Teal (--semantic-brand-primary) carries every interactive job: links, buttons, focus, selection and the logo. Do not introduce a second interactive hue.Colors · Guidance · #1 · Text
Enforceable: NoColors · Guidance · #2 · Enforceable
Id: copper-decisions-onlyColors · Guidance · #2 · Id
Text: Copper (--semantic-brand-accent) appears only where a person decides or approves something: decision chips, approval ticks and signed commitments. Never use it for decoration, headings or the logo.Colors · Guidance · #2 · Text
Enforceable: NoColors · Guidance · #3 · Enforceable
Id: text-on-primaryColors · Guidance · #3 · Id
Text: Set text on teal fills only with --semantic-brand-primary-content, and never on a mid-tone teal tint; primary buttons must keep at least WCAG AA contrast in both themes.Colors · Guidance · #3 · Text
Enforceable: NoColors · Guidance · #4 · Enforceable
Id: no-rainbow-iconsColors · Guidance · #4 · Id
Text: Icons use --semantic-content-primary or --semantic-brand-primary only. Do not colour-code feature icons; meaning comes from labels and status tokens.Colors · Guidance · #4 · Text
Groups Colors Print Values: No additional entriesColors · Print values
Content Token Ref: --semantic-status-error-contentColors · Status · Error · Content token ref
Token Ref: --semantic-status-errorColors · Status · Error · Token ref
Content Token Ref: --semantic-status-informative-contentColors · Status · Informative · Content token ref
Token Ref: --semantic-status-informativeColors · Status · Informative · Token ref
Content Token Ref: --semantic-status-success-contentColors · Status · Success · Content token ref
Token Ref: --semantic-status-successColors · Status · Success · Token ref
Content Token Ref: --semantic-status-warning-contentColors · Status · Warning · Content token ref
Token Ref: --semantic-status-warningColors · Status · Warning · Token ref

Typography

authored

Font roles, the base type ladder, and sparse responsive overrides.

20 resolved values

Canonical hierarchy

A distinct voice, built to scale.

The quick brown fox jumps over the lazy dog. Clear typography gives every branded surface a recognisable rhythm.

Caption and supporting metadata remain readable at compact sizes.

HeadingNewsreader

Text 4xl2.5–4rem

BodySource Sans 3

Text Base0.875–1rem

The base hierarchy scales without brand-specific overrides.

Technical details20 canonical values and registry paths

Font Id: newsreaderTypography · Base ladder · #1 · Font id
Id: headingTypography · Base ladder · #1 · Id
Line Height Token Ref: --brandOS-leading-tightTypography · Base ladder · #1 · Line height token ref
Size Token Ref: --brandOS-text-4xlTypography · Base ladder · #1 · Size token ref
Weight Token Ref: --brandOS-font-weight-boldTypography · Base ladder · #1 · Weight token ref
Font Id: source-sans-3Typography · Base ladder · #2 · Font id
Id: bodyTypography · Base ladder · #2 · Id
Line Height Token Ref: --brandOS-leading-normalTypography · Base ladder · #2 · Line height token ref
Size Token Ref: --brandOS-text-baseTypography · Base ladder · #2 · Size token ref
Weight Token Ref: --brandOS-font-weight-regularTypography · Base ladder · #2 · Weight token ref
Enforceable: NoTypography · Guidance · #1 · Enforceable
Id: display-serif-ui-sansTypography · Guidance · #1 · Id
Text: Newsreader is the display and editorial voice (headlines, pull quotes, the wordmark). Source Sans 3 carries all interface text, labels, tables and forms. Never set body copy or controls in Newsreader.Typography · Guidance · #1 · Text
Enforceable: NoTypography · Guidance · #2 · Enforceable
Id: one-emphasised-wordTypography · Guidance · #2 · Id
Text: A headline may emphasise one proof word in Newsreader italic (for example the word prove). Never emphasise more than one word, and never use italic for decoration.Typography · Guidance · #2 · Text
Enforceable: NoTypography · Guidance · #3 · Enforceable
Id: figuresTypography · Guidance · #3 · Id
Text: Amounts, dates and counts use tabular figures and always show their period and source nearby; never round a figure that is presented as evidence.Typography · Guidance · #3 · Text
Groups Typography Responsive Overrides: No additional entriesTypography · Responsive overrides

Logo usage

authored

Clear space, minimum sizes, prohibited uses, and approved lockups.

30 resolved values

Clear space: Space 4

Full lockup (wealthhut-logo): the ruled gable-tile mark with the one-line WealthHut wordmark200px minimum

Compact lockup (wealthhut-logo-compact): the plain gable tile with the wordmark, for widths from 120 to 199px120px minimum

Ruled mark alone (wealthhut-mark), with the split entry and closing-total lines48px minimum

Plain gable tile alone (brand-favicons/wealthhut and wealthhut-dark), for favicons, app icons and avatars under 48px16px minimum

Do not stretch, skew, rotate, outline or add effects to a registered mark.

Do not recolour the logo copper or in two colours; use the ink, light or dark registered variant only.

Do not retypeset the wordmark in a live font; always use the outlined registered artwork.

Technical details30 canonical values and registry paths

Clear Space Token Ref: --brandOS-space-4Logos · Clear space token ref
Groups Logos Co Branding Rules: No additional entriesLogos · Co branding rules
Context: Full lockup (wealthhut-logo): the ruled gable-tile mark with the one-line WealthHut wordmarkLogos · Minimum sizes · #1 · Context
Id: lockupLogos · Minimum sizes · #1 · Id
Width Px: 200Logos · Minimum sizes · #1 · Width px
Context: Compact lockup (wealthhut-logo-compact): the plain gable tile with the wordmark, for widths from 120 to 199pxLogos · Minimum sizes · #2 · Context
Id: compact-lockupLogos · Minimum sizes · #2 · Id
Width Px: 120Logos · Minimum sizes · #2 · Width px
Context: Ruled mark alone (wealthhut-mark), with the split entry and closing-total linesLogos · Minimum sizes · #3 · Context
Id: ruled-markLogos · Minimum sizes · #3 · Id
Width Px: 48Logos · Minimum sizes · #3 · Width px
Context: Plain gable tile alone (brand-favicons/wealthhut and wealthhut-dark), for favicons, app icons and avatars under 48pxLogos · Minimum sizes · #4 · Context
Id: faviconLogos · Minimum sizes · #4 · Id
Width Px: 16Logos · Minimum sizes · #4 · Width px
Primary Asset Id: wealthhut-logo-inkLogos · Primary asset id
Enforceable: NoLogos · Prohibited uses · #1 · Enforceable
Id: do-not-distortLogos · Prohibited uses · #1 · Id
Text: Do not stretch, skew, rotate, outline or add effects to a registered mark.Logos · Prohibited uses · #1 · Text
Enforceable: NoLogos · Prohibited uses · #2 · Enforceable
Id: no-copper-logoLogos · Prohibited uses · #2 · Id
Text: Do not recolour the logo copper or in two colours; use the ink, light or dark registered variant only.Logos · Prohibited uses · #2 · Text
Enforceable: NoLogos · Prohibited uses · #3 · Enforceable
Id: no-retypesetLogos · Prohibited uses · #3 · Id
Text: Do not retypeset the wordmark in a live font; always use the outlined registered artwork.Logos · Prohibited uses · #3 · Text
Enforceable: NoLogos · Prohibited uses · #4 · Enforceable
Id: ruled-mark-minimumLogos · Prohibited uses · #4 · Id
Text: Never use the ruled mark or the full lockup below its minimum width; switch to the compact lockup, then the plain tile, so the ledger lines never render below one pixel.Logos · Prohibited uses · #4 · Text
Enforceable: NoLogos · Prohibited uses · #5 · Enforceable
Id: tone-matches-surfaceLogos · Prohibited uses · #5 · Id
Text: Use the dark artwork on light surfaces and the light artwork on dark or teal surfaces; never place the dark artwork on teal.Logos · Prohibited uses · #5 · Text

Registered assets

defaulted

Canonical marks, imagery, and graphic assets referenced by stable identifiers.

2 resolved values

Primary lockupLight surface

Compact markApp scale

Dark surfaceApproved artwork

Technical details2 canonical values and registry paths

Groups Assets Approved Asset Ids: No additional entriesAssets · Approved asset ids
Groups Assets Guidance: No additional entriesAssets · Guidance

Responsive layout

defaulted

Breakpoint ranges, containers, grids, columns, and margins.

34 resolved values

Mobile0px+

Tablet640px+

Desktop1024px+

Margins and containers expand progressively while content order stays stable.

Technical details34 canonical values and registry paths

Columns: 4Responsive layout · Breakpoints · #1 · Columns
Grid Id: mobile-gridResponsive layout · Breakpoints · #1 · Grid id
Id: mobileResponsive layout · Breakpoints · #1 · Id
Margin Token Ref: --brandOS-space-4Responsive layout · Breakpoints · #1 · Margin token ref
Max Viewport Px: 639Responsive layout · Breakpoints · #1 · Max viewport px
Min Viewport Px: 0Responsive layout · Breakpoints · #1 · Min viewport px
Columns: 8Responsive layout · Breakpoints · #2 · Columns
Container Width Px: 960Responsive layout · Breakpoints · #2 · Container width px
Grid Id: tablet-gridResponsive layout · Breakpoints · #2 · Grid id
Id: tabletResponsive layout · Breakpoints · #2 · Id
Margin Token Ref: --brandOS-space-6Responsive layout · Breakpoints · #2 · Margin token ref
Max Viewport Px: 1023Responsive layout · Breakpoints · #2 · Max viewport px
Min Viewport Px: 640Responsive layout · Breakpoints · #2 · Min viewport px
Columns: 12Responsive layout · Breakpoints · #3 · Columns
Container Width Px: 1280Responsive layout · Breakpoints · #3 · Container width px
Grid Id: desktop-gridResponsive layout · Breakpoints · #3 · Grid id
Id: desktopResponsive layout · Breakpoints · #3 · Id
Margin Token Ref: --brandOS-space-8Responsive layout · Breakpoints · #3 · Margin token ref
Min Viewport Px: 1024Responsive layout · Breakpoints · #3 · Min viewport px
Columns: 4Responsive layout · Grids · #1 · Columns
Gutter Token Ref: --brandOS-space-4Responsive layout · Grids · #1 · Gutter token ref
Id: mobile-gridResponsive layout · Grids · #1 · Id
Margin Token Ref: --brandOS-space-4Responsive layout · Grids · #1 · Margin token ref
Columns: 8Responsive layout · Grids · #2 · Columns
Gutter Token Ref: --brandOS-space-5Responsive layout · Grids · #2 · Gutter token ref
Id: tablet-gridResponsive layout · Grids · #2 · Id
Margin Token Ref: --brandOS-space-6Responsive layout · Grids · #2 · Margin token ref
Columns: 12Responsive layout · Grids · #3 · Columns
Gutter Token Ref: --brandOS-space-6Responsive layout · Grids · #3 · Gutter token ref
Id: desktop-gridResponsive layout · Grids · #3 · Id
Margin Token Ref: --brandOS-space-8Responsive layout · Grids · #3 · Margin token ref
Enforceable: NoResponsive layout · Guidance · #1 · Enforceable
Id: content-first-responsiveResponsive layout · Guidance · #1 · Id
Text: Choose responsive changes from content pressure and the declared non-overlapping ranges.Responsive layout · Guidance · #1 · Text

Iconography

defaulted

Approved library, family, style, weight, licence, and custom exceptions.

12 resolved values

Family: Material Symbols
Style: Rounded
Weight: 400
Licence: Apache License 2.0

No custom icon exceptions. One visual language stays consistent.

Technical details12 canonical values and registry paths

Groups Iconography Custom Icon Asset Ids: No additional entriesIconography · Custom icon asset ids
Enforceable: NoIconography · Guidance · #1 · Enforceable
Id: icons-are-symbolsIconography · Guidance · #1 · Id
Text: Use the approved library for interface symbols; register custom brand marks as assets.Iconography · Guidance · #1 · Text
Family: Material SymbolsIconography · Library · Family
Id: material-symbols-roundedIconography · Library · Id
Name: Apache License 2.0Iconography · Library · License · Name
Reference: https://github.com/google/material-design-icons/blob/master/LICENSEIconography · Library · License · Reference
Spdx Id: Apache-2.0Iconography · Library · License · Spdx id
Source: https://fonts.google.com/iconsIconography · Library · Source
Style: RoundedIconography · Library · Style
Weight: 400Iconography · Library · Weight

Graphic systems

defaulted

Named visual systems and their registered asset and taxonomy references.

2 resolved values

Core SystemBrand

0 assets

Technical details2 canonical values and registry paths

Groups Graphics Systems: No additional entriesGraphics · Systems
Groups Graphics Taxonomies: No additional entriesGraphics · Taxonomies

Imagery direction

authored

Photography, product imagery, composition, subject, and treatment guidance.

19 resolved values

01 · Composition

Show real operators reviewing entity graphs, approvals, evidence, and reconciled records instead of generic wealth imagery.

02 · Subject

Compose information as a connected shelter: precise roof and grid geometry, calm teal fields, and copper only at decisions or commitments.

03 · Treatment

Show the product as real-looking records with an As of date and callouts that tie each figure to its source and approver; label illustrative data as illustrative.

Technical details19 canonical values and registry paths

Groups Imagery Approved Asset Ids: No additional entriesImagery · Approved asset ids
Enforceable: NoImagery · Photography · #1 · Enforceable
Id: imagery-01Imagery · Photography · #1 · Id
Text: Show real operators reviewing entity graphs, approvals, evidence, and reconciled records instead of generic wealth imagery.Imagery · Photography · #1 · Text
Enforceable: NoImagery · Photography · #2 · Enforceable
Id: imagery-02Imagery · Photography · #2 · Id
Text: Compose information as a connected shelter: precise roof and grid geometry, calm teal fields, and copper only at decisions or commitments.Imagery · Photography · #2 · Text
Enforceable: NoImagery · Photography · #3 · Enforceable
Id: imagery-03Imagery · Photography · #3 · Id
Text: Balance warm human moments with disciplined documents and data; avoid safes, coins, mansions, and generic market-chart cliches.Imagery · Photography · #3 · Text
Enforceable: NoImagery · Product imagery · #1 · Enforceable
Id: product-annotatedImagery · Product imagery · #1 · Id
Text: Show the product as real-looking records with an As of date and callouts that tie each figure to its source and approver; label illustrative data as illustrative.Imagery · Product imagery · #1 · Text
Enforceable: NoImagery · Product imagery · #2 · Enforceable
Id: product-one-eraImagery · Product imagery · #2 · Id
Text: Every product view on one page uses the same current interface; never mix legacy screenshots with current ones.Imagery · Product imagery · #2 · Text
Enforceable: NoImagery · Product imagery · #3 · Enforceable
Id: gabled-surfaceImagery · Product imagery · #3 · Id
Text: Key surfaces may use the gable notch from the mark as a card-top motif; do not add unrelated decorative shapes.Imagery · Product imagery · #3 · Text

Shared components

defaulted

Shared component participation and bounded state-token overrides.

8 resolved values

WealthHut interfaceShared system

FoundationActions and fields

04 states

Primary actionSecondary

Email addressname@company.com

Helper text follows the field.Valid

FeedbackStatus and content

Live

ApprovedIn reviewDraft

Brand-ready componentSemantic tokens control every state.

Next reviewIdentity system check

Aug 28

Registry coverageGoverned participation1

Button2 state overrides

Technical details8 canonical values and registry paths

Component Id: buttonComponents · Participation · #1 · Component id
Groups Components Participation 0 Guidance: No additional entriesComponents · Participation · #1 · Guidance
State: defaultComponents · Participation · #1 · State overrides · #1 · State
Token Ref: --semantic-brand-primaryComponents · Participation · #1 · State overrides · #1 · Token ref
Token Slot: backgroundComponents · Participation · #1 · State overrides · #1 · Token slot
State: defaultComponents · Participation · #1 · State overrides · #2 · State
Token Ref: --semantic-brand-primary-contentComponents · Participation · #1 · State overrides · #2 · Token ref
Token Slot: contentComponents · Participation · #1 · State overrides · #2 · Token slot

Data visualisation

defaulted

Categorical, sequential, and diverging palette intent derived from brand tokens.

10 resolved values

Categorical3 roles

Sequential2 steps

Diverging2 steps

Brand-derived colour intent supports comparison without changing the underlying data meaning.

Technical details10 canonical values and registry paths

Categorical Token Refs 0: --semantic-brand-primaryData visualization · Categorical token refs · #1
Categorical Token Refs 1: --semantic-brand-accentData visualization · Categorical token refs · #2
Categorical Token Refs 2: --semantic-status-informativeData visualization · Categorical token refs · #3
Diverging Token Refs 0: --semantic-status-errorData visualization · Diverging token refs · #1
Diverging Token Refs 1: --semantic-status-successData visualization · Diverging token refs · #2
Enforceable: NoData visualization · Guidance · #1 · Enforceable
Id: data-viz-contrastData visualization · Guidance · #1 · Id
Text: Use semantic token references whose labels, strokes, and fills remain distinguishable without colour alone.Data visualization · Guidance · #1 · Text
Sequential Token Refs 0: --semantic-surface-3Data visualization · Sequential token refs · #1
Sequential Token Refs 1: --semantic-brand-primaryData visualization · Sequential token refs · #2

Motion

authored

Governed motion variance, timing, easing, and reduced-motion expectations.

7 resolved values

Easing

Ease SmoothProgress over time, arrive gently, never snap

Duration scale

Duration FastDuration Normal

Reduced-motion behavior is required.

Technical details7 canonical values and registry paths

Duration Token Refs 0: --brandOS-duration-fastMotion · Duration token refs · #1
Duration Token Refs 1: --brandOS-duration-normalMotion · Duration token refs · #2
Easing Token Refs 0: --brandOS-ease-smoothMotion · Easing token refs · #1
Enforceable: NoMotion · Guidance · #1 · Enforceable
Id: calm-motionMotion · Guidance · #1 · Id
Text: Motion is calm and functional: state changes, reveals and continuous logo bands only. Anything that moves for more than five seconds has a pause control, and prefers-reduced-motion shows a static layout.Motion · Guidance · #1 · Text
Reduced Motion Required: YesMotion · Reduced motion required

Prose guidance

authored

Human-readable direction distributed with the effective visual specification.

9 resolved values

Working principlesClear direction for consistent decisions

Every claim is exact and sourced: no vague volume statistics, no testimonials or logos without consent, and every capability carries a status label (in use internally, prototype, pilot or planned).

Human-readable guidance

Calls to action describe the outcome (see a record with its sources, talk to us about early access) rather than a generic request a demo.

Human-readable guidance

WealthHut is record-keeping software; never imply legal, tax, accounting or investment advice.

Human-readable guidance

Technical details9 canonical values and registry paths

Enforceable: NoProse guidance · #1 · Enforceable
Id: provable-claimsProse guidance · #1 · Id
Text: Every claim is exact and sourced: no vague volume statistics, no testimonials or logos without consent, and every capability carries a status label (in use internally, prototype, pilot or planned).Prose guidance · #1 · Text
Enforceable: NoProse guidance · #2 · Enforceable
Id: outcome-ctasProse guidance · #2 · Id
Text: Calls to action describe the outcome (see a record with its sources, talk to us about early access) rather than a generic request a demo.Prose guidance · #2 · Text
Enforceable: NoProse guidance · #3 · Enforceable
Id: no-adviceProse guidance · #3 · Id
Text: WealthHut is record-keeping software; never imply legal, tax, accounting or investment advice.Prose guidance · #3 · Text

04 · Accessibility

Verified accessible pairings

Live specimens rendered from canonical foreground and background tokens.

14 verified

Contrast9.55:1

AAA text

Foreground--semantic-brand-accent-contentSurface--semantic-brand-accent

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast9.02:1

AAA text

Foreground--semantic-brand-primary-contentSurface--semantic-brand-primary

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast12.85:1

AAA text

Foreground--semantic-brand-secondary-contentSurface--semantic-brand-secondary

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast18.01:1

AAA text

Foreground--semantic-neutral-contentSurface--semantic-neutral-base

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast7.19:1

AAA text

Foreground--semantic-status-error-contentSurface--semantic-status-error

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast7.34:1

AAA text

Foreground--semantic-status-informative-contentSurface--semantic-status-informative

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast7.60:1

AAA text

Foreground--semantic-status-success-contentSurface--semantic-status-success

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast7.24:1

AAA text

Foreground--semantic-status-warning-contentSurface--semantic-status-warning

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast6.30:1

AA text

Foreground--semantic-content-mutedSurface--semantic-surface-1

Standard text: AA passAAA fail
Large text: AA passAAA pass

Contrast18.01:1

AAA text

Foreground--semantic-content-primarySurface--semantic-surface-1

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast5.43:1

AA text

Foreground--semantic-content-mutedSurface--semantic-surface-2

Standard text: AA passAAA fail
Large text: AA passAAA pass

Contrast15.52:1

AAA text

Foreground--semantic-content-primarySurface--semantic-surface-2

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast4.80:1

AA text

Foreground--semantic-content-mutedSurface--semantic-surface-3

Standard text: AA passAAA fail
Large text: AA passAAA pass

Contrast13.72:1

AAA text

Foreground--semantic-content-primarySurface--semantic-surface-3

Standard text: AA passAAA pass
Large text: AA passAAA pass

05 · Example uses

Where WealthHut shows up

Real interface patterns shaped by the same identity, semantic tokens and typography defined in this profile.

03Application
surfaces

06 · Delivery

Drop in anywhere

Three lines and an attribute, the whole WealthHut brand renders from CDN.

01
LoadGlobal tokens
02
ThemeWealthHut
03
RenderEvery component

index.htmlComplete CDN setupHTMLVersion pinned

<link rel="stylesheet" href="https://brand.snyder.tech/cdn/0.44.11/themes/global-tokens.css" />
<link rel="stylesheet" href="https://brand.snyder.tech/cdn/0.44.11/themes/wealthhut-brand.css" />
<script type="module" src="https://brand.snyder.tech/cdn/0.44.11/index.js"></script>
<html data-brand="wealthhut" data-theme="light">

Registered assets

15 immutable assets

Pinned artwork for stable delivery. Themeable -ink follows the active theme, while -light and -dark variants preserve exported colour.

Release: v0.44.11
Integrity: 15/15
Payload: 31 KB

01 · Faviconwealthhut-dark.svgdark artwork142 BVerified
02 · Faviconwealthhut.svgsingle artwork142 BVerified
03 · Logowealthhut-logo-compact-dark.svgdark artwork3.2 KBVerified
04 · Logowealthhut-logo-compact-ink.svgink artwork3.3 KBVerified
05 · Logowealthhut-logo-compact-light.svglight artwork3.2 KBVerified
06 · Logowealthhut-logo-dark.svgdark artwork3.3 KBVerified
07 · Logowealthhut-logo-ink.svgink artwork3.3 KBVerified
08 · Logowealthhut-logo-light.svglight artwork3.3 KBVerified
09 · Logowealthhut-mark-dark.svgdark artwork182 BVerified
10 · Logowealthhut-mark-ink.svgink artwork187 BVerified
11 · Logowealthhut-mark-light.svglight artwork182 BVerified
12 · Logowealthhut-wordmark-dark.svgdark artwork3.1 KBVerified
13 · Logowealthhut-wordmark-ink.svgink artwork3.1 KBVerified
14 · Logowealthhut-wordmark-light.svglight artwork3.1 KBVerified
15 · Login Bgwealthhut-login-bg.svgsingle artwork808 BVerified

brand-mark.inkRecommended themeable markTypeScriptVersion pinned

// Recommended, themeable: currentColor follows the theme when inlined
import WealthHutMark from '@brandos/ui/assets/brand-logos/wealthhut-logo-compact-ink.svg?raw';
// Astro: <span set:html={Mark} />   ·   React (SVGR): import ...?react

Implementation libraryAlternative asset recipesImage, background and favicon patterns3 recipes

logo.htmlFixed artwork imageHTMLVersion pinned

<img
  src="https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-logo-compact-dark.svg"
  alt="WealthHut"
  loading="lazy"
  decoding="async"
/>

mark.cssCSS background recipeCSSVersion pinned

.wealthhut-mark {
  background-image: url("https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-logo-compact-dark.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

favicon.htmlBrowser favicon setupHTMLVersion pinned

<link rel="icon" type="image/svg+xml" href="https://brand.snyder.tech/cdn/0.44.11/assets/brand-favicons/wealthhut.svg" />

Registry evidenceVersioned asset manifestPaths, sizes and integrity hashesSHA-256

wealthhut-cdn-manifest.txtVersioned asset inventoryManifestVersion pinned

# favicon · 142 B
# sha256:0f26b5a0ed1f2fa04670a29bc4808f12367e0d58fc722f4a0bc28de45f0a87d3
https://brand.snyder.tech/cdn/0.44.11/assets/brand-favicons/wealthhut-dark.svg

# favicon · 142 B
# sha256:92199d62579bec4235b767a06118ddba2b57148ff04c7f42db962c49388ecf15
https://brand.snyder.tech/cdn/0.44.11/assets/brand-favicons/wealthhut.svg

# logo · 3.2 KB
# sha256:33c6a7dbddc9c4f23deb9674691808265a5ee8f77f5be3bcb376d64ca3571da5
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-logo-compact-dark.svg

# logo · 3.3 KB
# sha256:366848a674cf3458f06aa5dc2b071b4b17a484c5dad7cd9a3f97d9cd33e07735
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-logo-compact-ink.svg

# logo · 3.2 KB
# sha256:fa47f044ccc8f0b198163ae0785020beec7c5bad158d218b82408e89e814e2c0
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-logo-compact-light.svg

# logo · 3.3 KB
# sha256:e0eb60536a9b1a71f3e1b2dbad553fc5f983f6b1ff0b9051a95fe30487cb71cc
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-logo-dark.svg

# logo · 3.3 KB
# sha256:8bc08a0f552d8eda16fae2be9bfd786fe8fd626de2a3117ff9fef233abbae66a
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-logo-ink.svg

# logo · 3.3 KB
# sha256:8edeca9ec2e0bd4f7280df3857a43e2b0f87f74195c573b7bac2ecd57ed66ab1
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-logo-light.svg

# logo · 182 B
# sha256:5a35ccc9166fb7a111c6b72a0bb961f2fd5d801eb53e834766c9a06747d9fe47
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-mark-dark.svg

# logo · 187 B
# sha256:737af827c4c833c416cb39f4a17b30793da9a74a46e62fa110dfdf79048ca0ed
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-mark-ink.svg

# logo · 182 B
# sha256:26d9c5959b2ecdd71d3930f24d9b027d357ae5529f04498cb989a4372af1503a
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-mark-light.svg

# logo · 3.1 KB
# sha256:b9878ce516ffe722b034cb16958d3ab2be0de7229b3c909a32cd918737a45892
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-wordmark-dark.svg

# logo · 3.1 KB
# sha256:8b75b9e303ff225d8b057e6a8e2ffac4523abfb0cfe724b58120e1ac8587ea6e
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-wordmark-ink.svg

# logo · 3.1 KB
# sha256:d149d2c48462dffb85dbdcdd9e19c971969cd41e8a4de26ee2f6329717ab4431
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/wealthhut-wordmark-light.svg

# login-bg · 808 B
# sha256:092e1fe38ad9aa5eaea32c10c5f822c6df8f53f46cf35d9c0570336a06c90c4a
https://brand.snyder.tech/cdn/0.44.11/assets/login-bg/wealthhut-login-bg.svg

Machine-readable manifest.json, all brands in this version