Ramson

The Ramson mark, the internal tools' marks, and the ramson look, from one source. Code pulls them with shadcn add @gesso/ramson-brand and keeps a pinned copy until someone re-pulls it. Emails, decks, Washi pages, and agents link to the hosted files instead, which are always current. External products have their own kits, like Ascora, and the Studio picks colors for any retune.

Marks

Internal tools

Light and dark name the ground a mark sits on. Mono is one color: the SVG takes the text color, and the PNGs come in black and white. Each file is also in the press kit zip, at 256 and 1024 pixels.

Usage

• Use the four-color Ramson mark for the hero, press, and covers. In running UI like a nav bar or a footer, use mono beside the name.
• Leave clear space of at least a quarter of the mark's height on every side.
• Keep the Ramson mark at least 24px tall on screen. The internal tools' marks hold up down to 16px, since they're drawn as app icons.
• Match the variant to the ground: light on light, dark on dark. On a photo or a busy ground, use mono.
• Don't redraw, stretch, rotate, outline, or shadow a mark, and don't recolor one outside its three variants.
• Don't take the Ramson mark apart. Its four shapes only move in the site's animated hero.

Color

Code reads these through the Ramson prefab as --brand-*, so a component never names one. Hex is for email and decks, where oklch doesn't render. Teal is the ground of the app tiles, and the four-color Ramson mark keeps the colors it was exported with.

Type

Fraunces sets display and Outfit 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.

Motion

The mark moves on the Relief stage. Mark in motion has its four shapes and the assembled mark as beat machine libraries, with the site hero's fling as a preset.

Hosted files

Each <mark> is one of ramson, washi, sumi, loop, books, launchpad, or signing. Link to these rather than copying them, so a page picks up a mark when it changes. They're rebuilt from the same source as the registry item on every deploy.

In code

import { BrandMark } from '@/brand/brand-mark';
import { RAMSON } from '@/brand/ramson/marks';

<BrandMark mark={RAMSON.marks.ramson} size={32} />

<a href="/" className="flex items-center gap-2">
  <BrandMark mark={RAMSON.marks.ramson} variant="mono" decorative />
  Ramson
</a>

The default variant, auto, draws the light colors and switches to the dark ones under .dark. Toggle the docs theme to see it.

auto works through a Tailwind class, so it needs Tailwind to scan the installed brand/ folder and your dark mode to be the .dark class, as in the rest of Gesso. With source(none), add an @source for brand/. In mark.ts, markSvg(mark, variant) returns a standalone SVG file, which is how app icons should be made, and brandFiles(brand, id) returns the hosted URLs.

To draw your own marks, declare each one through a small generic helper the way the brand items do, so a role a shape names but the palette lacks fails to compile. A plain Mark or Brand annotation widens the roles to string and lets a typo through.

import type { Mark } from '@/brand/mark';

const mark = <R extends string>(definition: Mark<R>) => definition;

export const BADGE = mark({
  name: 'Badge',
  group: 'product',
  viewBox: '0 0 24 24',
  palette: { light: { ink: '#0D2E26' }, dark: { ink: '#7FB89E' } },
  shapes: [{ tag: 'circle', fill: 'ink', attrs: { cx: 12, cy: 12, r: 10 } }],
});

Accessibility

• A mark is role="img" and named for its product. Pass decorative when visible text beside it already says the name, so it isn't read twice.
• auto follows .dark, so a mark lands on the ground it was drawn for, as long as the class it relies on is built (see above).
• Mono follows currentColor, so it takes the text color, including the system text color in forced colors. The full-color marks keep their colors there, like any logo.
• The hosted SVGs carry a <title> with the product name.

Install

shadcn add @gesso/ramson-brand

It installs brand/ramson/: marks.ts, fonts.css, and an svg/ folder with 21 SVG files, the seven marks in three variants each. It brings BrandMark as brand/brand-mark.tsx and brand/mark.ts, and the Ramson prefab with the tokens. The kit never imports a brand item.