name

jon-ramos-design

description

Use this skill to generate well-branded interfaces and assets for Jon Ramos (jonramos.dev — a software engineer's personal portfolio), either for production or throwaway prototypes/mocks/decks. Contains essential design guidelines, colors, type, fonts, assets, a new premium logo, and a UI kit of React components for prototyping. The aesthetic is "REPL Editorial": a warm ink/parchment ground, a jewel-teal + shell accent pairing, an editorial Crimson Pro serif voice paired with JetBrains Mono, and subtle Clojure/terminal motifs (;; // $ _ and corner registration ticks).

Jon Ramos — design skill

Read readme.md first — it is the full design guide: who Jon is, the source repo (github.com/jramosg/jonramos), content/voice rules, visual foundations, and iconography. Then explore the other files as needed.

What's here

styles.css — the single CSS entry point. Link it (or its @imported token files) and you get every color, font, and helper class. Default ground is dark/ink; add data-theme="light" for the parchment flip.
tokens/ — colors, typography, spacing, fonts, base/helper classes.
components/ — React UI primitives (Button, IconButton, Badge, Tag, Card, Field, Input, Textarea, Prompt, CodeBlock, Avatar). Each has a .d.ts (props) and .prompt.md (usage).
ui_kits/portfolio/ — the full interactive portfolio recreation; the best reference for how the pieces compose into a real screen.
assets/ — the logo (ink/paper/mono cuts + favicon), portrait, technology marks, icons, and self-hosted fonts.

How to use it

Visual artifacts (slides, mocks, throwaway prototypes): copy the assets you need out and write static HTML that links styles.css. Use the helper classes (.ds-ground, .ds-eyebrow, .ds-section-title, .ds-prompt) and the token variables directly — you do not need the React runtime for static work. Reproduce a component's look from its .jsx if helpful.
Production code: copy the assets and the component .jsx/.d.ts you need, read the rules here, and design as a brand expert. The components are self-contained (React only, styled via CSS custom properties — no other deps).

Non-negotiables (the short list)

Two type voices: Crimson Pro (serif, human — prose & headlines) + JetBrains Mono (machine — labels, tags, code, the $ prompt_). Don't substitute Inter/Roboto/Arial.
One accent: teal. One emphasis metal: shell. Clay only for alerts. Warm ink/paper grounds — never pure black or clinical white, never purple gradients.
No emoji. Terminal sigils (;; // $ › _ :) and corner ticks do the ornament.
Crisp small radii, hairline-first borders, calm expo motion (no bounces). Respect prefers-reduced-motion.

If the user invokes this skill without other guidance, ask what they want to build, ask a few sharp questions (surface, audience, language(s) EN/ES/EU, light or dark), then act as an expert designer who outputs HTML artifacts or production code depending on the need.

Jon Ramos — design skill

What's here

styles.css — the single CSS entry point. Link it (or its @imported token files) and you get every color, font, and helper class. Default ground is dark/ink; add data-theme="light" for the parchment flip.

tokens/ — colors, typography, spacing, fonts, base/helper classes.

components/ — React UI primitives (Button, IconButton, Badge, Tag, Card, Field, Input, Textarea, Prompt, CodeBlock, Avatar). Each has a .d.ts (props) and .prompt.md (usage).

ui_kits/portfolio/ — the full interactive portfolio recreation; the best reference for how the pieces compose into a real screen.

assets/ — the logo (ink/paper/mono cuts + favicon), portrait, technology marks, icons, and self-hosted fonts.

How to use it

Visual artifacts (slides, mocks, throwaway prototypes): copy the assets you need out and write static HTML that links styles.css. Use the helper classes (.ds-ground, .ds-eyebrow, .ds-section-title, .ds-prompt) and the token variables directly — you do not need the React runtime for static work. Reproduce a component's look from its .jsx if helpful.

Production code: copy the assets and the component .jsx/.d.ts you need, read the rules here, and design as a brand expert. The components are self-contained (React only, styled via CSS custom properties — no other deps).

Non-negotiables (the short list)

Two type voices: Crimson Pro (serif, human — prose & headlines) + JetBrains Mono (machine — labels, tags, code, the $ prompt_). Don't substitute Inter/Roboto/Arial.

One accent: teal. One emphasis metal: shell. Clay only for alerts. Warm ink/paper grounds — never pure black or clinical white, never purple gradients.

No emoji. Terminal sigils (;; // $ › _ :) and corner ticks do the ornament.

Crisp small radii, hairline-first borders, calm expo motion (no bounces). Respect prefers-reduced-motion.