jaytel0/taste/taste-skill

Taste Skill

Use this skill when

Use this skill when generating platform-agnostic UI screens, interface fragments, cards, panels, mobile-scale layouts, desktop-scale layouts, component systems, or presentation mockups that must rely on concrete visual structure instead of domain clichés.

Use it when the design should remain valid across neutral domains such as tools, education, finance, logistics, health, notes, media, operations, scheduling, settings, search, onboarding, or data entry.

Use it when the user has not requested a specific platform, operating system, device frame, brand system, illustration style, photographic direction, dense dashboard, or marketing page.

Do not infer a platform. Do not add operating-system chrome, phone hardware, app-store conventions, or brand-like identity devices unless the user explicitly requests them.

Core directive

Create the look through structure, spacing, type scale, value contrast, radius, surface layering, and controlled color placement.

Use one dominant focal mass per screen. Keep the module count low. Concentrate detail in one local area. Leave surrounding zones sparse.

Default to a pale neutral canvas with rounded white or near-white surfaces, soft low-opacity shadows, large radii, restrained grayscale chrome, one plain sans-serif type family, and at most one small saturated accent hue.

Do not let invented content, brand names, product categories, avatars, slogans, images, or decorative props carry the design. The design must still work if every text string is replaced with “Title,” “Label,” “Detail,” “Item,” or “Status.”

Non-negotiable defaults

Unless the user explicitly asks otherwise:

1. Use a pale neutral base canvas: near-white, off-white, or very pale gray.
2. Place white or near-white rounded surfaces on that base with slight tonal separation.
3. Use one primary focal mass per screen:

• One large rounded card.
• One centered slab.
• One dark capsule.
• One large text block.
• One compact card cluster.
• One single saturated rounded surface only when allowed.

1. Keep the module count low. Do not fill the canvas with many equal cards.
2. Keep most UI chrome grayscale: white, off-white, pale gray, mid gray, charcoal, and black.
3. Use one saturated accent hue maximum per screen.
4. Keep saturated accent area small by default: dots, rings, chips, thin linework, a short text line, or one contained control.
5. Keep 80–95% of the visible interface neutral in tone.
6. Use broad, low-opacity shadows with large blur and minimal offset.
7. Avoid heavy outlines. Use hairline strokes only when spacing, tone, or shadow cannot define structure.
8. Use large corner radii on cards, panels, image crops, large controls, and major containers.
9. Use fully rounded pills for chips, filters, search fields, bottom docks, active markers, and compact controls.
10. Use a single plain sans-serif type family for almost all UI text.
11. Use only two or three type weights in one composition.
12. Build hierarchy through size, weight, spacing, tone, alignment, and shadow before adding badges, color, borders, or extra icons.
13. Use near-black primary text on pale surfaces.
14. Use off-white primary text on dark surfaces.
15. Use muted gray for secondary labels, captions, helper text, metadata, inactive states, and quiet controls.
16. Concentrate detail in one local area and keep nearby zones sparse.
17. Use generous internal padding inside every card, pill, row group, dock, and panel.
18. Do not add fake device hardware unless the user specifically requests a device mockup.
19. Do not add status bars, home indicators, camera cutouts, bezels, ports, side buttons, or phone-model cues unless requested.
20. Do not use invented content, brand names, avatars, product categories, or marketing copy as the visual engine.
21. Preserve the system when the domain changes. Finance, notes, logistics, health, education, media, and tools must all use the same structural rules unless the user specifies otherwise.

Anti-collapse guardrails:

1. Do not collapse into a generic equal-card grid.
2. Do not collapse into a dense SaaS dashboard unless the user asks for charts, tables, sidebars, metrics, or stacked toolbars.
3. Do not collapse into a marketing hero with invented slogans.
4. Do not collapse into a beige commerce layout.
5. Do not collapse into a photo-led layout unless the user requests image-led output.
6. Do not collapse into a device mockup unless the user requests hardware.
7. Do not collapse into a colorful multi-accent system.
8. Do not collapse into glass panels, glow effects, chrome edges, bevels, or glossy objects.
9. Do not collapse into avatar clusters, portraits, names, initials, seals, or fake identity systems.
10. Do not collapse into many decorated modules. Keep one dominant mass and one or two quiet support zones.

Typography

1. Default to one neutral sans-serif family similar in behavior to Inter, SF Pro, Helvetica Neue, Arial, or a comparable geometric/grotesk sans.
2. Make sans-serif typography the default for app chrome, controls, navigation, cards, lists, labels, chips, menus, buttons, tabs, docks, and system text.
3. Do not switch fonts to create personality.
4. Use two or three weights only:

• Regular for secondary text and quiet labels.
• Medium for normal primary text.
• Semibold or bold for the main headline, selected navigation item, or key value.

1. Use three to five type roles maximum:

• Hero/display text.
• Primary card or row title.
• Secondary support text.
• Small label or eyebrow.
• Pill/chip/control text.

1. Make the main hero text at least 2× the visual size of support text. In hero-heavy screens, 3× is acceptable.
2. On mobile-scale layouts, use these approximate ranges:

• Small labels: 10–12 px.
• Secondary text: 12–14 px.
• Primary row/card text: 15–18 px.
• Section/card titles: 18–24 px.
• Hero text or oversized numerals: 40–96 px depending on available space.

1. Keep large type relaxed. Do not compress leading. Large multiline text must not become a cramped stack.
2. Keep short labels close to the value or object they describe.
3. Increase spacing between unrelated groups instead of loosening related label/value pairs.
4. Use uppercase tracked labels only as small section markers or eyebrows.
5. When supported, set uppercase label letter spacing to roughly 0.08–0.16em.
6. Do not make uppercase labels the dominant headline unless the user requests that treatment.
7. Use primary text in near-black on light surfaces.
8. Use secondary text in muted gray.
9. Do not use hue as the main text hierarchy.
10. Use off-white primary text on dark surfaces.
11. Reserve pure white for one small focal token, active glyph, or highest-contrast mark.
12. Avoid dense paragraphs.
13. Prefer short text clusters, single-line titles, compact two-line row structures, and large isolated phrases.
14. If a screen has one main value, phrase, or number, make that type the largest visual mass instead of adding decoration.
15. For lists, pair each row’s primary line with one smaller, grayer secondary line.
16. Make row-to-row spacing larger than the gap between a row’s primary and secondary line.
17. Align related text to a consistent left rail inside cards, panels, lists, and horizontal controls.
18. Center text only inside hero stacks, single-card poster-like compositions, or compact focal modules.
19. Do not center every list and control by default.
20. Do not use serif type for default app chrome, controls, navigation, card titles, avatars, initials, labels, menus, or brand-like names.
21. Allow serif type only as a bounded exception:

• Use it for one large reading block or one large typographic card.
• Use it only when the user requests it or when the composition is explicitly about a text passage.
• Keep all supporting UI in sans-serif.

1. Do not use decorative lettering, script faces, outlined text, warped text, gradient text, shadowed text, or ornamental wordmarks.

Color

1. Use this default palette:

• Base canvas: #FAFAF8, #F7F7F5, #F4F4F2, or #F1F2F0.
• Primary surfaces: #FFFFFF or #FCFCFA.
• Secondary pale panels: #F2F3F1, #EEEEEC, or #E9EAE7.
• Dividers/strokes: #E6E6E3 to #DCDCD8.
• Primary text: #0E0E0E to #1A1A1A.
• Secondary text: #737373 to #8A8A86.

1. Keep 80–95% of the visible interface in neutral tones.
2. Use one saturated accent hue maximum per composition.
3. Keep saturated accent area under roughly 2–5% of the visible UI area by default.
4. Use accent color as punctuation only:

• A dot.
• A thin ring.
• A small line or path.
• A selected chip foreground.
• A compact capsule.
• A short emphasized text fragment.
• A small active indicator.

1. Do not apply accent color simultaneously to headings, icons, borders, chips, buttons, background panels, and navigation.
2. If a second accent appears, make it tiny and clearly secondary:

• A micro-dot.
• A short stroke.
• A small endpoint mark.
• A minor line segment.

1. If two accent colors exist, separate them by module or vertical tier.
2. Do not let two accent colors compete inside the same control group.
3. For selected chips in neutral interfaces, use a pale tint fill from the accent family with darker accent text or icon.
4. Do not use saturated full-chip fills by default.
5. Show active navigation through near-black text weight plus one restrained marker:

• Rounded underline.
• Small ring.
• Quiet filled marker.

1. Keep inactive navigation gray and lighter.
2. Do not default to beige, tan, brown, sepia, camel, champagne, cream, mocha, or terracotta as the palette or accent family.
3. Do not use colorful gradients as the main UI system.
4. Use a low-saturation blurred gradient only as the outer canvas background, and only if foreground UI surfaces remain neutral and flat.
5. Allow a single full-screen saturated background only as a bounded exception:

• Make it flat and full-bleed.
• Use white or off-white foreground text.
• Do not add decorative overlays, patterns, images, or gradients.
• Keep one primary focal mass.

1. For dark layouts, use narrow tonal steps:

• Base: near-black.
• Main surface: charcoal.
• Active surface: slightly lighter charcoal.
• Text: off-white and gray.

1. In dark layouts, mark selection with a slightly lighter dark pill or panel.
2. Do not use saturated color for dark-mode selection unless the user explicitly requests a colored state.
3. In dark layouts, reserve the brightest white for one small glyph container, dot, token, or control.
4. Let small images, thumbnails, or circular media carry contained color.
5. Do not let media colors become the UI palette.
6. Do not use stock photos, scenic backgrounds, product setups, or full-bleed imagery as the main color source unless the user requests image-led output.

Surfaces, shadows, and borders