Brand

Name

Senco — derived from "send" + "co" (company/community). Short, easy to pronounce across languages, and immediately signals the product's core function: sending money.

Usage rules

The lowercase "senco" exists only inside the logo artwork. In any sentence, including inside the product, it is capitalized. A brand that is lowercase in body copy forces every writer to decide sentence by sentence whether a line starts with a proper noun or a typo.

Naming a feature

Feature names are descriptive, never invented. "Rate alert", not "SencoWatch". Senco's audience is multilingual and a coined product name is untranslatable — it survives as an opaque string in every locale. The brand appears in the product name; features are named by what they do.

Brand colors

Senco uses a small, fixed palette. These are the only colors that represent the brand.

Feedback colors (success, warning, error) are not brand colors — they are defined in Color as semantic status tokens.

One brand color, and it is functional

Brand blue is also the interactive color. There is no decorative use of accent-600 anywhere in the product: if something is blue, it can be acted on. This is why the palette does not offer a brand secondary or a gradient for general use — a second brand color would immediately be applied to something non-interactive and the rule would collapse.

--ds-hero-gradient (#0A4ABF → #0F62FE) is the one exception, reserved for marketing surfaces and never used inside the product.

Brand blue in dark mode

The brand color is #0F62FE in both themes at the base layer. In dark mode the semantic alias lightens to #458DFF for contrast reasons. Brand documentation and Figma still show one brand blue; only what the interface points at changes. See Themes.

Logo

The Senco logo is a wordmark — "senco" in lowercase — followed by a blue dot after the "o". The dot uses the brand primary color (accent-600, #0F62FE). There is no separate symbol mark; the wordmark and dot function as a single unit.

• Font: Lexend Deca (Google Fonts, sans-serif)
• Rendering: SVG-based (text converted to paths for cross-platform consistency)
• Aspect ratio: 38:7
• Component: SencoLogo with size and variant props

The logo is the only place a non-system typeface appears, and it appears as vector paths rather than as text. No webfont is requested at runtime, which keeps the logo consistent with the system-font rule in Typography and with the constraint that the design-to-code pipeline does not carry custom fonts.

The dot

The dot is the whole mark. It is the only element that distinguishes the wordmark from set type, it carries the one brand color, and it is what survives at 16px in a browser tab. It is never removed, never a different color from accent-600 in the default variant, and never separated from the wordmark as a standalone symbol.

Variants

In the inverse variant the dot is white rather than blue. Brand blue on a dark navy background reads as a smudge, and on brand-blue backgrounds it disappears entirely. The mark keeps its form at the cost of its color — form is what makes it recognizable.

Minimum size

• Digital: 24px height minimum (default size prop value)
• Print: 10mm height minimum

Below 24px the dot closes up against the "o" and the mark reads as "sencq". This is the reason for the floor, and it is why the favicon uses a different construction entirely rather than a shrunken wordmark.

Usage on backgrounds

On photography, the logo sits on a solid or heavily dimmed area rather than directly on the image. Senco does not use photographic backgrounds in-product, so this rule applies to marketing surfaces only.

Clear space

Keep clear space around the logo — at least the height of the logo mark on every side. Don't place text, icons, or other elements inside this zone.

The measurement is the cap height of the wordmark, which scales with the logo. At the 24px minimum that is 24px of clear space on every side; the rule does not need re-deriving per size.

Clear space applies to the visual edge, not the bounding box of the SVG. The app bar is the tightest case in the product: the logo sits at space-4 from the screen edge with clear space maintained toward the action icons on the right.

Logo misuse — Don't

Don't stretch, recolor, rotate, or add effects to the logo. If you're unsure, use the original files from the brand kit.

Brand personality

How personality shows up in the interface

A personality that only appears in a slide deck is not a personality. Each trait maps to something the product actually does:

The accessible / childish line

"Accessible" means a user with no financial background can complete a transfer. It does not mean illustration, mascots, rounded friendliness, or congratulatory language beyond the single success confirmation. Senco moves money that people cannot afford to lose; the tone stays level.

Favicon

The Senco favicon uses a white "S" letter on a blue rounded-square background. It appears in browser tabs, bookmarks, and app icons.

Why the favicon is not the logo

A wordmark is unreadable at 16px. The favicon is therefore a separate construction — a single letter on a filled tile — that keeps the two recognizable properties of the brand at that size: the blue, and the "S". It is the one sanctioned departure from the wordmark, and it exists because shrinking the logo would have produced an unrecognizable smear rather than a smaller brand.

Usage

• Always use the blue background version for favicon — never transparent
• The symbol mark alone (no wordmark) at favicon sizes
• Do not swap colors or add effects
• Keep the tile filled. A transparent favicon inverts unpredictably between light and dark browser chrome

Tone of voice

Senco speaks like a helpful friend who knows about money — confident but never condescending.

Principles

• Be clear, not clever — "Your transfer is on its way" not "Funds in transit"
• Be direct — Lead with what the user needs. Skip filler
• Be reassuring — Money is emotional. Confirm, don't assume
• Use plain language — Our users may not be native English speakers

Examples

Writing for translation

Copy is written to be translated, not just to read well in English.

• No idioms. "On its way" survives translation; "in the pipeline" does not.
• No humor that depends on wordplay.
• Short sentences. A German or Tagalog translation of a long English sentence typically runs 30–40% longer and is what breaks a fixed-height button.
• Never concatenate a sentence from fragments — word order differs by language.
• Currency, date, and number formatting come from the locale, never from a hard-coded string.

Error copy has a shape

Every error message names what happened, why, and what to do next:

Transfer couldn't be sent — the recipient's account number was rejected by the receiving bank. Check the number and try again.

An error that omits the "what to do next" leaves the user holding a problem they cannot act on, which is the fastest way to lose trust in a product holding their money.

Words to avoid

Target audience

Young adults (18–35) in areas with slow or unreliable internet, often where local currencies lose value fast. They send money to family, use crypto as a cheaper way to transfer, and need an app that works on budget phones with bad connections.

User needs

• Send money abroad quickly and cheaply
• See whether fiat or crypto gives a better rate
• Track transfers in real time
• Understand fees before confirming
• Use the app on low-end Android devices

What the audience implies for the system

Nearly every unusual decision in this design system traces back to this audience:

A design system for a different audience would reach different conclusions from the same principles. Recording the audience here is what makes the rest of the system arguable rather than arbitrary.

Known gaps