Skip to content
cccskills
FreePublished on GitHub

designlang-tokens

Style UI for posthog.com using extracted design tokens, named values for colors, corner radius, and fonts. Reuse the supplied settings and identify missing values when the available tokens do not cover a styling need.

OriginalShow the original description

Use when styling UI for posthog.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.

See how to install

Good for

  • Style UI with the extracted posthog.com colors
  • Apply the supplied corner radius and body font
  • Identify missing settings while reusing existing tokens

Files included (1)

  • SKILL.md857 B

SKILL.md (original)

Review the instructions the agent will receive before you install.

designlang tokens

Source: https://posthog.com Extracted by designlang v7.0.0 on 2026-06-25T08:30:19.935Z

Semantic tokens (use these)

  • color.action.primary: #e1d7c2
  • color.surface.default: #e5e7e0
  • color.text.body: #000000
  • radius.control: 2px
  • typography.body.fontFamily: IBM Plex Sans Variable

Regions

  • sidebar
  • nav
  • sidebar
  • pricing
  • pricing
  • footer
  • nav

How to use

  • Prefer semantic.* tokens over primitive.*.
  • Never invent new tokens or hex values; reuse the ones above.
  • When a value is missing, pick the closest existing semantic token and flag the gap.
  • Reference tokens by their dotted path (e.g. semantic.color.action.primary).

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Style UI for supabase.com using extracted design tokens, named values for colors, corner radius, and body font. Reuse the supplied values and identify missing specifications instead of inventing new ones.

  • Style UI using supabase.com colors
  • Apply defined corner radius and body font
  • Identify gaps in available design values
Manavarya09/design-extract4.3KUpdated Oct 22, 2026

Style UI for mintlify.com using extracted design tokens, named values for colors, corner shapes, and fonts. Apply the supplied palette and inter font, reuse existing values, and identify gaps when a needed setting is missing.

  • Style UI using the mintlify.com palette
  • Apply the defined font and corner radius
  • Identify missing design values
Manavarya09/design-extract4.3KUpdated Oct 22, 2026

Style UI for cal.com with extracted design tokens, named settings for colors, corner radius, and typography. Apply the supplied values consistently and flag gaps where a required styling value is not included.

  • Style UI using the extracted cal.com values
  • Check colors, corner radius, and font against defined tokens
  • Identify missing values in the token set
Manavarya09/design-extract4.3KUpdated Oct 22, 2026

Style interfaces using values extracted from loom.com, including colors, corner radius, and the body font. Reuse named design tokens, which are shared visual settings, and flag missing values when choosing an existing substitute.

  • Style a UI using visual settings from loom.com
  • Check colors, corner radius, and the body font
  • Identify missing settings and choose existing substitutes
Manavarya09/design-extract4.3KUpdated Oct 22, 2026

Style UI for railway.app with extracted design tokens, named values for visual settings. Use the supplied purple action color, dark background, white text, 4px corner radius, and Inter font while identifying gaps in the definitions.

  • Style UI using the extracted railway.app values
  • Check colors, corner radius, and font against defined tokens
  • Identify missing values in the token set
Manavarya09/design-extract4.3KUpdated Oct 22, 2026

Style UI for netflix.com using extracted design tokens, named values for colors, corner radius, and typography. Reuse the supplied settings and identify missing values when the available tokens do not cover a styling decision.

  • Style UI using the extracted netflix.com values
  • Check colors, corner radius, and font against defined tokens
  • Identify missing values in the token set
Manavarya09/design-extract4.3KUpdated Oct 22, 2026

See all skills by Manavarya09

Report a problem with this skill