@litfamily/litopencode 1.0.30 → 1.0.32

package/skills/frontend-ui-ux/kit/styles/graphite.json

@@ -0,0 +1,200 @@
+{
+  "schema_id": "litopencode.frontend-style/v1",
+  "id": "graphite",
+  "name": "Graphite",
+  "summary": "A neutral, precise register: cool greys, white surfaces, a blue accent with a rose second accent for highlights and featured bands, crisp 6 to 8 px radii, soft two-layer elevation. Built for tools people work in all day and for products whose audience expects a quiet professional surface.",
+  "use_when": [
+    "default for work surfaces (workspace and settings families) when the brief gives no visual direction: dashboards, settings, forms, admin and data-dense screens",
+    "the brief asks for neutral, corporate, enterprise, clinical, financial or developer-tool tone",
+    "dense work surfaces where colour must be reserved for status"
+  ],
+  "avoid_when": [
+    "the brief asks for warmth, play or an editorial voice"
+  ],
+  "keywords": [
+    "graphite",
+    "그래파이트"
+  ],
+  "signature": [
+    "cool greys, white surfaces, a blue accent and a rose second accent",
+    "6 to 8 px radii and a soft two-layer elevation",
+    "colour on actions, status, featured bands and charts; dense table cells and form chrome stay neutral"
+  ],
+  "forbid": [
+    "offset or coloured shadows on controls, and glass",
+    "accent fills on table cells, list rows and form chrome",
+    "more than four accent hue families in one view"
+  ],
+  "fonts": {
+    "text": "Pretendard",
+    "display": "Pretendard",
+    "mono": "JetBrains Mono"
+  },
+  "type": {
+    "scale_px": {
+      "xs": 12,
+      "sm": 13,
+      "md": 14,
+      "base": 16,
+      "lg": 18,
+      "xl": 20,
+      "2xl": 24,
+      "3xl": 30,
+      "4xl": 38,
+      "5xl": 48
+    },
+    "display_px": {
+      "min": 36,
+      "max": 64
+    },
+    "moment_px": {
+      "max": 88
+    },
+    "weights": {
+      "text": 400,
+      "medium": 500,
+      "strong": 600,
+      "display": 680
+    },
+    "tracking_em": {
+      "display": -0.025,
+      "label": 0
+    },
+    "leading": {
+      "body": 1.6,
+      "tight": 1.3,
+      "display_latin": 1.05,
+      "display_korean": 1.18
+    }
+  },
+  "space_px": [
+    4,
+    8,
+    12,
+    16,
+    20,
+    24,
+    32,
+    40,
+    48,
+    64,
+    80,
+    96,
+    128
+  ],
+  "radius_px": {
+    "xs": 3,
+    "sm": 6,
+    "md": 8,
+    "lg": 12,
+    "pill": 999
+  },
+  "shadow": {
+    "raised": "0 1px 2px rgb(18 21 25 / 0.06), 0 1px 1px rgb(18 21 25 / 0.04)",
+    "overlay": "0 16px 40px -12px rgb(18 21 25 / 0.28), 0 2px 6px rgb(18 21 25 / 0.08)"
+  },
+  "motion": {
+    "fast_ms": 120,
+    "ui_ms": 180,
+    "enter_ms": 420,
+    "exit_ms": 160,
+    "ease": "cubic-bezier(0.22, 0.8, 0.24, 1)"
+  },
+  "shape": {
+    "border_px": {
+      "rule": 1,
+      "surface": 1,
+      "control": 1
+    },
+    "surface_line": "line",
+    "control_edge": "control",
+    "elevation": "soft",
+    "offset_px": {
+      "surface": 0,
+      "control": 0
+    },
+    "press": "scale",
+    "meta_font": "text",
+    "meta_case": "none",
+    "display_case": "none",
+    "canvas_pattern": "none",
+    "heading_font": "display",
+    "panel_head": "plain",
+    "section_marks": "none"
+  },
+  "color": {
+    "light": {
+      "canvas": "#f6f7f8",
+      "surface": "#ffffff",
+      "sunken": "#eef0f2",
+      "ink": "#121519",
+      "ink-2": "#444c55",
+      "ink-3": "#5d6670",
+      "line": "#e0e3e7",
+      "line-strong": "#c3c9d0",
+      "control": "#7f8892",
+      "accent": "#1f5fd1",
+      "accent-hover": "#194fb0",
+      "on-accent": "#ffffff",
+      "accent-wash": "#e7eefb",
+      "accent-ink": "#1a55bd",
+      "accent-2": "#c2366b",
+      "accent-2-ink": "#a82a5b",
+      "accent-2-wash": "#f8e1ea",
+      "on-accent-2": "#ffffff",
+      "support": "#d9e1ea",
+      "support-ink": "#2f3d4c",
+      "focus": "#1f5fd1",
+      "positive": "#1e7a4c",
+      "positive-wash": "#def1e6",
+      "warning": "#8f5b00",
+      "warning-wash": "#fbefd5",
+      "negative": "#c0262d",
+      "negative-wash": "#fbe3e3",
+      "info": "#356699",
+      "info-wash": "#e3edf7",
+      "chart-1": "#1f5fd1",
+      "chart-2": "#9db8ea",
+      "chart-3": "#444c55",
+      "chart-4": "#c3c9d0",
+      "chart-5": "#d07a2b"
+    },
+    "dark": {
+      "canvas": "#0e1114",
+      "surface": "#15191e",
+      "sunken": "#0a0d10",
+      "ink": "#e9ecef",
+      "ink-2": "#b4bcc5",
+      "ink-3": "#8d96a0",
+      "line": "#252b32",
+      "line-strong": "#39414a",
+      "control": "#5e6873",
+      "accent": "#6d9cf2",
+      "accent-hover": "#85adf5",
+      "on-accent": "#0b1220",
+      "accent-wash": "#18243a",
+      "accent-ink": "#8db2f6",
+      "accent-2": "#f07aa6",
+      "accent-2-ink": "#f592b6",
+      "accent-2-wash": "#3a1826",
+      "on-accent-2": "#2a0b17",
+      "support": "#2a3440",
+      "support-ink": "#c4d0dd",
+      "focus": "#85adf5",
+      "positive": "#5cc58f",
+      "positive-wash": "#12291d",
+      "warning": "#e3ad4f",
+      "warning-wash": "#2f240f",
+      "negative": "#f07b7f",
+      "negative-wash": "#331617",
+      "info": "#7fb0e0",
+      "info-wash": "#142233",
+      "chart-1": "#6d9cf2",
+      "chart-2": "#2f4f86",
+      "chart-3": "#b4bcc5",
+      "chart-4": "#39414a",
+      "chart-5": "#e3a25a"
+    }
+  },
+  "accent_art": "none"
+}

package/skills/frontend-ui-ux/kit/styles/meadow.json

@@ -0,0 +1,199 @@
+{
+  "schema_id": "litopencode.frontend-style/v1",
+  "id": "meadow",
+  "name": "Meadow",
+  "summary": "A warm, approachable register for consumer products: near-white canvas, deep teal accent, a coral second accent, sand as the tint, generous 12 to 18 px radii and soft elevation. Friendly without turning casual where money or health is at stake.",
+  "use_when": [
+    "opt-in only: the brief asks for friendly, warm, approachable, consumer, education, wellness, food or hospitality tone"
+  ],
+  "avoid_when": [
+    "dense all-day work surfaces",
+    "financial or clinical tasks where a casual register costs trust"
+  ],
+  "keywords": [
+    "meadow",
+    "메도우"
+  ],
+  "signature": [
+    "near-white canvas, deep teal accent, coral second accent, sand tint",
+    "12 to 18 px radii with soft elevation",
+    "rounded, generous spacing with tinted bands between sections"
+  ],
+  "forbid": [
+    "hard offset shadows and thick outlines",
+    "more than four accent hue families in one view",
+    "square, ruled compartments (that is computational-brutalism)"
+  ],
+  "fonts": {
+    "text": "Pretendard",
+    "display": "Pretendard",
+    "mono": "JetBrains Mono"
+  },
+  "type": {
+    "scale_px": {
+      "xs": 12,
+      "sm": 13,
+      "md": 14,
+      "base": 16,
+      "lg": 18,
+      "xl": 20,
+      "2xl": 24,
+      "3xl": 30,
+      "4xl": 38,
+      "5xl": 48
+    },
+    "display_px": {
+      "min": 38,
+      "max": 72
+    },
+    "moment_px": {
+      "max": 104
+    },
+    "weights": {
+      "text": 400,
+      "medium": 500,
+      "strong": 620,
+      "display": 700
+    },
+    "tracking_em": {
+      "display": -0.02,
+      "label": 0
+    },
+    "leading": {
+      "body": 1.6,
+      "tight": 1.3,
+      "display_latin": 1.05,
+      "display_korean": 1.18
+    }
+  },
+  "space_px": [
+    4,
+    8,
+    12,
+    16,
+    20,
+    24,
+    32,
+    40,
+    48,
+    64,
+    80,
+    96,
+    128
+  ],
+  "radius_px": {
+    "xs": 4,
+    "sm": 8,
+    "md": 12,
+    "lg": 18,
+    "pill": 999
+  },
+  "shadow": {
+    "raised": "0 1px 2px rgb(27 36 32 / 0.05), 0 4px 12px -4px rgb(27 36 32 / 0.08)",
+    "overlay": "0 18px 44px -12px rgb(27 36 32 / 0.26), 0 2px 6px rgb(27 36 32 / 0.06)"
+  },
+  "motion": {
+    "fast_ms": 120,
+    "ui_ms": 180,
+    "enter_ms": 420,
+    "exit_ms": 160,
+    "ease": "cubic-bezier(0.22, 0.8, 0.24, 1)"
+  },
+  "shape": {
+    "border_px": {
+      "rule": 1,
+      "surface": 1,
+      "control": 1
+    },
+    "surface_line": "line",
+    "control_edge": "control",
+    "elevation": "soft",
+    "offset_px": {
+      "surface": 0,
+      "control": 0
+    },
+    "press": "scale",
+    "meta_font": "text",
+    "meta_case": "none",
+    "display_case": "none",
+    "canvas_pattern": "none",
+    "heading_font": "display",
+    "panel_head": "plain",
+    "section_marks": "none"
+  },
+  "color": {
+    "light": {
+      "canvas": "#fbfbf8",
+      "surface": "#ffffff",
+      "sunken": "#f1f3ee",
+      "ink": "#1b2420",
+      "ink-2": "#46524c",
+      "ink-3": "#5c6a63",
+      "line": "#e2e6df",
+      "line-strong": "#c4cbc1",
+      "control": "#86918b",
+      "accent": "#0f6b6b",
+      "accent-hover": "#0b5858",
+      "on-accent": "#ffffff",
+      "accent-wash": "#ddefee",
+      "accent-ink": "#0d6262",
+      "accent-2": "#c4472f",
+      "accent-2-ink": "#a33a24",
+      "accent-2-wash": "#f8e1d9",
+      "on-accent-2": "#ffffff",
+      "support": "#f4dcc0",
+      "support-ink": "#7a4f1c",
+      "focus": "#0f6b6b",
+      "positive": "#28703a",
+      "positive-wash": "#e0f0e2",
+      "warning": "#8a5a00",
+      "warning-wash": "#f8ecd0",
+      "negative": "#b42f2a",
+      "negative-wash": "#f9e1df",
+      "info": "#2d6293",
+      "info-wash": "#e1ebf5",
+      "chart-1": "#0f6b6b",
+      "chart-2": "#e0a86a",
+      "chart-3": "#46524c",
+      "chart-4": "#9fd0cb",
+      "chart-5": "#b44f6a"
+    },
+    "dark": {
+      "canvas": "#101615",
+      "surface": "#161e1d",
+      "sunken": "#0b1110",
+      "ink": "#eaf0ed",
+      "ink-2": "#b6c2bc",
+      "ink-3": "#93a19a",
+      "line": "#24302d",
+      "line-strong": "#374541",
+      "control": "#63716c",
+      "accent": "#4fbfb4",
+      "accent-hover": "#6dd0c6",
+      "on-accent": "#062120",
+      "accent-wash": "#12302d",
+      "accent-ink": "#67cdc2",
+      "accent-2": "#ef8a6f",
+      "accent-2-ink": "#f29d85",
+      "accent-2-wash": "#3a2018",
+      "on-accent-2": "#2a0f08",
+      "support": "#6b5332",
+      "support-ink": "#f0cfa5",
+      "focus": "#6dd0c6",
+      "positive": "#6cc88a",
+      "positive-wash": "#142a1b",
+      "warning": "#e2b25a",
+      "warning-wash": "#2e2410",
+      "negative": "#f08780",
+      "negative-wash": "#351816",
+      "info": "#86b5e3",
+      "info-wash": "#142233",
+      "chart-1": "#4fbfb4",
+      "chart-2": "#e0a86a",
+      "chart-3": "#b6c2bc",
+      "chart-4": "#2c5a56",
+      "chart-5": "#e07f97"
+    }
+  },
+  "accent_art": "none"
+}

package/skills/frontend-ui-ux/kit/styles/neo-brutalism.json

@@ -0,0 +1,222 @@
+{
+  "schema_id": "litopencode.frontend-style/v1",
+  "id": "neo-brutalism",
+  "name": "Neo-brutalism",
+  "summary": "A loud, friendly register: flat saturated colour blocks on a lavender canvas, 3 px ink outlines on every surface, hard zero-blur offset shadows in ink, sunflower-yellow panel heads and accent with ink text, chunky 900-weight display type and buttons that press down into their shadow. Playful, legible, never soft.",
+  "use_when": [
+    "opt-in only: the brief names neo-brutalism, neo-brutalist, neubrutalism or the Korean 네오브루탈리즘",
+    "consumer, creator, community or education products that want energy and personality",
+    "launch pages, pricing pages and onboarding that should feel bold and hand-made rather than corporate"
+  ],
+  "avoid_when": [
+    "regulated, clinical, financial or enterprise tones",
+    "very dense data screens where outlines on every cell would turn into noise (keep tables quiet inside one outlined wrap)",
+    "the brief asks for brutalism without neo (that is computational-brutalism)"
+  ],
+  "keywords": [
+    "neo-brutalism",
+    "neo-brutalist",
+    "neobrutalism",
+    "neobrutalist",
+    "neo brutalism",
+    "neo brutalist",
+    "neubrutalism",
+    "neu-brutalism",
+    "neo-brutal",
+    "네오브루탈리즘",
+    "네오 브루탈리즘",
+    "네오브루탈",
+    "네오 브루탈",
+    "뉴브루탈리즘",
+    "네오브루탈리스트"
+  ],
+  "signature": [
+    "thick ink outlines: 3 px on surfaces, 2 px on controls, the same ink in light and dark",
+    "hard offset shadows with zero blur (6 px on surfaces, 3 px on controls) in ink; this is the recorded neo-brutalist register CF-403 accepts",
+    "buttons press into their shadow on :active (translate 3 px, shadow to 0)",
+    "flat saturated fills: panel heads are solid yellow bars with ink text; ui-panel--accent, ui-panel--accent-2 (electric blue) and ui-panel--support colour the featured blocks",
+    "chunky type: 900-weight display with tight leading, 800-weight headings and figures, sentence case",
+    "tilted ui-sticker labels as the accent art, never over body text",
+    "bouncy but short motion (overshoot ease, 100–280 ms)"
+  ],
+  "forbid": [
+    "blurred, soft or coloured drop shadows (DS-007: the lock declares offset elevation)",
+    "gradients, glass, glow and translucency",
+    "thin grey borders on surfaces (outlines are ink)",
+    "more than four accent hue families in one view",
+    "rotated body text, or a sticker covering text",
+    "outlines and shadows on every table cell or list row"
+  ],
+  "fonts": {
+    "text": "Pretendard",
+    "display": "Pretendard",
+    "mono": "JetBrains Mono"
+  },
+  "type": {
+    "scale_px": {
+      "xs": 12,
+      "sm": 13,
+      "md": 14,
+      "base": 16,
+      "lg": 18,
+      "xl": 20,
+      "2xl": 24,
+      "3xl": 30,
+      "4xl": 38,
+      "5xl": 48
+    },
+    "display_px": {
+      "min": 40,
+      "max": 88
+    },
+    "moment_px": {
+      "max": 152
+    },
+    "weights": {
+      "text": 400,
+      "medium": 600,
+      "strong": 800,
+      "display": 900
+    },
+    "tracking_em": {
+      "display": -0.03,
+      "label": 0
+    },
+    "leading": {
+      "body": 1.55,
+      "tight": 1.25,
+      "display_latin": 1,
+      "display_korean": 1.15
+    }
+  },
+  "space_px": [
+    4,
+    8,
+    12,
+    16,
+    20,
+    24,
+    32,
+    40,
+    48,
+    64,
+    80,
+    96,
+    128
+  ],
+  "radius_px": {
+    "xs": 4,
+    "sm": 8,
+    "md": 12,
+    "lg": 16,
+    "pill": 999
+  },
+  "shadow": {
+    "raised": "6px 6px 0 0 var(--c-ink)",
+    "overlay": "8px 8px 0 0 var(--c-ink)"
+  },
+  "motion": {
+    "fast_ms": 100,
+    "ui_ms": 160,
+    "enter_ms": 280,
+    "exit_ms": 120,
+    "ease": "cubic-bezier(0.3, 1.4, 0.5, 1)"
+  },
+  "shape": {
+    "border_px": {
+      "rule": 3,
+      "surface": 3,
+      "control": 2
+    },
+    "surface_line": "ink",
+    "control_edge": "ink",
+    "elevation": "offset",
+    "offset_px": {
+      "surface": 6,
+      "control": 3
+    },
+    "press": "shift",
+    "meta_font": "text",
+    "meta_case": "none",
+    "display_case": "none",
+    "canvas_pattern": "none",
+    "heading_font": "display",
+    "panel_head": "accent",
+    "section_marks": "none"
+  },
+  "color": {
+    "light": {
+      "canvas": "#efecff",
+      "surface": "#ffffff",
+      "sunken": "#e2ddff",
+      "ink": "#111111",
+      "ink-2": "#2b2b33",
+      "ink-3": "#4a4a57",
+      "line": "#c9c3ec",
+      "line-strong": "#111111",
+      "control": "#5c5a70",
+      "accent": "#ffd23f",
+      "accent-hover": "#ffc400",
+      "on-accent": "#111111",
+      "accent-wash": "#fff1b8",
+      "accent-ink": "#5a32d6",
+      "accent-2": "#1f6feb",
+      "accent-2-ink": "#1a56b8",
+      "accent-2-wash": "#dce8fd",
+      "on-accent-2": "#ffffff",
+      "support": "#ffb3d1",
+      "support-ink": "#111111",
+      "focus": "#5a32d6",
+      "positive": "#12733a",
+      "positive-wash": "#c9f2d6",
+      "warning": "#7a4f00",
+      "warning-wash": "#ffe7a8",
+      "negative": "#c2121c",
+      "negative-wash": "#ffd3d3",
+      "info": "#1d4fd6",
+      "info-wash": "#d6e2ff",
+      "chart-1": "#5a32d6",
+      "chart-2": "#ffd23f",
+      "chart-3": "#ff6b9d",
+      "chart-4": "#111111",
+      "chart-5": "#2bb673"
+    },
+    "dark": {
+      "canvas": "#17161f",
+      "surface": "#211f2b",
+      "sunken": "#100f16",
+      "ink": "#f7f5ff",
+      "ink-2": "#d2cfe3",
+      "ink-3": "#a9a5c0",
+      "line": "#3a3750",
+      "line-strong": "#f7f5ff",
+      "control": "#8a86a6",
+      "accent": "#ffd23f",
+      "accent-hover": "#ffdf6b",
+      "on-accent": "#111111",
+      "accent-wash": "#3a3110",
+      "accent-ink": "#b9a3ff",
+      "accent-2": "#5b9bff",
+      "accent-2-ink": "#82b3ff",
+      "accent-2-wash": "#132544",
+      "on-accent-2": "#07142a",
+      "support": "#5c2a44",
+      "support-ink": "#ffd6e7",
+      "focus": "#ffd23f",
+      "positive": "#5fe08f",
+      "positive-wash": "#11301d",
+      "warning": "#ffcf5a",
+      "warning-wash": "#33270a",
+      "negative": "#ff8080",
+      "negative-wash": "#3a1414",
+      "info": "#8fb0ff",
+      "info-wash": "#15213d",
+      "chart-1": "#b9a3ff",
+      "chart-2": "#ffd23f",
+      "chart-3": "#ff8fbd",
+      "chart-4": "#f7f5ff",
+      "chart-5": "#5fe08f"
+    }
+  },
+  "accent_art": "sticker"
+}