pwc-brand

Name: pwc-brand
Author: huggingface/paperswithcode

$npx mdskill add huggingface/paperswithcode/pwc-brand

The website's look is a calm **academic paper**: warm off-white paper, near-black ink, a serif for titles, a clean sans for text, mono for labels and numbers, hairline rules instead of shadows, and one muted **blue** accent used sparingly to point at the thing that matters. Every generated visual should look like a page of the site.

SKILL.md

.github/skills/pwc-brandView on GitHub ↗

---
name: pwc-brand
description: Papers with Code brand guidelines (colors, fonts, logo, layout, chart style, voice) taken from the paperswithcode.co website, plus the Pillow helpers that apply them. Use this whenever you create or restyle any Papers with Code visual or branded copy — X/social post images and charts, OG/share images, announcement cards, slides, report or dashboard graphics, diagrams, emails, or HTML pages meant to look like the site — even if the request only says "make an image/chart for the X post" or "make it look like our website". Not for paper thumbnails, which show the paper's own artwork (use create-thumbnail).
---

# Papers with Code brand

The website's look is a calm **academic paper**: warm off-white paper,
near-black ink, a serif for titles, a clean sans for text, mono for labels
and numbers, hairline rules instead of shadows, and one muted **blue** accent
used sparingly to point at the thing that matters. Every generated visual
should look like a page of the site.

Exact token values, type scale, and chart specs: `references/tokens.md`.
Worked examples (X card, OG image, HTML/SVG chart, slide): `references/examples.md`.

## How to apply it

- **Server-rendered images (Python/Pillow):** never hard-code colors or font
  paths. Import from `backend/services/brand.py`:
  - `frame(size, title=, subtitle=, eyebrow=, title_size=)` — paper canvas
    with the standard header and footer for any size; draw content between
    `frame.top` and `frame.bottom`, scale your own sizes with `frame.px(n)`
    (sizes are on the 1200×675 reference scale; the frame scales by area).
  - `font(family, size, weight)` with families `serif`, `serif-italic`,
    `sans`, `mono` (bundled variable fonts in `backend/assets/fonts/`).
  - `wrap_text`, `fit_text`, `draw_tracked` (letter-spaced mono labels),
    `draw_mark`, `draw_wordmark`, `LIGHT`/`DARK` palettes.
  - Ready-made 1200×675 cards: `render_bar_card` and `render_list_card` in
    `backend/services/x_insight_cards.py`. Reuse them before writing new ones.
- **Pillow limitation:** skip negative title tracking (-0.02em); drawing
  per character breaks kerning. Tracking is only for mono eyebrows.
- **HTML/SVG/slides:** use the CSS custom properties and Google Fonts import
  from `references/tokens.md`; support dark mode with the `DARK` values.
- **Check your output:** `uv run python .agents/skills/pwc-brand/scripts/render_samples.py <out_dir>`
  renders the references: `bar-card.png` (leaderboard / trend chart, X),
  `list-card.png` (ranked roundup, X), `square-card.png` (1080×1080
  announcement built with `frame()`), `og-default.png` (share image).
  Compare against them and view every image you produce before publishing.

## Rules

**Color**
- Paper `#FAF8F4` background, ink `#1A1814` for primary text; secondary text
  ink-soft `#5A554C`, labels ink-faint `#8E8678`; hairlines `#E4DFD4`.
- One accent: blue `#305880` (`--accent`), with accent-soft `#D6E7F8` for
  non-highlighted data and accent-text `#003C6C` for the highlighted number.
  Use it for the single most important element or series (the new SOTA bar,
  a link, or one consistent series such as list/rank numerals) — not for
  decoration, backgrounds, or headlines.
- Never use orange/red (#DC562F) or saturated brand colors; the site has none.
  Warm highlight (`#FFF1D9` / `#733D00`) only for a "highlighted row" callout.
- Charts: highlighted series in accent, everything else accent-soft or
  hairline-strong `#C8C2B3`. Two-series trend charts use `#33639E` (code) and
  `#AA7D24` (Hugging Face), as on /trends.

**Typography**
- Titles: **Newsreader** (serif), weight 500, tight (-0.02em), sentence case.
- Body and subtitles: **Inter** 400 (600 for emphasis inside data rows).
- Eyebrows, labels, axis ticks, numbers, the domain: **JetBrains Mono**,
  eyebrows UPPERCASE with 0.1–0.12em tracking in ink-faint.
- At most these three families; no other fonts, no all-caps titles.

**Logo**
- The mark is three nested squares (ink / paper / ink, square corners):
  `assets/pwc-mark.svg` (`pwc-mark-dark.svg` on dark). Never round it,
  recolor it, or add effects.
- The wordmark is **"Papers"** in Newsreader 600 ink followed by
  **"with Code"** in Newsreader italic 400 ink-soft (`draw_wordmark`). In
  plain text write "Papers with Code" (lowercase "with"), never "PwC" or
  "PapersWithCode".

**Layout**
- Generous margins (≥ 64 px on 1200 px canvases), left-aligned text,
  hairline rules to separate header, content, and footer.
- Radius 4 px for bars/chips, 8 px for cards; square logo. No drop shadows,
  gradients, glows, or stock imagery.
- Footer on social cards: wordmark left, `paperswithcode.co` in mono
  ink-faint right.
- Sizes: X 1200×675, OG 1200×630, square 1080×1080. Type and margins scale
  with canvas area from the 1200×675 reference (`frame.px`, ×1.2 on square);
  use leftover height for more space between items, not bigger text.

**Voice (captions, post text, slide copy)**
- Direct, specific, and technical, like a research briefing: lead with the
  most interesting fact and give exact numbers with their metric.
- No hype ("groundbreaking", "game-changer", "revolutionary"), no emojis or
  hashtags, no questions to the reader. Name models and benchmarks exactly
  as written on the site.

## Before you publish

1. Background is paper (or the dark palette throughout), never white or
   gray.
2. Only Newsreader / Inter / JetBrains Mono are used.
3. The accent marks exactly one thing per visual.
4. The mark and wordmark are unmodified.
5. Numbers in text and image match the data, and the image was viewed.

More from huggingface/paperswithcode

Skill	Description
add-benchmark	Add or update benchmark datasets/leaderboards in the paperswithcode repo database. Use this whenever the user asks to add a benchmark, add a leaderboard, set default/featured benchmarks for a task, link benchmarks to tasks, add Accuracy or other metrics for a benchmark, or fix benchmark source links. This is repo-specific and should trigger even if the user only names benchmark titles and a task page.
add-conference	Add or update conference rows in the paperswithcode repo database. Use this whenever the user asks to add a conference, create a conference page, import accepted papers for a venue (CVPR, ICLR, NeurIPS, ICML, ICRA, etc.), set conference dates/venue/description/hero image, or link papers to a conference edition. Trigger even for casual phrasing like "add CVPR 2027", "create the ICLR 2026 page", "import conference papers from this CSV", or "set the conference thumbnail".
add-evals	Add evaluation results to the paperswithcode database from any source — Hugging Face model cards, arXiv/HF/PapersWithCode paper text, or GitHub repository READMEs — restricted to benchmarks that already exist with a task association and the exact leaderboard metric already configured. Use this whenever the user shares a Hugging Face model URL or repo id, an arXiv id / HF paper / PapersWithCode paper, a GitHub repository URL, or a model release page and asks to add evaluation results, benchmark scores, or leaderboard entries — even when phrased casually like "add scores from this model", "import benchmarks from <hf url>", "ingest the eval table from this paper into the DB", "grab the benchmarks from this repo's README", or "add evaluations for this release". By default import only the model(s) the source paper introduces — never post comparison-table baselines onto other papers as external evals unless the user explicitly asks. If the source is not backed by an arXiv paper, first use the add-external-paper skill to create or update the `source = 'external'` paper row, then attach evaluation rows to that paper. This skill must skip source-only metrics, component scores, subscores, and alternate metric labels unless that metric is already configured for the exact leaderboard; use it instead of generic ingestion guidance whenever the user is trying to populate evaluation results from a model, paper, or repository source.
add-external-paper	Add non-ArXiv external papers/resources to the paperswithcode repo database. Use this whenever the user asks to add, index, submit, or populate a paper/resource/release that does not have an arXiv paper, including Hugging Face model cards, GitHub repositories, blog posts, vendor technical reports, external PDFs, project pages, or release announcements. This skill should trigger even when the user casually says "add this repo/model/blog to paperswithcode" or gives a URL such as GitHub, Hugging Face, a company blog, a PDF, or a technical report and wants it to appear as a paper page with tasks, methods, code, project links, HF artifacts, and a thumbnail.
add-method	Add or update AI/ML method taxonomy rows in the paperswithcode repo database. Use this whenever the user asks to add a method, technique, architecture, attention mechanism, training method, model-family method, or source/visual metadata for a method; says phrases like "make GPT-4 a method", "add X as a method", "similarly add this method", "link papers that cite the source paper", or "update the method source to point to the paper page"; or gives a method name plus a paper, arXiv id, PapersWithCode URL, Hugging Face report, GitHub explainer, blog post, or image for the method thumbnail.
add-task	Add or update AI/ML task taxonomy rows in the paperswithcode repo database. Use this whenever the user asks to add a task, create a new benchmark category, add a subtask under an existing task, set task description/keywords/area/image, or expand task coverage; says phrases like "add X as a task", "create a task page for", "similarly add this task", or "we need a task for"; or names a research area (ASR, object detection, agents, tabular learning) that should become a browsable /tasks/ page with keywords and a hero image. After adding the task, recommend standard benchmarks to link next (use add-benchmark when the user wants them ingested).
complete-task	>-
complete-task-based-on-hf	Complete or audit a Papers With Code task using Hugging Face model popularity as the discovery signal. Use this whenever a user asks to scan the most downloaded or trending Hugging Face models for a pipeline/task, resolve their canonical technical reports, and add missing paper-native evaluations to existing Papers With Code benchmarks. Trigger for requests like "complete this task from HF", "check popular Hub models for missing evals", or a Hugging Face models URL with `pipeline_tag` and `sort`; use `add-evals` instead for one already-known model or paper, and `complete-task-v2` for a holistic field survey beyond Hugging Face.
complete-task-v2	>-
create-thumbnail	Create, replace, audit, and publish Papers With Code paper thumbnails for one paper or every paper on a benchmark page. Use this whenever a user asks to add a thumbnail, fix an "Untitled resource" card, use artwork from a source/project/GitHub README, regenerate a paper preview, or find papers on a benchmark with missing, generic, stale, or broken thumbnails. This is the repo-specific end-to-end workflow for source selection, portrait composition, cache-safe publication, and live visual verification.