Menu
Artifact-agnostic design guidance — color palettes, typography, data visualization principles. Works for CSS, React, PowerPoint, matplotlib, PDF, or any visual output.
| name | design-foundations |
| description | Artifact-agnostic design guidance — color palettes, typography, data visualization principles. Works for CSS, React, PowerPoint, matplotlib, PDF, or any visual output. |
Artifact-agnostic design guidance — works for CSS, PowerPoint, matplotlib, PDF, or any visual output.
prefers-reduced-motion.Color is emphasis — every non-neutral color must answer: what does this help the viewer understand? The viewer's eye goes where color is; if everything is colored, nothing stands out.
Target: 1 accent + 0-2 semantic colors (error/warning/success). Everything else neutral. Squint at your output — you should see a calm, mostly-neutral surface with 1-2 small moments of color.
Use when the user gives no color direction. Perplexity-aligned — warm, professional, accessible.
These are roles, not a mandate. A typical output uses Background + Text + Primary. Add semantic colors (error, warning, success) only when the content requires them. Do not introduce color for decoration.
| Role | Hex | Usage |
|---|---|---|
| Background | #F7F6F2 | Primary background |
| Surface | #F9F8F5 | Cards, containers |
| Surface alt | #FBFBF9 | Secondary surface layer |
| Border | #D4D1CA | Dividers, card borders |
| Text | #28251D | Primary body text |
| Text muted | #7A7974 | Secondary text |
| Text faint | #BAB9B4 | Placeholders, tertiary |
| Primary | #01696F | Links, CTAs (Hydra Teal) |
| Primary hover | #0C4E54 | Hover state |
| Error | #A12C7B | Destructive states |
| Warning | #964219 | Caution states |
| Success | #437A22 | Confirmation states |
| Role | Hex | Usage |
|---|---|---|
| Background | #171614 | Primary background |
| Surface | #1C1B19 | Cards, containers |
| Surface alt | #201F1D | Secondary surface layer |
| Border | #393836 | Dividers, card borders |
| Text | #CDCCCA | Primary body text |
| Text muted | #797876 | Secondary text |
| Text faint | #5A5957 | Tertiary text |
| Primary | #4F98A3 | Links, CTAs |
| Primary hover | #227F8B | Hover state |
| Error | #D163A7 | Destructive states |
| Warning | #BB653B | Caution states |
| Success | #6DAA45 | Confirmation states |
| Name | Light | Dark |
|---|---|---|
| Orange | #DA7101 | #FDAB43 |
| Gold | #D19900 | #E8AF34 |
| Blue | #006494 | #5591C7 |
| Purple | #7A39BB | #A86FDF |
| Red | #A13544 | #DD6974 |
Data visualization naturally needs extra colors to distinguish categories and series — that's legitimate. But those colors should fit within the overall art direction, not be random. Derive chart colors from the project's accent (monochromatic shades work well for sequential data) or use the curated chart color sequence below. The key: chart colors should feel like they belong in the same design system as the rest of the page.
When the user provides color direction or the content suggests a natural accent (e.g., finance → navy, sustainability → green): start with that primary as accent → derive surfaces by desaturating → keep semantic colors recognizable (red=error, green=success) → build light AND dark → test contrast (body 4.5:1, large text 3:1). If neither user direction nor content suggest a clear hue, use the Nexus palette above.
Type principles for any visual artifact.
| Type | Min screen | Min print/slides | Use for |
|---|---|---|---|
| Display | 24px | 18pt | Titles, heroes, covers |
| Body | 12px | 9pt | Body, bullets, captions |
| Body bold (heading) | 18px | 14pt | Section headings |
Never set display fonts below 24px/18pt. Never use body fonts at hero sizes expecting drama.
Font selection is fundamentally different depending on the output format. Each format has different constraints and different expectations for distinctiveness:
| Format | Strategy | Why |
|---|---|---|
| Websites | Intentionally selected distinctive fonts loaded via CDN. Prefer Fontshare (less overexposed) over Google Fonts. The font IS the design — it should match the art direction. | Websites load any font via CDN. System fonts are fallback only. |
| PDFs | Same quality as web — embed any TTF. Download from Google Fonts at runtime. | PDFs embed fonts automatically. Use professional, distinctive fonts. |
| Slides (PPTX) | System fonts only — Calibri, Trebuchet MS, Arial, Georgia. | PPTX cannot embed fonts. The viewer must have the font installed. |
| Documents (DOCX) | System fonts recommended — Arial, Calibri. | Documents must render correctly on the viewer's machine. |
When no font direction is given:
| Purpose | Brand font | Free web alt | Free PDF alt (embed TTF) | Free slide alt (system only) |
|---|---|---|---|---|
| Headlines | FK Grotesk (500-700) | Satoshi / General Sans | DM Sans Bold / Work Sans SemiBold | Calibri Bold / Trebuchet MS |
| Body | FK Grotesk (400-500) | Satoshi / Inter | Inter / DM Sans | Calibri / Arial |
| Code | Berkeley Mono (400) | JetBrains Mono / Fira Code | JetBrains Mono | Consolas / Courier New |
Blacklisted: Papyrus, Comic Sans, Lobster, Impact, Jokerman, Bleeding Cowboys, Permanent Marker, Bradley Hand, Brush Script, Hobo, Trajan, Raleway, Clash Display, Courier New (body).
Overused on the web (never use as the primary font for websites): Roboto, Arial, Helvetica, Open Sans, Lato, Montserrat, Poppins. System fonts (Arial, Helvetica, Georgia, Calibri, Times New Roman, Verdana, Tahoma, Trebuchet MS) belong in the fallback stack only — never as the chosen font. Every website loads a distinctive font via CDN; system fonts are the safety net if loading fails. For slides and documents where embedding isn't available, system fonts are fine as the primary choice.
Vary across projects — never reuse the same combination twice in a row.
| Role | Web (px) | Slides (pt) |
|---|---|---|
| Hero / Cover | 48-128px | 44-72pt |
| Page / Slide title | 24-36px | 36-44pt |
| Section heading | 18-24px | 20-28pt |
| Body | 16-18px | 14-18pt |
| Captions / Labels | 12-14px | 10-12pt |
Floor: 12px / 9pt absolute minimum for any text.
PPTX cannot embed fonts. Use only fonts installed on the viewer's machine:
| Heading | Body | Tone |
|---|---|---|
| Trebuchet MS Bold | Calibri | Modern, clean |
| Calibri Bold | Calibri Light | Minimal, corporate |
| Arial Black | Arial | Bold, direct |
| Georgia | Calibri | Classic, formal |
| Cambria | Calibri | Traditional |
PDFs embed TTF fonts automatically. Download from Google Fonts at runtime:
| Heading | Body | Tone |
|---|---|---|
| DM Sans Bold | Inter | Modern, clean |
| Work Sans SemiBold | Work Sans | Minimal, versatile |
| Instrument Serif | DM Sans | Editorial, sophisticated |
| Source Serif 4 Bold | Source Sans 3 | Traditional, authoritative |
Fallback: Helvetica (built-in, no download needed).
Principles for charts, graphs, and data visualizations across all formats (web, Python, PowerPoint, documents).
Principles for charts, graphs, and data visualizations across all formats.
Use in order for data series (bar, pie, line, scatter):
| # | Hex | Name |
|---|---|---|
| 1 | #20808D | Teal (chart primary — distinct from Nexus UI teal #01696F) |
| 2 | #A84B2F | Terra/rust |
| 3 | #1B474D | Dark teal |
| 4 | #BCE2E7 | Light cyan |
| 5 | #944454 | Mauve |
| 6 | #FFC553 | Gold |
| 7 | #848456 | Olive |
| 8 | #6E522B | Brown |
Fit chart colors to the art direction. Data viz naturally needs multiple colors to communicate — that's fine. But choose them thoughtfully: for sequential data, use monochromatic shades of the primary accent. For categorical data that needs distinct hues, use the curated sequence above — it's designed to be harmonious. When the project has a custom palette, derive chart colors from it rather than defaulting to unrelated hues. The chart colors should feel like part of the same design system as the rest of the page.
Rules: ≤5 series per chart (use small multiples beyond that). Sequential data: single hue, varying lightness. Diverging data: teal #20808D positive, red #A13544 negative. Highlight key series at full opacity, dim others to 40-60%.
Colorblind safety: Never color alone — add labels/patterns/markers. Avoid red/green only. Blue+orange is safer.
| Data question | Chart type | Notes |
|---|---|---|
| Change over time? | Line | Continuous data, trends |
| Category comparison? | Vertical bar | Discrete comparisons |
| Ranking? | Horizontal bar | Easier label reading |
| Part of whole? | Stacked bar / treemap | NOT pie (rarely right) |
| Distribution? | Histogram / box plot | Spread, outliers |
| Relationship? | Scatter | Correlation, clusters |
| Geographic? | Choropleth map (D3, Leaflet, or Mapbox) | Regional comparisons |
| Flow/process? | Sankey / funnel | Conversion, steps |
Never: 3D charts, pie with 5+ slices, dual-axis charts.
tabular-nums lining-nums on all numeric valuesBuild distinctive, production-grade websites and web apps. Routes to the right guidance based on framework (Next.js, React Native, vanilla HTML). Covers design tokens, typography, motion, layout, accessibility, and deployment.
Fullstack web app skill — Express + Vite + React + Tailwind + shadcn/ui + Drizzle ORM template. Use for SaaS, dashboards, admin panels, e-commerce.
Next.js 16+ specific guidance — app router, Tailwind v4, shadcn/ui, deployment to Vercel. Use alongside the parent website-building skill.
React Native & Expo styling guidance — NativeWind, design tokens, navigation, platform-specific UI. Use alongside the parent website-building skill's design foundations.
Ultra-dense, full-spectrum codebase reconnaissance skill exclusively by VRIL LABS. Chains every major and obscure code repository platform and cross-repository search engine—leveraging free APIs wherever available—to systematically discover, evaluate, and document high-signal reference codebases in a dedicated REFERENCE_REPOS.md file, saving development time and elevating output quality on any current task. Invoke when asked to find reference implementations, build a reference corpus, scout existing solutions, discover similar projects, or research how a technology is used across the open-source ecosystem.
Deep-research-backed SKILL.md authoring guide exclusively by VRIL LABS. Instructs agents on how to design, structure, write, and validate flawlessly optimal SKILL.md files that conform to the Agent Skills open format and perform at the highest level across Claude Code, GitHub Copilot, Cursor, Codex CLI, Windsurf, and any Skills CLI-compatible agent runtime. Invoke when asked to create a new skill, write a SKILL.md file, audit an existing skill for quality, or understand best practices for skill specification authoring.