fotona-design-system

Applies Fotona Brasil brand tokens, typography, and layout rules to dashboards, slides, and social posts.

1|Updated Apr 19, 2026
One-click install
npx skills add https://github.com/fercosnt/fernando-claude-marketplace --skill fotona-design-system-fercosnt
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fotona-design-system
Source: https://github.com/fercosnt/fernando-claude-marketplace/tree/main/fotona-design-system/skills/fotona-design-system
Command: npx skills add https://github.com/fercosnt/fernando-claude-marketplace --skill fotona-design-system-fercosnt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve? Producing on-brand visual pieces for Fotona Brasil requires knowing dozens of scattered rules — two visual registers (light product UI vs. dark brand), exact hex tokens, font pairing, logo usage, slide archetypes, and compliance constraints (no competitor names, no patient names, no result promises). This Skill centralizes that knowledge so every artifact, deck, or post follows the brand system without manual lookup. ## Core Features & Use Cases - Two-register routing: Decides between the light register (dashboards, LPs, apps, artifacts) and the dark brand register (slides 1920x1080, posts, campaigns), then loads only the relevant reference file. - Ready-to-use assets: Ships tokens.css, components.css (14 .ftn-* components), three embedded fonts, the official SVG logo, and a full example dashboard HTML. - Format-specific guides: References cover 14 UI components, 9 slide archetypes with anatomy and copy, 7 social post formats, and calibrated image-generation prompts with negative prompts. - Use Case: Ask for a commercial deck cover for the GLP1Tight protocol and receive a 1920x1080 slide with the black-to-crimson gradient, Montserrat 300/700 title, red bottom bar, and correct ® trademark formatting. ## Quick Start Ask the assistant to create a Fotona-branded piece, for example: build a marketing calendar dashboard for Fotona using the official design system.

Frequently Asked Questions about fotona-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an on-brand Fotona dashboard or landing page?

Use the light register: white surfaces, neutrals from the logo (#414042, #808285), and red #ED1C24 only for the primary action. Paste tokens.css and components.css into your page and use the .ftn-* classes, or import @fotona/ui in a Next.js project.

What slide format and fonts does the Fotona brand use?

Slides are 1920x1080 with a black-to-crimson gradient background, a 24px red bottom bar, and titles in Montserrat uppercase mixing weights 300 and 700 in the same phrase. The logo sits top-left at 150-240px wide.

Can I use Google Fonts links in a standalone Fotona artifact?

No. Font CDNs are blocked and fall back silently, so artifacts must embed Instrument Sans, Instrument Serif, and Montserrat as @font-face data URIs in base64 woff2. The fonts.css file and font files are included in the assets folder.

What image style should I prompt for Fotona marketing visuals?

Prompt cinematic editorial photography on pure black with a deep crimson gradient glow, red stage lighting, and red rim light. The negative prompt excludes blue or purple light, neon, illustration, 3D render looks, stock smiles, text, and logos.

What content is prohibited in Fotona brand pieces?

Never include competitor names or devices, patient names, procedure pricing, result promises, emoji as graphic elements, or data without a cited source. Before/after images must be real clinical photos with physician credit and session counts.

When should I use the dark register versus the light register?

If the piece will be used (dashboard, app, tool), use the light register; if it will be shown (slide, post, campaign hero), use the dark register. A dark hero can sit inside an otherwise light landing page since the register applies per piece.