Maniacs_Mansion/NestQuest-UI-Design
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed pages

Browse Source
This commit is contained in:
Joshua King
2026-09-25 10:23:21 -04:00
parent 77c9e77eb9
commit 9ed33142a6
50 changed files with 7492 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/_adherence.oxlintrc.json
+503
View File
@@ -0,0 +1,503 @@
{
"plugins": [
"react",
"import"
],
"rules": {
"react/forbid-elements": [
"warn",
{
"forbid": []
}
],
"no-restricted-imports": [
"warn",
{
"patterns": [
{
"group": [
"components/core/**",
"components/product/**",
"ui_kits/storefront/**"
],
"message": "Import design-system components from 'index.js', not component internals."
}
]
}
],
"no-restricted-syntax": [
"warn",
{
"selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
"message": "Raw hex color — use a design-system color token via var()."
},
{
"selector": "Literal[value=/\\b\\d+px\\b/]",
"message": "Raw px value — use a design-system spacing token via var()."
},
{
"selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:Nunito|Nunito Fallback))/i]",
"message": "Font not provided by the design system. Available: Nunito, Nunito Fallback."
},
{
"selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|size|dot|key|ref|className|style|children)$/]",
"message": "<Badge> doesn't accept that prop. Declared props: children, variant, size, dot."
},
{
"selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:brand|blue|purple|neutral|success|warning|error|dark|outline)$/]",
"message": "<Badge> variant must be one of 'brand' | 'blue' | 'purple' | 'neutral' | 'success' | 'warning' | 'error' | 'dark' | 'outline'."
},
{
"selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
"message": "<Badge> size must be one of 'sm' | 'md' | 'lg'."
},
{
"selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:variant|size|disabled|fullWidth|icon|iconPosition|onClick|type|href|children|key|ref|className|style|children)$/]",
"message": "<Button> doesn't accept that prop. Declared props: variant, size, disabled, fullWidth, icon, iconPosition, onClick, type, href, children."
},
{
"selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:gradient|primary|secondary|outline|ghost|danger)$/]",
"message": "<Button> variant must be one of 'gradient' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'."
},
{
"selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg|xl)$/]",
"message": "<Button> size must be one of 'sm' | 'md' | 'lg' | 'xl'."
},
{
"selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='iconPosition'] > Literal[value!=/^(?:left|right)$/]",
"message": "<Button> iconPosition must be one of 'left' | 'right'."
},
{
"selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:button|submit|reset)$/]",
"message": "<Button> type must be one of 'button' | 'submit' | 'reset'."
},
{
"selector": "JSXOpeningElement[name.name='CategoryCard'] > JSXAttribute > JSXIdentifier[name!=/^(?:image|title|description|ctaLabel|href|align|badge|key|ref|className|style|children)$/]",
"message": "<CategoryCard> doesn't accept that prop. Declared props: image, title, description, ctaLabel, href, align, badge."
},
{
"selector": "JSXOpeningElement[name.name='CategoryCard'] > JSXAttribute[name.name='align'] > Literal[value!=/^(?:left|right)$/]",
"message": "<CategoryCard> align must be one of 'left' | 'right'."
},
{
"selector": "JSXOpeningElement[name.name='ProductCard'] > JSXAttribute > JSXIdentifier[name!=/^(?:image|name|price|originalPrice|badge|category|onAddToCart|onWishlist|wishlisted|href|key|ref|className|style|children)$/]",
"message": "<ProductCard> doesn't accept that prop. Declared props: image, name, price, originalPrice, badge, category, onAddToCart, onWishlist, wishlisted, href."
},
{
"selector": "JSXOpeningElement[name.name='Tag'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|active|onClick|onRemove|color|key|ref|className|style|children)$/]",
"message": "<Tag> doesn't accept that prop. Declared props: children, active, onClick, onRemove, color."
},
{
"selector": "JSXOpeningElement[name.name='Tag'] > JSXAttribute[name.name='color'] > Literal[value!=/^(?:default|blue|purple|green|orange)$/]",
"message": "<Tag> color must be one of 'default' | 'blue' | 'purple' | 'green' | 'orange'."
}
]
},
"overrides": [
{
"files": [
"**/index.js"
],
"rules": {
"no-restricted-imports": "off"
}
}
],
"x-omelette": {
"components": {
"Badge": {
"replaces": []
},
"Button": {
"replaces": []
},
"CategoryCard": {
"replaces": []
},
"ProductCard": {
"replaces": []
},
"Tag": {
"replaces": []
}
},
"tokens": [
"--border-brand",
"--border-default",
"--border-strong",
"--border-subtle",
"--brand-blue",
"--brand-gradient",
"--brand-gradient-h",
"--brand-purple",
"--color-accent-100",
"--color-accent-200",
"--color-accent-300",
"--color-accent-400",
"--color-accent-50",
"--color-accent-500",
"--color-accent-600",
"--color-accent-700",
"--color-accent-800",
"--color-accent-900",
"--color-error",
"--color-error-bg",
"--color-info",
"--color-info-bg",
"--color-neutral-0",
"--color-neutral-100",
"--color-neutral-1000",
"--color-neutral-150",
"--color-neutral-200",
"--color-neutral-300",
"--color-neutral-400",
"--color-neutral-50",
"--color-neutral-500",
"--color-neutral-600",
"--color-neutral-700",
"--color-neutral-800",
"--color-neutral-900",
"--color-primary-100",
"--color-primary-200",
"--color-primary-300",
"--color-primary-400",
"--color-primary-50",
"--color-primary-500",
"--color-primary-600",
"--color-primary-700",
"--color-primary-800",
"--color-primary-900",
"--color-success",
"--color-success-bg",
"--color-warning",
"--color-warning-bg",
"--container-2xl",
"--container-lg",
"--container-md",
"--container-sm",
"--container-xl",
"--duration-base",
"--duration-fast",
"--duration-slow",
"--ease-in",
"--ease-in-out",
"--ease-out",
"--ease-spring",
"--font-mono",
"--font-primary",
"--fw-black",
"--fw-bold",
"--fw-extrabold",
"--fw-light",
"--fw-medium",
"--fw-regular",
"--fw-semibold",
"--header-height",
"--lh-loose",
"--lh-normal",
"--lh-relaxed",
"--lh-snug",
"--lh-tight",
"--ls-normal",
"--ls-snug",
"--ls-tight",
"--ls-wide",
"--ls-wider",
"--ls-widest",
"--nav-height",
"--radius-2xl",
"--radius-3xl",
"--radius-brand",
"--radius-full",
"--radius-lg",
"--radius-md",
"--radius-none",
"--radius-sm",
"--radius-xl",
"--radius-xs",
"--shadow-accent",
"--shadow-brand",
"--shadow-lg",
"--shadow-md",
"--shadow-sm",
"--shadow-xl",
"--shadow-xs",
"--space-0",
"--space-0-5",
"--space-1",
"--space-1-5",
"--space-10",
"--space-12",
"--space-14",
"--space-16",
"--space-2",
"--space-20",
"--space-24",
"--space-28",
"--space-3",
"--space-32",
"--space-4",
"--space-40",
"--space-48",
"--space-5",
"--space-6",
"--space-7",
"--space-8",
"--space-px",
"--surface-card",
"--surface-overlay",
"--surface-page",
"--surface-raised",
"--surface-subtle",
"--text-2xl",
"--text-3xl",
"--text-4xl",
"--text-5xl",
"--text-6xl",
"--text-accent",
"--text-base",
"--text-brand",
"--text-inverse",
"--text-lg",
"--text-md",
"--text-muted",
"--text-primary",
"--text-secondary",
"--text-sm",
"--text-xl",
"--text-xs",
"--transition-base",
"--transition-spring",
"--type-body-family",
"--type-body-lg-lh",
"--type-body-lg-size",
"--type-body-lh",
"--type-body-size",
"--type-body-weight",
"--type-btn-ls",
"--type-btn-size",
"--type-btn-weight",
"--type-caption-ls",
"--type-caption-size",
"--type-caption-weight",
"--type-display-family",
"--type-display-lh",
"--type-display-ls",
"--type-display-size",
"--type-display-weight",
"--type-h1-family",
"--type-h1-lh",
"--type-h1-ls",
"--type-h1-size",
"--type-h1-weight",
"--type-h2-lh",
"--type-h2-size",
"--type-h2-weight",
"--type-h3-lh",
"--type-h3-size",
"--type-h3-weight",
"--type-h4-lh",
"--type-h4-size",
"--type-h4-weight",
"--z-base",
"--z-dropdown",
"--z-modal",
"--z-overlay",
"--z-raised",
"--z-sticky",
"--z-toast",
"--z-tooltip"
],
"tokenKinds": {
"--brand-blue": "color",
"--brand-purple": "color",
"--brand-gradient": "color",
"--brand-gradient-h": "color",
"--color-primary-50": "color",
"--color-primary-100": "color",
"--color-primary-200": "color",
"--color-primary-300": "color",
"--color-primary-400": "color",
"--color-primary-500": "color",
"--color-primary-600": "color",
"--color-primary-700": "color",
"--color-primary-800": "color",
"--color-primary-900": "color",
"--color-accent-50": "color",
"--color-accent-100": "color",
"--color-accent-200": "color",
"--color-accent-300": "color",
"--color-accent-400": "color",
"--color-accent-500": "color",
"--color-accent-600": "color",
"--color-accent-700": "color",
"--color-accent-800": "color",
"--color-accent-900": "color",
"--color-neutral-0": "color",
"--color-neutral-50": "color",
"--color-neutral-100": "color",
"--color-neutral-150": "color",
"--color-neutral-200": "color",
"--color-neutral-300": "color",
"--color-neutral-400": "color",
"--color-neutral-500": "color",
"--color-neutral-600": "color",
"--color-neutral-700": "color",
"--color-neutral-800": "color",
"--color-neutral-900": "color",
"--color-neutral-1000": "color",
"--color-success": "color",
"--color-success-bg": "color",
"--color-warning": "color",
"--color-warning-bg": "color",
"--color-error": "color",
"--color-error-bg": "color",
"--color-info": "color",
"--color-info-bg": "color",
"--text-primary": "font",
"--text-secondary": "font",
"--text-muted": "font",
"--text-inverse": "font",
"--text-brand": "font",
"--text-accent": "font",
"--surface-page": "color",
"--surface-subtle": "color",
"--surface-card": "color",
"--surface-raised": "color",
"--surface-overlay": "color",
"--border-subtle": "color",
"--border-default": "color",
"--border-strong": "color",
"--border-brand": "color",
"--font-primary": "font",
"--font-mono": "font",
"--fw-light": "other",
"--fw-regular": "other",
"--fw-medium": "other",
"--fw-semibold": "other",
"--fw-bold": "other",
"--fw-extrabold": "other",
"--fw-black": "other",
"--text-xs": "font",
"--text-sm": "font",
"--text-base": "font",
"--text-md": "font",
"--text-lg": "font",
"--text-xl": "font",
"--text-2xl": "font",
"--text-3xl": "font",
"--text-4xl": "font",
"--text-5xl": "font",
"--text-6xl": "font",
"--lh-tight": "other",
"--lh-snug": "other",
"--lh-normal": "other",
"--lh-relaxed": "other",
"--lh-loose": "other",
"--ls-tight": "other",
"--ls-snug": "other",
"--ls-normal": "other",
"--ls-wide": "other",
"--ls-wider": "other",
"--ls-widest": "other",
"--type-display-family": "font",
"--type-display-weight": "font",
"--type-display-size": "font",
"--type-display-lh": "font",
"--type-display-ls": "font",
"--type-h1-family": "font",
"--type-h1-weight": "font",
"--type-h1-size": "font",
"--type-h1-lh": "font",
"--type-h1-ls": "font",
"--type-h2-weight": "font",
"--type-h2-size": "font",
"--type-h2-lh": "font",
"--type-h3-weight": "font",
"--type-h3-size": "font",
"--type-h3-lh": "font",
"--type-h4-weight": "font",
"--type-h4-size": "font",
"--type-h4-lh": "font",
"--type-body-family": "font",
"--type-body-weight": "font",
"--type-body-size": "font",
"--type-body-lh": "font",
"--type-body-lg-size": "font",
"--type-body-lg-lh": "font",
"--type-caption-weight": "font",
"--type-caption-size": "font",
"--type-caption-ls": "font",
"--type-btn-weight": "font",
"--type-btn-size": "font",
"--type-btn-ls": "font",
"--space-0": "spacing",
"--space-px": "spacing",
"--space-0-5": "spacing",
"--space-1": "spacing",
"--space-1-5": "spacing",
"--space-2": "spacing",
"--space-3": "spacing",
"--space-4": "spacing",
"--space-5": "spacing",
"--space-6": "spacing",
"--space-7": "spacing",
"--space-8": "spacing",
"--space-10": "spacing",
"--space-12": "spacing",
"--space-14": "spacing",
"--space-16": "spacing",
"--space-20": "spacing",
"--space-24": "spacing",
"--space-28": "spacing",
"--space-32": "spacing",
"--space-40": "spacing",
"--space-48": "spacing",
"--radius-none": "radius",
"--radius-xs": "radius",
"--radius-sm": "radius",
"--radius-md": "radius",
"--radius-lg": "radius",
"--radius-xl": "radius",
"--radius-2xl": "radius",
"--radius-3xl": "radius",
"--radius-full": "radius",
"--radius-brand": "radius",
"--shadow-xs": "shadow",
"--shadow-sm": "shadow",
"--shadow-md": "shadow",
"--shadow-lg": "shadow",
"--shadow-xl": "shadow",
"--shadow-brand": "shadow",
"--shadow-accent": "shadow",
"--container-sm": "spacing",
"--container-md": "spacing",
"--container-lg": "spacing",
"--container-xl": "spacing",
"--container-2xl": "spacing",
"--header-height": "spacing",
"--nav-height": "spacing",
"--ease-out": "other",
"--ease-in": "other",
"--ease-in-out": "other",
"--ease-spring": "other",
"--duration-fast": "other",
"--duration-base": "other",
"--duration-slow": "other",
"--transition-base": "other",
"--transition-spring": "other",
"--z-base": "other",
"--z-raised": "other",
"--z-dropdown": "other",
"--z-sticky": "other",
"--z-overlay": "other",
"--z-modal": "other",
"--z-toast": "other",
"--z-tooltip": "other"
},
"fontFamilies": [
"Nunito",
"Nunito Fallback"
]
}
}
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/_ds_bundle.js
+1591
View File
File diff suppressed because it is too large Load Diff
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/_ds_manifest.json
+1
View File
File diff suppressed because one or more lines are too long
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-Bold.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-ExtraBold.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-Italic-Variable.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-Light.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-Regular.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-SemiBold.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-Variable.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/readme.md
+217
View File
@@ -0,0 +1,217 @@
# CubeCraft Creations Design System
> **Made with creativity. Crafted with heart.**
CubeCraft Creations is a small-batch, handcrafted goods shop offering three distinct product categories: **crocheted plush items**, **branded apparel**, and **3D-printed collectibles** (most notably their "Pet Rocks" character line). The brand sits at the intersection of maker culture, playful design, and community warmth — it's a creator-run shop where every item carries a personal touch.
---
## Sources
The following resources were provided to build this design system. Readers with access are encouraged to explore them for deeper fidelity:
- **GitHub repo** — `talon2king/cubecraft_shopify_theme` (https://github.com/talon2king/cubecraft_shopify_theme) — Shopify theme source. Access was unavailable at time of authoring; CSS variables, Liquid templates, and component markup would significantly deepen token fidelity if explored.
- **Uploaded brand assets** — Logos (PNG, SVG), product photography, Nunito/Nunito Sans font family zip.
---
## Products & Categories
| Category | Description |
|---|---|
| **Crocheted Items** | Handmade yarn crafts — hats, plushes, seasonal ornaments. Warm, tactile, artisan feel. |
| **Apparel** | Branded t-shirts and tops featuring the CubeCraft logo gradient. |
| **3D Prints** | Custom-printed collectibles, most notably the "Pet Rocks" line — expressive stone-character figurines printed on a Bambu Lab printer. |
---
## CONTENT FUNDAMENTALS
### Voice & Tone
CubeCraft Creations writes like a **friendly maker talking to their community** — not a corporate brand, not a detached marketplace. Copy is warm, enthusiastic, and personal.
**Core traits:**
- **First-person plural ("we")** for the brand; **second-person ("you")** for customers. "We made this for you."
- **Sentence case** for headlines and UI labels — not Title Case or ALL CAPS. Feels approachable, not stiff.
- **Short sentences.** Punchy. Enthusiastic. Never verbose.
- **Exclamation points are OK** — sparingly, where genuine excitement lives. "Shop the new Pet Rocks drop!"
- **No jargon.** Never "utilize," "leverage," or "synergy." Real words. Maker words.
- **Playful but not silly.** The brand can be lighthearted ("your next favorite rock-solid friend") without going cringe.
- **Emoji are used sparingly** and only in informal contexts (social captions, thank-you notes). Never in product names or navigation.
**Tagline:** *Made with creativity. Crafted with heart.*
**Example product copy style:**
> "These little Pet Rocks have big personalities — printed fresh on our Bambu Lab, hand-finished, and ready to cause trouble on your shelf."
**Example CTA style:**
> "Shop Pet Rocks" — not "Explore Our 3D-Printed Collectible Collection"
### Casing
- Headlines: Sentence case
- Nav items: Title Case (e.g. "Shop All", "3D Prints")
- Buttons: Title Case
- Body: Standard sentence case
- Tags/badges: Lowercase
---
## VISUAL FOUNDATIONS
### Color
The brand is defined by a **blue-to-purple gradient** that runs through every logo mark and primary UI element. This is not a flat brand — color lives as movement.
- **Brand Blue** `#3B3AB8` — deep cobalt/indigo. Anchors primary actions and headings.
- **Brand Purple** `#A035CC` — vibrant magenta-purple. Gradient terminus; accent for hover, highlights.
- **Gradient** — `135deg, #3B3AB8 → #A035CC`. Used on logo, primary buttons, hero text.
- **Neutrals** — clean white backgrounds with very light lavender-gray surfaces (`#F4F4F6`). The palette leans light and airy to let product photography breathe.
- **Text** — near-black `#18181D` for primary; medium gray `#52525E` for secondary.
The brand does **not** use warm tones (no orange, red, or yellow in UI). Product photography may contain warm wood/workshop tones — these are environmental, not brand palette.
### Typography
**Nunito** is the sole typeface — a rounded, humanist sans-serif with soft terminals that perfectly matches the brand's handmade, friendly personality. It is used at all weights from Light (300) for fine print to ExtraBold (800) for display headlines. The roundness of Nunito echoes the rounded-square logo frame.
- **Display / Hero:** Nunito ExtraBold (800), tight tracking (`-0.03em`)
- **Headings:** Nunito Bold–ExtraBold (700–800)
- **Body:** Nunito Regular (400), relaxed line-height (1.65)
- **Labels/Captions:** Nunito SemiBold (600), wide tracking (`0.05em`), uppercase
No serif, no condensed, no display-only face. Nunito does everything.
### Spacing
4px base unit. Generous white space is a brand value — layouts never feel cramped. Section padding is typically 64–96px vertical. Cards have 20–24px internal padding.
### Backgrounds & Surfaces
- **Page background:** Pure white (`#FFFFFF`)
- **Subtle surfaces / alternating sections:** Very light lavender-gray (`#F4F4F6`)
- **Cards:** White with a light border (`#E4E4EA`) or subtle shadow
- **Hero sections:** May use a gradient overlay on product photography, or a solid white layout with a large gradient typographic element
- **No full-bleed patterned backgrounds.** No textures in UI (textures appear in product photography only).
### Imagery Style
- Photography has a **warm workshop / maker aesthetic** — wood grain tables, filament spools, yarn balls, scissors, hand tools visible in frame
- Lighting is natural and slightly warm, but white-balanced; images are crisp and well-lit
- Product shots blend seamlessly into warm neutral backgrounds — no stark studio white
- 3D Print hero images feature the Pet Rocks characters in playful, narrative arrangements (e.g. one being "printed" by the machine)
- No grain, no film effects, no desaturation — bright, clear, saturated imagery
### Gradient Usage
The brand gradient (`#3B3AB8 → #A035CC`, 135°) appears on:
1. The logo icon stroke and rounded-square frame
2. Primary CTA buttons (gradient fill)
3. Display/hero headlines (gradient text fill via `background-clip: text`)
4. Active state indicators, pill badges
### Borders & Cards
- Border radius: `8px` (cards/inputs), `12px` (feature cards), `20px` (logo-matching large panels), `9999px` (pills/chips)
- Cards: `1px solid #E4E4EA`, `border-radius: 12px`, `box-shadow: 0 4px 12px rgba(0,0,0,0.08)`
- No heavy outer shadows. Shadows are subtle, short-range diffusion (not long dramatic drops).
### Hover & Interaction States
- **Buttons:** Slight brightness increase + scale(1.02) on hover; scale(0.98) on press
- **Cards:** Subtle `translateY(-2px)` lift + shadow increase on hover
- **Links:** Color transition to `--brand-purple`; no underline on hover (underline on focus only)
- **Icons:** Opacity 0.7 default → 1.0 on hover
### Animation & Motion
- Easing: `cubic-bezier(0.0, 0.0, 0.2, 1.0)` (ease-out) for entrances; spring easing for interactive feedback
- Duration: 120ms for micro-interactions; 200ms for most transitions; 350ms for modals/drawers
- No infinite loops on content. Subtle entrance animations (fade-up) on page load sections.
### Corner Radii Summary
| Use | Value |
|---|---|
| Small inputs, chips | 6px |
| Buttons, cards | 8–12px |
| Feature panels | 20px |
| Logo/brand frame | 20px |
| Pills/tags | 9999px |
### Iconography
- See ICONOGRAPHY section below
---
## ICONOGRAPHY
CubeCraft Creations uses **Lucide Icons** (stroke-based, 2px stroke weight, 24px base size) for all UI iconography. Lucide is the recommended Shopify-ecosystem icon set and matches the brand's clean, rounded aesthetic perfectly.
**CDN:** `https://unpkg.com/lucide@latest/dist/umd/lucide.js`
**Usage pattern:**
```html
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<i data-lucide="shopping-cart"></i>
<script>lucide.createIcons();</script>
```
**Common icons in use:**
- Navigation: `menu`, `x`, `search`, `shopping-cart`, `user`, `heart`
- Actions: `plus`, `minus`, `trash-2`, `edit-3`, `share-2`, `download`
- Feedback: `check-circle`, `alert-circle`, `info`, `star`
- Products: `package`, `tag`, `layers`, `scissors`
- Social: `instagram`, `facebook`, `twitter`
**Icon sizing:**
- UI icons (inline with text): 16px
- Navigation icons: 20px
- Feature icons / section icons: 24px–32px
- Never scaled via CSS filter; always sized via `width`/`height` attrs
**No emoji as icons.** No hand-drawn SVGs for UI chrome. Logo marks are PNG/SVG files in `assets/logos/`.
**Brand logos available in `assets/logos/`:**
- `CubeCraftCreations_Logo_Official_No_BG.png` — full stacked logo, transparent BG
- `Header_Logo.png` — horizontal lockup for header/nav
- `SEO_Logo.png` — square social/SEO variant
- `Full_Logo_SVG.svg` — vector master
---
## FILE INDEX
```
/
├── styles.css ← Root stylesheet (import this)
├── readme.md ← This file
├── SKILL.md ← Claude Code skill definition
│
├── tokens/
│ ├── colors.css ← Color custom properties
│ ├── typography.css ← Type scale + role aliases
│ ├── spacing.css ← Spacing, radius, shadow, motion
│ └── fonts.css ← @font-face declarations
│
├── assets/
│ ├── logos/ ← Brand marks (PNG + SVG)
│ ├── images/ ← Product photography
│ └── fonts/ ← Nunito TTF files
│
├── components/
│ ├── core/ ← Button, Badge, Tag, Pill
│ └── product/ ← ProductCard, CategoryCard
│
├── guidelines/
│ ├── colors/ ← Color specimen cards
│ ├── typography/ ← Type specimen cards
│ ├── spacing/ ← Spacing specimen cards
│ └── brand/ ← Logo + gradient specimen cards
│
└── ui_kits/
└── storefront/ ← CubeCraft e-commerce UI kit
```
### Components
| Component | Location | Description |
|---|---|---|
| `Button` | `components/core/` | Primary, secondary, ghost, gradient variants |
| `Badge` | `components/core/` | Status and category labels |
| `Tag` | `components/core/` | Pill-shaped content tags |
| `ProductCard` | `components/product/` | Shop product grid card |
| `CategoryCard` | `components/product/` | Homepage category feature card |
### UI Kits
| Kit | Location | Screens |
|---|---|---|
| Storefront | `ui_kits/storefront/` | Homepage, Product listing, Product detail, Cart |
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/styles.css
+9
View File
@@ -0,0 +1,9 @@
/* ============================================================
CubeCraft Creations Design System — Root Stylesheet
Import this single file to get all tokens + fonts.
============================================================ */
@import './tokens/fonts.css';
@import './tokens/colors.css';
@import './tokens/typography.css';
@import './tokens/spacing.css';
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/colors.css
+80
View File
@@ -0,0 +1,80 @@
/* ============================================================
CubeCraft Creations — Color Tokens
Brand gradient: cobalt blue #3B3AB8 → magenta purple #A035CC
============================================================ */
:root {
/* ── Brand Gradient ──────────────────────────────────────── */
--brand-blue: #3B3AB8; /* gradient start / logo blue */
--brand-purple: #A035CC; /* gradient end / logo purple */
--brand-gradient: linear-gradient(135deg, #3B3AB8 0%, #A035CC 100%); /* @kind color */
--brand-gradient-h: linear-gradient(90deg, #3B3AB8 0%, #A035CC 100%); /* @kind color */
/* ── Primary ─────────────────────────────────────────────── */
--color-primary-50: #EBEBF8;
--color-primary-100: #CDCDF0;
--color-primary-200: #9F9EE0;
--color-primary-300: #7170D0;
--color-primary-400: #5554CC;
--color-primary-500: #3B3AB8; /* base */
--color-primary-600: #2D2C9A;
--color-primary-700: #201F7A;
--color-primary-800: #141358;
--color-primary-900: #0A0938;
/* ── Accent (Purple) ─────────────────────────────────────── */
--color-accent-50: #F6EAFD;
--color-accent-100: #E8CBFA;
--color-accent-200: #D49AF5;
--color-accent-300: #C060E8;
--color-accent-400: #B040D8;
--color-accent-500: #A035CC; /* base */
--color-accent-600: #7D28A0;
--color-accent-700: #5C1C78;
--color-accent-800: #3C1050;
--color-accent-900: #1E0828;
/* ── Neutral ─────────────────────────────────────────────── */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #FAFAFA;
--color-neutral-100: #F4F4F6;
--color-neutral-150: #EDEDF1;
--color-neutral-200: #E4E4EA;
--color-neutral-300: #C8C8D4;
--color-neutral-400: #9898A8;
--color-neutral-500: #70707E;
--color-neutral-600: #52525E;
--color-neutral-700: #3C3C46;
--color-neutral-800: #27272F;
--color-neutral-900: #18181D;
--color-neutral-1000: #09090B;
/* ── Semantic Status ─────────────────────────────────────── */
--color-success: #16A34A;
--color-success-bg: #DCFCE7;
--color-warning: #D97706;
--color-warning-bg: #FEF3C7;
--color-error: #DC2626;
--color-error-bg: #FEE2E2;
--color-info: #2563EB;
--color-info-bg: #DBEAFE;
/* ── Semantic Aliases ────────────────────────────────────── */
--text-primary: var(--color-neutral-900);
--text-secondary: var(--color-neutral-600);
--text-muted: var(--color-neutral-400);
--text-inverse: var(--color-neutral-0);
--text-brand: var(--brand-blue);
--text-accent: var(--brand-purple);
--surface-page: var(--color-neutral-0);
--surface-subtle: var(--color-neutral-50);
--surface-card: var(--color-neutral-0);
--surface-raised: var(--color-neutral-0);
--surface-overlay: rgba(9, 9, 11, 0.50);
--border-subtle: var(--color-neutral-150);
--border-default: var(--color-neutral-200);
--border-strong: var(--color-neutral-300);
--border-brand: var(--brand-blue);
}
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/fonts.css
+61
View File
@@ -0,0 +1,61 @@
/* ============================================================
CubeCraft Creations — @font-face Declarations
Nunito variable font (covers all weights 200–900)
============================================================ */
@font-face {
font-family: 'Nunito';
src: url('../assets/fonts/Nunito-Variable.ttf') format('truetype');
font-weight: 200 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nunito';
src: url('../assets/fonts/Nunito-Italic-Variable.ttf') format('truetype');
font-weight: 200 900;
font-style: italic;
font-display: swap;
}
/* Static fallbacks for environments that don't support variable fonts */
@font-face {
font-family: 'Nunito Fallback';
src: url('../assets/fonts/Nunito-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nunito Fallback';
src: url('../assets/fonts/Nunito-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nunito Fallback';
src: url('../assets/fonts/Nunito-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nunito Fallback';
src: url('../assets/fonts/Nunito-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nunito Fallback';
src: url('../assets/fonts/Nunito-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/spacing.css
+86
View File
@@ -0,0 +1,86 @@
/* ============================================================
CubeCraft Creations — Spacing & Layout Tokens
Base unit: 4px
============================================================ */
:root {
/* ── Spacing Scale ───────────────────────────────────────── */
--space-0: 0px;
--space-px: 1px;
--space-0-5: 2px;
--space-1: 4px;
--space-1-5: 6px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-28: 112px;
--space-32: 128px;
--space-40: 160px;
--space-48: 192px;
/* ── Border Radius ───────────────────────────────────────── */
--radius-none: 0px;
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-3xl: 28px;
--radius-full: 9999px;
/* Logo icon uses a large rounded square — matches brand mark */
--radius-brand: 20px;
/* ── Shadows ─────────────────────────────────────────────── */
--shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.06);
--shadow-sm: 0 2px 6px 0 rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px 0 rgba(0,0,0,0.10);
--shadow-lg: 0 8px 24px 0 rgba(0,0,0,0.12);
--shadow-xl: 0 16px 48px 0 rgba(0,0,0,0.16);
--shadow-brand: 0 4px 20px 0 rgba(59,58,184,0.25);
--shadow-accent: 0 4px 20px 0 rgba(160,53,204,0.25);
/* ── Layout ─────────────────────────────────────────────── */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--header-height: 68px;
--nav-height: 44px;
/* ── Transitions ─────────────────────────────────────────── */
--ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0); /* @kind other */
--ease-in: cubic-bezier(0.4, 0.0, 1.0, 1.0); /* @kind other */
--ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0); /* @kind other */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.0); /* @kind other */
--duration-fast: 120ms; /* @kind other */
--duration-base: 200ms; /* @kind other */
--duration-slow: 350ms; /* @kind other */
--transition-base: all var(--duration-base) var(--ease-out); /* @kind other */
--transition-spring: all var(--duration-slow) var(--ease-spring); /* @kind other */
/* ── Z-Index ─────────────────────────────────────────────── */
--z-base: 0; /* @kind other */
--z-raised: 10; /* @kind other */
--z-dropdown: 100; /* @kind other */
--z-sticky: 200; /* @kind other */
--z-overlay: 300; /* @kind other */
--z-modal: 400; /* @kind other */
--z-toast: 500; /* @kind other */
--z-tooltip: 600; /* @kind other */
}
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/typography.css
+97
View File
@@ -0,0 +1,97 @@
/* ============================================================
CubeCraft Creations — Typography Tokens
Primary typeface: Nunito (rounded, friendly, playful)
============================================================ */
:root {
/* ── Font Families ───────────────────────────────────────── */
--font-primary: 'Nunito', 'Nunito Fallback', system-ui, sans-serif;
--font-mono: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
/* ── Font Weights ────────────────────────────────────────── */
--fw-light: 300; /* @kind other */
--fw-regular: 400; /* @kind other */
--fw-medium: 500; /* @kind other */
--fw-semibold: 600; /* @kind other */
--fw-bold: 700; /* @kind other */
--fw-extrabold: 800; /* @kind other */
--fw-black: 900; /* @kind other */
/* ── Font Sizes — base 16px, 1.25 type scale ─────────────── */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-md: 1.125rem; /* 18px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 1.875rem; /* 30px */
--text-3xl: 2.25rem; /* 36px */
--text-4xl: 3rem; /* 48px */
--text-5xl: 3.75rem; /* 60px */
--text-6xl: 4.5rem; /* 72px */
/* ── Line Heights ────────────────────────────────────────── */
--lh-tight: 1.2; /* @kind other */
--lh-snug: 1.35; /* @kind other */
--lh-normal: 1.5; /* @kind other */
--lh-relaxed: 1.65; /* @kind other */
--lh-loose: 2.0; /* @kind other */
/* ── Letter Spacing ──────────────────────────────────────── */
--ls-tight: -0.03em; /* @kind other */
--ls-snug: -0.01em; /* @kind other */
--ls-normal: 0em; /* @kind other */
--ls-wide: 0.02em; /* @kind other */
--ls-wider: 0.05em; /* @kind other */
--ls-widest: 0.12em; /* @kind other */
/* ── Semantic Role Aliases ───────────────────────────────── */
/* Display — hero headlines, splash copy */
--type-display-family: var(--font-primary);
--type-display-weight: var(--fw-extrabold);
--type-display-size: var(--text-5xl);
--type-display-lh: var(--lh-tight);
--type-display-ls: var(--ls-tight);
/* Heading 1 */
--type-h1-family: var(--font-primary);
--type-h1-weight: var(--fw-extrabold);
--type-h1-size: var(--text-4xl);
--type-h1-lh: var(--lh-tight);
--type-h1-ls: var(--ls-snug);
/* Heading 2 */
--type-h2-weight: var(--fw-bold);
--type-h2-size: var(--text-3xl);
--type-h2-lh: var(--lh-snug);
/* Heading 3 */
--type-h3-weight: var(--fw-bold);
--type-h3-size: var(--text-2xl);
--type-h3-lh: var(--lh-snug);
/* Heading 4 */
--type-h4-weight: var(--fw-semibold);
--type-h4-size: var(--text-xl);
--type-h4-lh: var(--lh-normal);
/* Body */
--type-body-family: var(--font-primary);
--type-body-weight: var(--fw-regular);
--type-body-size: var(--text-base);
--type-body-lh: var(--lh-relaxed);
/* Body Large */
--type-body-lg-size: var(--text-md);
--type-body-lg-lh: var(--lh-relaxed);
/* Caption / Label */
--type-caption-weight: var(--fw-semibold);
--type-caption-size: var(--text-xs);
--type-caption-ls: var(--ls-wider);
/* Button */
--type-btn-weight: var(--fw-bold);
--type-btn-size: var(--text-sm);
--type-btn-ls: var(--ls-wide);
}