LG DataLab

The Data Science area's design system, packaged as a Claude skill. Install it once, and whenever you ask Claude to build any internal tool, the app comes out in the same style automatically. Every app we make looks like one product, with no extra design work.

How the skill works

Install it once

You import the skill into your Claude. One file, one click.

Ask Claude

"Build me an internal dashboard for X." You don't need to mention the style.

It comes out on-brand

Claude applies the LG DataLab style on its own: colors, fonts, components.

The skill carries the design system and the rules inside it. Claude consults it automatically when you build an internal UI — no copying files, nothing to remember.

Install the skill (2 minutes)

Download the skill

Download the skill file (lg-datalab-ui.skill).

⬇ Download lg-datalab-ui.skill

Open it in Claude → "Save skill"

Open (or drag) the .skill file into Claude. A "Save skill" button appears — click it and it's installed in your profile. Done.

Alternative: manual install

If you prefer, copy the lg-datalab-ui folder into your skills folder and restart Claude:

C:\Users\<your-user>\.claude\skills\lg-datalab-ui\

Use it

Once installed, just ask Claude for what you need. The skill triggers on its own — you don't even have to name it:

Build me an internal tool to monitor our data pipeline health, with KPIs, a status table and filters.

Your app will come out with the same look as every other tool in the area.

What your apps will look like

These are the components the skill uses. If you build by hand, each one's CSS class is on the right.

Buttons.btn-primary · .btn-blue · .btn-green · .btn-amber · .btn-ghost · .btn-sm

KPI cards.kpi-row › .kpi-card.blue/.green/.amber/.coral

Total

494

brands

Opportunity

markets

Neutral

markets

Alerts

active

Table.table-card · td.num · .cat-badge

Brand	Category	BDI	CDI	Status
Coca-Cola	CSD	113.4	100.9	Over-developed
Gatorade	Sports drinks	95.5	98.5	Opportunity
Purina	Pet food	97.8	97.8	Neutral

System colorsvar(--bg) · var(--blue) · var(--green)…

The skill never uses colors in code — only variables. That's why everything stays consistent.

--bg

--bg3

--blue

--green

--amber

--coral

Prefer to hand-code it? (no Claude)

If you don't use Claude, download the raw kit and link it yourself:

⬇ Download kit (files)

Paste this into your HTML <head>

This loads the fonts and the design system:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="design-system.css">

Golden rules

1. Never write colors in code. Always use the variables (var(--blue)). This keeps every app consistent.

2. Use the 3 fonts as intended. --display for titles, --sans for text, --mono for numbers.

3. Reuse the component classes instead of inventing new ones.