一键在 Manus 中运行任何 Skill

brand-guidelines

星标0

分支0

更新时间2026年7月14日 22:10

Applies the Jylhis brand colors and typography to any artifact that benefits from the jylhis.com look-and-feel — slides, docs, mockups, diagrams, exported images, or production UI. Use it when brand colors, type, visual formatting, or company/personal design standards apply.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

Jylhis

Jylhis/design

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Jylhis Brand Styling

Overview

To apply the Jylhis brand identity (the personal/technical brand of Markus Jylhänkangas, jylhis.com) to any artifact, use this skill. It captures the canonical colors, typography, and visual rules so anything you produce reads as on-brand.

The single source of truth for every value here is the repo's tokens.json. When a value is missing, add it there first and regenerate — never hard-code a new hex. For the full system (platform themes, UI kit, accessibility specs) invoke the jylhis-design skill instead; this skill is the quick brand-application layer.

Keywords: branding, visual identity, post-processing, styling, brand colors, typography, Jylhis brand, paper-and-copper, visual formatting, visual design.

Brand Guidelines

The feel: warm cream paper, a single copper accent, monospace headings, serif body. No emoji, no gradients, no shadows. Unicode glyphs (›, ▸, », ☾, ★, └──, ✓, ✗, !, i) do the work icons normally would. Two themes, both first-class — Paper (light) and Roast (dark). Never ship one without the other.

Colors

Two values per role: light (Paper) / dark (Roast).

Paperstock — backgrounds & surfaces

Background: #faf7f2 / #1a1714 — the page itself
Subtle bg: #f0ebe3 / #242019
Surface (card): #e8e1d6 / #2a2520
Surface raised (modal): #fefdfb / #363230

Ink — text

Heading: #1e1b18 / #f0eae0 — titles (AAA)
Body: #2c2825 / #e8e0d4 — body (AAA)
Muted: #6b5f54 / #b0a496 — meta (AA)
Faint: #8a7f72 / #8a7f72 — decorators, disabled only

Copper — the single accent

Accent: #8a4f24 / #e89b5e — the only interactive color: links, focus rings, the "currently" left border, ghost-button text
Accent hover: #7a4622 / #f5b07a — hover/active twin, never a base color
Brand: #b5703c / #d4884a — literal logo copper. Use for large marks where contrast isn't measured: the maker's mark, hero strokes, sticker art. Never a link color (doesn't clear AA on paper)

Linen — borders & rules

Border: #d5cec4 / #3d3830
Border strong: #b0a898 / #5a5248

Signal — status (always pair with a glyph or word, never color alone)

Error ✗: #a60000 / #ff5f59
Warning !: #6f5500 / #d0bc00
OK ✓: #006800 / #44bc44
Info i: #0031a9 / #2fafff

Syntax (Emacs Modus — Operandi light / Vivendi dark). Canonical for all code rendering. Full nine-role palette lives in tokens.json#syntax. The copper accent is brand chrome only — never a syntax color.

Typography

Headings & chrome: JetBrains Mono (fallback: IBM Plex Mono, Cascadia Code, Fira Code, Source Code Pro, Courier New, monospace). Line-height 1.25, letter-spacing 0.01em.
Body text: Literata (fallback: Charter, Bitstream Charter, Georgia, Noto Serif, serif). Base size 1.125rem, line-height 1.65.
Code: JetBrains Mono.
Web font files (woff2, variable weight) ship in fonts/; the @font-face + family stacks are in colors_and_type.css.

How to apply

For HTML / web artifacts — link colors_and_type.css (it @imports tokens.css and adds the font stacks + semantic helpers .ds-body, .ds-h1, .ds-meta, .ds-code-inline, …). Copy fonts/, tokens.css, and colors_and_type.css next to the artifact so it renders self-contained — colors_and_type.css @imports tokens.css, so without it every var(--color-*) lookup 404s and the helpers lose their values. Default to the Paper theme; add data-theme="dark" on <html> for Roast.
For throwaway mocks / slides / specimens — emit static HTML the user can open, using the helpers above. Brand assets (favicon, og image) are in assets/.
For non-web / programmatic artifacts (pptx, image export, diagram tools) — read the RGB values above. Apply JetBrains Mono to headings, Literata to body, the accent copper (#8a4f24 light / #e89b5e dark) to interactive chrome, the brand copper (#b5703c / #d4884a) to large maker's marks, status colors only alongside their glyph.
For production code — never hard-code hex. Use the CSS custom properties from tokens.css, which are namespaced --color-* (var(--color-accent), var(--color-bg), …) or the platform palette for the target.

Key rules

Copper is the only accent — and it is brand chrome (links, focus, marks), never a syntax color.
ANSI slot 11 is always brand copper across every terminal target — intentional override.
No emoji, no gradients, no shadows. Glyphs are the icon set.
Status is never color-only — pair with ✓ / ✗ / ! / i or a word (CVD safety).
Contrast floors: body text AAA on both themes, muted text AA, faint is decorative only. See tokens.json#contrast.
No hex duplication — every value derives from tokens.json. If it isn't there, add it there first.

Technical details

Color application: use the hex/RGB values above for direct application, or var(--color-<role>) from tokens.css for the web. accent-subtle (copper at ~12–15% on bg) is the rgba var(--color-accent-subtle), or #f0e6da / #2e2520 as an opaque approximation where rgba isn't available.
Font management: the variable woff2 files in fonts/ cover both families; fallbacks above keep artifacts readable when the brand fonts aren't installed. No installation is required for the fallbacks to work.
Themes: every artifact should support both Paper and Roast. On the web that's :root (Paper) plus [data-theme="dark"] (Roast), both emitted by tokens.css.

同仓库更多 Skills

同仓库

jylhis-design

Jylhis/design

Use this skill to generate well-branded interfaces and assets for Jylhis (jylhis.com, the personal/technical site of Markus Jylhänkangas), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.

2026-07-150

design-review

Jylhis/design

Use this skill to audit a Jylhis design-system surface (web showcase, preview card, prototype, terminal theme, CLI script, or TUI integration) against the system's accessibility commitments and the CLI/TUI design conventions. Combines automated validators with a manual review playbook covering web a11y (WCAG 2.1 AA/AAA), non-web a11y (WCAG2ICT), CLI conventions (clig.dev / GNU / 12-Factor / GitHub-CLI accessibility work), TUI design (Ratatui / Bubble Tea / Textual + WAI APG), CVD spot-checking, and keyboard / focus walk-through. Produces a structured markdown report with severity-tagged findings and pointers back to the canonical specs.

2026-05-040

name	brand-guidelines
description	Applies the Jylhis brand colors and typography to any artifact that benefits from the jylhis.com look-and-feel — slides, docs, mockups, diagrams, exported images, or production UI. Use it when brand colors, type, visual formatting, or company/personal design standards apply.
license	Complete terms in LICENSE (repo root)
user-invocable	true

Jylhis Brand Styling

Overview

Keywords: branding, visual identity, post-processing, styling, brand colors, typography, Jylhis brand, paper-and-copper, visual formatting, visual design.

Brand Guidelines

Colors

Two values per role: light (Paper) / dark (Roast).

Paperstock — backgrounds & surfaces

Background: #faf7f2 / #1a1714 — the page itself
Subtle bg: #f0ebe3 / #242019
Surface (card): #e8e1d6 / #2a2520
Surface raised (modal): #fefdfb / #363230

Ink — text

Heading: #1e1b18 / #f0eae0 — titles (AAA)
Body: #2c2825 / #e8e0d4 — body (AAA)
Muted: #6b5f54 / #b0a496 — meta (AA)
Faint: #8a7f72 / #8a7f72 — decorators, disabled only

Copper — the single accent

Accent: #8a4f24 / #e89b5e — the only interactive color: links, focus rings, the "currently" left border, ghost-button text
Accent hover: #7a4622 / #f5b07a — hover/active twin, never a base color
Brand: #b5703c / #d4884a — literal logo copper. Use for large marks where contrast isn't measured: the maker's mark, hero strokes, sticker art. Never a link color (doesn't clear AA on paper)

Linen — borders & rules

Border: #d5cec4 / #3d3830
Border strong: #b0a898 / #5a5248

Signal — status (always pair with a glyph or word, never color alone)

Error ✗: #a60000 / #ff5f59
Warning !: #6f5500 / #d0bc00
OK ✓: #006800 / #44bc44
Info i: #0031a9 / #2fafff

Typography

Headings & chrome: JetBrains Mono (fallback: IBM Plex Mono, Cascadia Code, Fira Code, Source Code Pro, Courier New, monospace). Line-height 1.25, letter-spacing 0.01em.
Body text: Literata (fallback: Charter, Bitstream Charter, Georgia, Noto Serif, serif). Base size 1.125rem, line-height 1.65.
Code: JetBrains Mono.
Web font files (woff2, variable weight) ship in fonts/; the @font-face + family stacks are in colors_and_type.css.

How to apply

For HTML / web artifacts — link colors_and_type.css (it @imports tokens.css and adds the font stacks + semantic helpers .ds-body, .ds-h1, .ds-meta, .ds-code-inline, …). Copy fonts/, tokens.css, and colors_and_type.css next to the artifact so it renders self-contained — colors_and_type.css @imports tokens.css, so without it every var(--color-*) lookup 404s and the helpers lose their values. Default to the Paper theme; add data-theme="dark" on <html> for Roast.
For throwaway mocks / slides / specimens — emit static HTML the user can open, using the helpers above. Brand assets (favicon, og image) are in assets/.
For non-web / programmatic artifacts (pptx, image export, diagram tools) — read the RGB values above. Apply JetBrains Mono to headings, Literata to body, the accent copper (#8a4f24 light / #e89b5e dark) to interactive chrome, the brand copper (#b5703c / #d4884a) to large maker's marks, status colors only alongside their glyph.
For production code — never hard-code hex. Use the CSS custom properties from tokens.css, which are namespaced --color-* (var(--color-accent), var(--color-bg), …) or the platform palette for the target.

Key rules

Copper is the only accent — and it is brand chrome (links, focus, marks), never a syntax color.
ANSI slot 11 is always brand copper across every terminal target — intentional override.
No emoji, no gradients, no shadows. Glyphs are the icon set.
Status is never color-only — pair with ✓ / ✗ / ! / i or a word (CVD safety).
Contrast floors: body text AAA on both themes, muted text AA, faint is decorative only. See tokens.json#contrast.
No hex duplication — every value derives from tokens.json. If it isn't there, add it there first.

Technical details

Color application: use the hex/RGB values above for direct application, or var(--color-<role>) from tokens.css for the web. accent-subtle (copper at ~12–15% on bg) is the rgba var(--color-accent-subtle), or #f0e6da / #2e2520 as an opaque approximation where rgba isn't available.
Font management: the variable woff2 files in fonts/ cover both families; fallbacks above keep artifacts readable when the brand fonts aren't installed. No installation is required for the fallbacks to work.
Themes: every artifact should support both Paper and Roast. On the web that's :root (Paper) plus [data-theme="dark"] (Roast), both emitted by tokens.css.