Ascora

Ascora was iCreditScore. Its mark is the o-ring, a ring that holds solid for half its sweep and then fades out, and the wordmark sets the same ring as its "o". The letters always take the ring's solid color, so the word and the ring read as one.

Marks

In light, the ring fades from purple to amber as it clears, and on dark it runs from lilac to a paler lilac. Mono keeps the fade's opacity in one color, so the ring still reads as the o-ring. The press kit zip has every file at 256 and 1024 pixels.

Usage

• Use the wordmark where there's room for the name, and the ring on its own where there isn't, like an app icon, an avatar, or a favicon.
• Leave clear space of at least a quarter of the mark's height on every side.
• Keep the ring at least 20px tall and the wordmark at least 16px tall on screen, so the fade still reads.
• Keep the fade as drawn, and don't swap it for a flat ring or another gradient.
• Don't recolor the letters apart from the ring, and don't rotate or mirror the ring.
• Don't set the ring beside the old iCreditScore wordmark, and don't redraw, stretch, outline, or shadow either mark.

Color

Code reads these through the ICS prefab as --brand-*, which kept its name through the rename. Hex is for email and decks, where oklch doesn't render. The marks keep the colors they were exported with: purple #7020D4 fading to amber #FFB11F, and on dark, #B183EC fading to #C4A8F0.

Type

Outfit sets display and Sora runs UI and body. Both are OFL. In Next, load them with next/font/google. Anywhere else, import the item's fonts.css first in your entry CSS, or link the stylesheet it imports.

Illustration

Ascora draws its data as five geographies, each built on Relief and colored by the look it sits in: score history as an open horizon, accounts as an archipelago, utilization as ocean depth, alerts as atmosphere, and empty states as the edge of the map.

Hosted files

Each <mark> is ring or wordmark. Link to these rather than copying them, so a page picks up a mark when it changes.

In code

import { BrandMark } from '@/brand/brand-mark';
import { ASCORA } from '@/brand/ascora/marks';

<BrandMark mark={ASCORA.marks.wordmark} size={24} />

<BrandMark mark={ASCORA.marks.ring} size={32} />

BrandMark draws every brand's marks the same way, with the same props. The fade is a mask over color wedges, so it renders the same in the browser, the PNGs, and email.

Accessibility

• The wordmark is role="img" named Ascora, and the ring on its own is named Ascora ring. Pass decorative when the name is set beside it.
• auto follows .dark, with the same Tailwind requirement as on the Ramson page.
• The fade carries no meaning, and the letters stay solid in every variant.
• Mono follows currentColor, so it takes the system text color in forced colors, fade included.

Install

shadcn add @gesso/ascora-brand

It installs brand/ascora/: marks.ts, fonts.css, and six SVG files, both marks in three variants. It brings BrandMark and the ICS prefab with the tokens.