chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,210 @@
|
||||
---
|
||||
name: Atmospheric Glass
|
||||
colors:
|
||||
surface: "#0b1326"
|
||||
surface-dim: "#0b1326"
|
||||
surface-bright: "#31394d"
|
||||
surface-container-lowest: "#060e20"
|
||||
surface-container-low: "#131b2e"
|
||||
surface-container: "#171f33"
|
||||
surface-container-high: "#222a3d"
|
||||
surface-container-highest: "#2d3449"
|
||||
on-surface: "#dae2fd"
|
||||
on-surface-variant: "#c4c7c8"
|
||||
inverse-surface: "#dae2fd"
|
||||
inverse-on-surface: "#283044"
|
||||
outline: "#8e9192"
|
||||
outline-variant: "#444748"
|
||||
surface-tint: "#c6c6c7"
|
||||
primary: "#ffffff"
|
||||
on-primary: "#2f3131"
|
||||
primary-container: "#e2e2e2"
|
||||
on-primary-container: "#636565"
|
||||
inverse-primary: "#5d5f5f"
|
||||
secondary: "#adc9eb"
|
||||
on-secondary: "#14324e"
|
||||
secondary-container: "#304b68"
|
||||
on-secondary-container: "#9fbbdd"
|
||||
tertiary: "#ffffff"
|
||||
on-tertiary: "#620040"
|
||||
tertiary-container: "#ffd8e7"
|
||||
on-tertiary-container: "#ab3779"
|
||||
error: "#ffb4ab"
|
||||
on-error: "#690005"
|
||||
error-container: "#93000a"
|
||||
on-error-container: "#ffdad6"
|
||||
primary-fixed: "#e2e2e2"
|
||||
primary-fixed-dim: "#c6c6c7"
|
||||
on-primary-fixed: "#1a1c1c"
|
||||
on-primary-fixed-variant: "#454747"
|
||||
secondary-fixed: "#d0e4ff"
|
||||
secondary-fixed-dim: "#adc9eb"
|
||||
on-secondary-fixed: "#001d35"
|
||||
on-secondary-fixed-variant: "#2d4965"
|
||||
tertiary-fixed: "#ffd8e7"
|
||||
tertiary-fixed-dim: "#ffafd3"
|
||||
on-tertiary-fixed: "#3d0026"
|
||||
on-tertiary-fixed-variant: "#85145a"
|
||||
background: "#0b1326"
|
||||
on-background: "#dae2fd"
|
||||
surface-variant: "#2d3449"
|
||||
typography:
|
||||
display-lg:
|
||||
fontFamily: Inter
|
||||
fontSize: 84px
|
||||
fontWeight: "700"
|
||||
lineHeight: 90px
|
||||
letterSpacing: -0.04em
|
||||
headline-lg:
|
||||
fontFamily: Inter
|
||||
fontSize: 32px
|
||||
fontWeight: "600"
|
||||
lineHeight: 40px
|
||||
letterSpacing: -0.02em
|
||||
headline-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 24px
|
||||
fontWeight: "500"
|
||||
lineHeight: 32px
|
||||
body-lg:
|
||||
fontFamily: Inter
|
||||
fontSize: 18px
|
||||
fontWeight: "400"
|
||||
lineHeight: 28px
|
||||
body-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: "400"
|
||||
lineHeight: 24px
|
||||
label-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 12px
|
||||
fontWeight: "600"
|
||||
lineHeight: 16px
|
||||
letterSpacing: 0.05em
|
||||
rounded:
|
||||
sm: 0.25rem
|
||||
DEFAULT: 0.5rem
|
||||
md: 0.75rem
|
||||
lg: 1rem
|
||||
xl: 1.5rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
unit: 8px
|
||||
container-padding: 24px
|
||||
card-gap: 16px
|
||||
section-margin: 40px
|
||||
glass-padding: 20px
|
||||
components:
|
||||
glass-card-standard:
|
||||
backgroundColor: rgba(255, 255, 255, 0.1)
|
||||
textColor: "{colors.primary}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.glass-padding}"
|
||||
glass-card-elevated:
|
||||
backgroundColor: rgba(255, 255, 255, 0.2)
|
||||
textColor: "{colors.primary}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.glass-padding}"
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.label-sm}"
|
||||
rounded: "{rounded.xl}"
|
||||
height: 48px
|
||||
padding: 0 24px
|
||||
button-primary-hover:
|
||||
backgroundColor: "{colors.primary-fixed-dim}"
|
||||
button-ghost:
|
||||
backgroundColor: rgba(255, 255, 255, 0.05)
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.label-sm}"
|
||||
rounded: "{rounded.xl}"
|
||||
input-field:
|
||||
backgroundColor: rgba(255, 255, 255, 0.1)
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 20px
|
||||
height: 48px
|
||||
weather-display-large:
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.display-lg}"
|
||||
metric-label:
|
||||
textColor: "{colors.on-surface-variant}"
|
||||
typography: "{typography.label-sm}"
|
||||
list-item-interactive:
|
||||
backgroundColor: transparent
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px
|
||||
list-item-interactive-hover:
|
||||
backgroundColor: rgba(255, 255, 255, 0.1)
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
This design system centers on a high-fidelity Glassmorphism aesthetic designed to evoke a sense of clarity, depth, and modern sophistication. The brand personality is ethereal yet functional, transforming complex meteorological data into a serene visual experience.
|
||||
|
||||
The UI relies on a "vibrant-minimalist" approach: the background provides the energy through multi-colored abstract gradients (pinks, purples, and blues), while the interface elements act as frosted crystalline lenses that focus the user's attention. The emotional response is intended to be calm and premium, utilizing transparency and blur to simulate physical layers of glass floating in a fluid, digital space.
|
||||
|
||||
## Colors
|
||||
|
||||
The color strategy prioritizes luminosity and contrast. Because the background is a vibrant, multi-colored abstract composition, the UI components utilize a monochromatic white palette with varying alpha channels to maintain legibility.
|
||||
|
||||
- **Primary Canvas:** A multi-stop linear or radial gradient background featuring Deep Blue (#1E3A8A), Vivid Purple (#7E22CE), and Soft Pink (#DB2777).
|
||||
- **Surface Alpha:** Component backgrounds are never solid. They range from `rgba(255, 255, 255, 0.1)` for secondary depth to `0.2` for primary interaction areas.
|
||||
- **Accents:** Semantic colors for weather conditions (e.g., Warning Yellow, Rain Blue) should be applied with high saturation but low opacity fills to maintain the glass effect.
|
||||
- **Text:** Strictly white (#FFFFFF) or high-tint silver (#E2E8F0) to ensure WCAG compliance against the vibrant background.
|
||||
|
||||
## Typography
|
||||
|
||||
The design system utilizes **Inter** for its neutral, geometric clarity which balances the organic nature of the blurred backgrounds.
|
||||
|
||||
- **Hierarchy:** Large display sizes are used for temperature readings to create a clear focal point.
|
||||
- **Legibility:** On frosted glass, font weight is increased by one tier (e.g., using Medium instead of Regular) to counteract the visual noise of the background blur.
|
||||
- **Treatment:** Subtle text-shadows (`0px 2px 4px rgba(0,0,0,0.15)`) may be applied to small labels to ensure they "pop" against lighter areas of the background gradient.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The layout follows a fluid, contextual model. Elements are grouped into "Glass Containers" that float within the safe areas of the viewport.
|
||||
|
||||
- **Rhythm:** An 8px base grid governs all dimensions.
|
||||
- **Grouping:** Related weather metrics (humidity, wind, UV index) are housed in a CSS grid or flex layout with 16px gaps.
|
||||
- **Negative Space:** Generous outer margins (24px+) are maintained to ensure the vibrant background is visible, reinforcing the "floating" nature of the interface.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
Depth in this design system is not achieved through darkness, but through the physics of light and refraction.
|
||||
|
||||
- **The Glass Stack:**
|
||||
- **Level 1 (Base):** Dynamic background gradient with a slight grain texture.
|
||||
- **Level 2 (Standard Card):** `backdrop-filter: blur(20px)`, `background: rgba(255, 255, 255, 0.1)`.
|
||||
- **Level 3 (Elevated/Modals):** `backdrop-filter: blur(40px)`, `background: rgba(255, 255, 255, 0.2)`.
|
||||
- **Edge Definition:** Every glass surface must have a 1px solid border at `rgba(255, 255, 255, 0.2)`. A secondary inner "shine" border (top and left only) can be used to simulate a light source.
|
||||
- **Shadows:** Use extremely soft, spread-out shadows (`box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1)`) to separate the glass layers from the background without making the UI feel "heavy."
|
||||
|
||||
## Shapes
|
||||
|
||||
The shape language is organic and approachable. This design system uses "Rounded" (Level 2) settings to complement the fluid nature of the background.
|
||||
|
||||
- **Cards:** Use `1rem` (16px) for standard weather cards.
|
||||
- **Action Elements:** Buttons and search bars use `rounded-xl` (1.5rem / 24px) to create a soft, tactile feel.
|
||||
- **Icons:** Weather iconography should be line-based with rounded caps (2px stroke width) to match the border weights of the containers.
|
||||
|
||||
## Components
|
||||
|
||||
### Glass Containers
|
||||
|
||||
Standard cards use a 20px blur for general metrics, while elevated cards (modals or focal points) use 40px blur and higher opacity to sit physically higher in the stack. All glass elements must feature a 1px white border to simulate light refraction on the edges.
|
||||
|
||||
### Action Elements
|
||||
|
||||
Buttons use the `rounded-xl` setting to maintain a soft, organic feel. Primary buttons are solid white for maximum contrast, while ghost buttons utilize backdrop filters to remain integrated with the atmospheric background.
|
||||
|
||||
### Inputs & Interaction
|
||||
|
||||
Interactive list items and text inputs use subtle hover states and light blurs rather than solid color changes, preserving the "crystalline" transparency of the UI.
|
||||
|
||||
### Typography Application
|
||||
|
||||
Large weather displays utilize subtle text shadows to maintain legibility against the unpredictable colors of the background gradient. Metric labels should remain secondary in hierarchy using the silver-tinted `on-surface-variant` color.
|
||||
@@ -0,0 +1,11 @@
|
||||
# Atmospheric Glass
|
||||
|
||||
A glassmorphism-driven weather application design system. Frosted crystalline panels float over vibrant gradient backgrounds, transforming complex meteorological data into a serene, premium visual experience. Uses a monochromatic white palette with varying alpha channels for luminosity and depth.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | The complete design system specification in DESIGN.md format, including both structured YAML design tokens (frontmatter) and human-readable style guidance (markdown body). |
|
||||
| `tailwind.config.js` | A Tailwind CSS v3 theme configuration derived from the design tokens in the DESIGN.md frontmatter. Covers colors, typography, border-radius, and spacing. Component tokens are intentionally excluded — Tailwind's utility-first approach handles component styling through composition of these primitives. |
|
||||
| `design_tokens.json` | A [Design Tokens Community Group](https://www.designtokens.org/) JSON file containing all design tokens from the DESIGN.md frontmatter, including component-level tokens. This format is interoperable with tools like Figma, Style Dictionary, and other token pipelines. |
|
||||
@@ -0,0 +1,909 @@
|
||||
{
|
||||
"name": {
|
||||
"$type": "string",
|
||||
"$value": "Atmospheric Glass"
|
||||
},
|
||||
"colors": {
|
||||
"surface": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.043,
|
||||
0.075,
|
||||
0.149
|
||||
],
|
||||
"hex": "#0b1326"
|
||||
}
|
||||
},
|
||||
"surface-dim": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.043,
|
||||
0.075,
|
||||
0.149
|
||||
],
|
||||
"hex": "#0b1326"
|
||||
}
|
||||
},
|
||||
"surface-bright": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.192,
|
||||
0.224,
|
||||
0.302
|
||||
],
|
||||
"hex": "#31394d"
|
||||
}
|
||||
},
|
||||
"surface-container-lowest": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.024,
|
||||
0.055,
|
||||
0.125
|
||||
],
|
||||
"hex": "#060e20"
|
||||
}
|
||||
},
|
||||
"surface-container-low": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.075,
|
||||
0.106,
|
||||
0.18
|
||||
],
|
||||
"hex": "#131b2e"
|
||||
}
|
||||
},
|
||||
"surface-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.09,
|
||||
0.122,
|
||||
0.2
|
||||
],
|
||||
"hex": "#171f33"
|
||||
}
|
||||
},
|
||||
"surface-container-high": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.133,
|
||||
0.165,
|
||||
0.239
|
||||
],
|
||||
"hex": "#222a3d"
|
||||
}
|
||||
},
|
||||
"surface-container-highest": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.176,
|
||||
0.204,
|
||||
0.286
|
||||
],
|
||||
"hex": "#2d3449"
|
||||
}
|
||||
},
|
||||
"on-surface": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.855,
|
||||
0.886,
|
||||
0.992
|
||||
],
|
||||
"hex": "#dae2fd"
|
||||
}
|
||||
},
|
||||
"on-surface-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.769,
|
||||
0.78,
|
||||
0.784
|
||||
],
|
||||
"hex": "#c4c7c8"
|
||||
}
|
||||
},
|
||||
"inverse-surface": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.855,
|
||||
0.886,
|
||||
0.992
|
||||
],
|
||||
"hex": "#dae2fd"
|
||||
}
|
||||
},
|
||||
"inverse-on-surface": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.157,
|
||||
0.188,
|
||||
0.267
|
||||
],
|
||||
"hex": "#283044"
|
||||
}
|
||||
},
|
||||
"outline": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.557,
|
||||
0.569,
|
||||
0.573
|
||||
],
|
||||
"hex": "#8e9192"
|
||||
}
|
||||
},
|
||||
"outline-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.267,
|
||||
0.278,
|
||||
0.282
|
||||
],
|
||||
"hex": "#444748"
|
||||
}
|
||||
},
|
||||
"surface-tint": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.776,
|
||||
0.776,
|
||||
0.78
|
||||
],
|
||||
"hex": "#c6c6c7"
|
||||
}
|
||||
},
|
||||
"primary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"hex": "#ffffff"
|
||||
}
|
||||
},
|
||||
"on-primary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.184,
|
||||
0.192,
|
||||
0.192
|
||||
],
|
||||
"hex": "#2f3131"
|
||||
}
|
||||
},
|
||||
"primary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.886,
|
||||
0.886,
|
||||
0.886
|
||||
],
|
||||
"hex": "#e2e2e2"
|
||||
}
|
||||
},
|
||||
"on-primary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.388,
|
||||
0.396,
|
||||
0.396
|
||||
],
|
||||
"hex": "#636565"
|
||||
}
|
||||
},
|
||||
"inverse-primary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.365,
|
||||
0.373,
|
||||
0.373
|
||||
],
|
||||
"hex": "#5d5f5f"
|
||||
}
|
||||
},
|
||||
"secondary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.678,
|
||||
0.788,
|
||||
0.922
|
||||
],
|
||||
"hex": "#adc9eb"
|
||||
}
|
||||
},
|
||||
"on-secondary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.078,
|
||||
0.196,
|
||||
0.306
|
||||
],
|
||||
"hex": "#14324e"
|
||||
}
|
||||
},
|
||||
"secondary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.188,
|
||||
0.294,
|
||||
0.408
|
||||
],
|
||||
"hex": "#304b68"
|
||||
}
|
||||
},
|
||||
"on-secondary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.624,
|
||||
0.733,
|
||||
0.867
|
||||
],
|
||||
"hex": "#9fbbdd"
|
||||
}
|
||||
},
|
||||
"tertiary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"hex": "#ffffff"
|
||||
}
|
||||
},
|
||||
"on-tertiary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.384,
|
||||
0.0,
|
||||
0.251
|
||||
],
|
||||
"hex": "#620040"
|
||||
}
|
||||
},
|
||||
"tertiary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.847,
|
||||
0.906
|
||||
],
|
||||
"hex": "#ffd8e7"
|
||||
}
|
||||
},
|
||||
"on-tertiary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.671,
|
||||
0.216,
|
||||
0.475
|
||||
],
|
||||
"hex": "#ab3779"
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.706,
|
||||
0.671
|
||||
],
|
||||
"hex": "#ffb4ab"
|
||||
}
|
||||
},
|
||||
"on-error": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.412,
|
||||
0.0,
|
||||
0.02
|
||||
],
|
||||
"hex": "#690005"
|
||||
}
|
||||
},
|
||||
"error-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.576,
|
||||
0.0,
|
||||
0.039
|
||||
],
|
||||
"hex": "#93000a"
|
||||
}
|
||||
},
|
||||
"on-error-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.855,
|
||||
0.839
|
||||
],
|
||||
"hex": "#ffdad6"
|
||||
}
|
||||
},
|
||||
"primary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.886,
|
||||
0.886,
|
||||
0.886
|
||||
],
|
||||
"hex": "#e2e2e2"
|
||||
}
|
||||
},
|
||||
"primary-fixed-dim": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.776,
|
||||
0.776,
|
||||
0.78
|
||||
],
|
||||
"hex": "#c6c6c7"
|
||||
}
|
||||
},
|
||||
"on-primary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.102,
|
||||
0.11,
|
||||
0.11
|
||||
],
|
||||
"hex": "#1a1c1c"
|
||||
}
|
||||
},
|
||||
"on-primary-fixed-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.271,
|
||||
0.278,
|
||||
0.278
|
||||
],
|
||||
"hex": "#454747"
|
||||
}
|
||||
},
|
||||
"secondary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.816,
|
||||
0.894,
|
||||
1.0
|
||||
],
|
||||
"hex": "#d0e4ff"
|
||||
}
|
||||
},
|
||||
"secondary-fixed-dim": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.678,
|
||||
0.788,
|
||||
0.922
|
||||
],
|
||||
"hex": "#adc9eb"
|
||||
}
|
||||
},
|
||||
"on-secondary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.114,
|
||||
0.208
|
||||
],
|
||||
"hex": "#001d35"
|
||||
}
|
||||
},
|
||||
"on-secondary-fixed-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.176,
|
||||
0.286,
|
||||
0.396
|
||||
],
|
||||
"hex": "#2d4965"
|
||||
}
|
||||
},
|
||||
"tertiary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.847,
|
||||
0.906
|
||||
],
|
||||
"hex": "#ffd8e7"
|
||||
}
|
||||
},
|
||||
"tertiary-fixed-dim": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.686,
|
||||
0.827
|
||||
],
|
||||
"hex": "#ffafd3"
|
||||
}
|
||||
},
|
||||
"on-tertiary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.239,
|
||||
0.0,
|
||||
0.149
|
||||
],
|
||||
"hex": "#3d0026"
|
||||
}
|
||||
},
|
||||
"on-tertiary-fixed-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.522,
|
||||
0.078,
|
||||
0.353
|
||||
],
|
||||
"hex": "#85145a"
|
||||
}
|
||||
},
|
||||
"background": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.043,
|
||||
0.075,
|
||||
0.149
|
||||
],
|
||||
"hex": "#0b1326"
|
||||
}
|
||||
},
|
||||
"on-background": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.855,
|
||||
0.886,
|
||||
0.992
|
||||
],
|
||||
"hex": "#dae2fd"
|
||||
}
|
||||
},
|
||||
"surface-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.176,
|
||||
0.204,
|
||||
0.286
|
||||
],
|
||||
"hex": "#2d3449"
|
||||
}
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"display-lg": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": {
|
||||
"value": 84,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 700,
|
||||
"lineHeight": {
|
||||
"value": 90,
|
||||
"unit": "px"
|
||||
},
|
||||
"letterSpacing": {
|
||||
"value": -0.04,
|
||||
"unit": "em"
|
||||
}
|
||||
}
|
||||
},
|
||||
"headline-lg": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": {
|
||||
"value": 32,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 600,
|
||||
"lineHeight": {
|
||||
"value": 40,
|
||||
"unit": "px"
|
||||
},
|
||||
"letterSpacing": {
|
||||
"value": -0.02,
|
||||
"unit": "em"
|
||||
}
|
||||
}
|
||||
},
|
||||
"headline-md": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": {
|
||||
"value": 24,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 500,
|
||||
"lineHeight": {
|
||||
"value": 32,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"body-lg": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": {
|
||||
"value": 18,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 400,
|
||||
"lineHeight": {
|
||||
"value": 28,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"body-md": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": {
|
||||
"value": 16,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 400,
|
||||
"lineHeight": {
|
||||
"value": 24,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"label-sm": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": {
|
||||
"value": 12,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 600,
|
||||
"lineHeight": {
|
||||
"value": 16,
|
||||
"unit": "px"
|
||||
},
|
||||
"letterSpacing": {
|
||||
"value": 0.05,
|
||||
"unit": "em"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"rounded": {
|
||||
"sm": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 0.25,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"DEFAULT": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 0.5,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"md": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 0.75,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"lg": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 1,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"xl": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 1.5,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"full": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 9999,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
"unit": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 8,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"container-padding": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 24,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"card-gap": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 16,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"section-margin": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 40,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"glass-padding": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 20,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"components": {
|
||||
"glass-card-standard": {
|
||||
"backgroundColor": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"alpha": 0.1
|
||||
}
|
||||
},
|
||||
"textColor": "{colors.primary}",
|
||||
"rounded": "{rounded.lg}",
|
||||
"padding": "{spacing.glass-padding}"
|
||||
},
|
||||
"glass-card-elevated": {
|
||||
"backgroundColor": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"alpha": 0.2
|
||||
}
|
||||
},
|
||||
"textColor": "{colors.primary}",
|
||||
"rounded": "{rounded.xl}",
|
||||
"padding": "{spacing.glass-padding}"
|
||||
},
|
||||
"button-primary": {
|
||||
"backgroundColor": "{colors.primary}",
|
||||
"textColor": "{colors.on-primary}",
|
||||
"typography": "{typography.label-sm}",
|
||||
"rounded": "{rounded.xl}",
|
||||
"height": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 48,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"padding": {
|
||||
"$type": "dimension",
|
||||
"$value": "0 24px"
|
||||
}
|
||||
},
|
||||
"button-primary-hover": {
|
||||
"backgroundColor": "{colors.primary-fixed-dim}"
|
||||
},
|
||||
"button-ghost": {
|
||||
"backgroundColor": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"alpha": 0.05
|
||||
}
|
||||
},
|
||||
"textColor": "{colors.primary}",
|
||||
"typography": "{typography.label-sm}",
|
||||
"rounded": "{rounded.xl}"
|
||||
},
|
||||
"input-field": {
|
||||
"backgroundColor": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"alpha": 0.1
|
||||
}
|
||||
},
|
||||
"textColor": "{colors.primary}",
|
||||
"typography": "{typography.body-md}",
|
||||
"rounded": "{rounded.xl}",
|
||||
"padding": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 20,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"height": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 48,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"weather-display-large": {
|
||||
"textColor": "{colors.primary}",
|
||||
"typography": "{typography.display-lg}"
|
||||
},
|
||||
"metric-label": {
|
||||
"textColor": "{colors.on-surface-variant}",
|
||||
"typography": "{typography.label-sm}",
|
||||
"textTransform": {
|
||||
"$type": "string",
|
||||
"$value": "uppercase"
|
||||
}
|
||||
},
|
||||
"list-item-interactive": {
|
||||
"backgroundColor": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"alpha": 0
|
||||
}
|
||||
},
|
||||
"rounded": "{rounded.md}",
|
||||
"padding": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 12,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"list-item-interactive-hover": {
|
||||
"backgroundColor": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"alpha": 0.1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
// Copyright 2026 Google LLC
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// https://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"surface": "#0b1326",
|
||||
"surface-dim": "#0b1326",
|
||||
"surface-bright": "#31394d",
|
||||
"surface-container-lowest": "#060e20",
|
||||
"surface-container-low": "#131b2e",
|
||||
"surface-container": "#171f33",
|
||||
"surface-container-high": "#222a3d",
|
||||
"surface-container-highest": "#2d3449",
|
||||
"on-surface": "#dae2fd",
|
||||
"on-surface-variant": "#c4c7c8",
|
||||
"inverse-surface": "#dae2fd",
|
||||
"inverse-on-surface": "#283044",
|
||||
"outline": "#8e9192",
|
||||
"outline-variant": "#444748",
|
||||
"surface-tint": "#c6c6c7",
|
||||
"primary": "#ffffff",
|
||||
"on-primary": "#2f3131",
|
||||
"primary-container": "#e2e2e2",
|
||||
"on-primary-container": "#636565",
|
||||
"inverse-primary": "#5d5f5f",
|
||||
"secondary": "#adc9eb",
|
||||
"on-secondary": "#14324e",
|
||||
"secondary-container": "#304b68",
|
||||
"on-secondary-container": "#9fbbdd",
|
||||
"tertiary": "#ffffff",
|
||||
"on-tertiary": "#620040",
|
||||
"tertiary-container": "#ffd8e7",
|
||||
"on-tertiary-container": "#ab3779",
|
||||
"error": "#ffb4ab",
|
||||
"on-error": "#690005",
|
||||
"error-container": "#93000a",
|
||||
"on-error-container": "#ffdad6",
|
||||
"primary-fixed": "#e2e2e2",
|
||||
"primary-fixed-dim": "#c6c6c7",
|
||||
"on-primary-fixed": "#1a1c1c",
|
||||
"on-primary-fixed-variant": "#454747",
|
||||
"secondary-fixed": "#d0e4ff",
|
||||
"secondary-fixed-dim": "#adc9eb",
|
||||
"on-secondary-fixed": "#001d35",
|
||||
"on-secondary-fixed-variant": "#2d4965",
|
||||
"tertiary-fixed": "#ffd8e7",
|
||||
"tertiary-fixed-dim": "#ffafd3",
|
||||
"on-tertiary-fixed": "#3d0026",
|
||||
"on-tertiary-fixed-variant": "#85145a",
|
||||
"background": "#0b1326",
|
||||
"on-background": "#dae2fd",
|
||||
"surface-variant": "#2d3449",
|
||||
},
|
||||
fontFamily: {
|
||||
"display-lg": ["Inter"],
|
||||
"headline-lg": ["Inter"],
|
||||
"headline-md": ["Inter"],
|
||||
"body-lg": ["Inter"],
|
||||
"body-md": ["Inter"],
|
||||
"label-sm": ["Inter"],
|
||||
},
|
||||
fontSize: {
|
||||
"display-lg": [
|
||||
"84px",
|
||||
{
|
||||
lineHeight: "90px",
|
||||
letterSpacing: "-0.04em",
|
||||
fontWeight: "700",
|
||||
},
|
||||
],
|
||||
"headline-lg": [
|
||||
"32px",
|
||||
{
|
||||
lineHeight: "40px",
|
||||
letterSpacing: "-0.02em",
|
||||
fontWeight: "600",
|
||||
},
|
||||
],
|
||||
"headline-md": [
|
||||
"24px",
|
||||
{
|
||||
lineHeight: "32px",
|
||||
fontWeight: "500",
|
||||
},
|
||||
],
|
||||
"body-lg": [
|
||||
"18px",
|
||||
{
|
||||
lineHeight: "28px",
|
||||
fontWeight: "400",
|
||||
},
|
||||
],
|
||||
"body-md": [
|
||||
"16px",
|
||||
{
|
||||
lineHeight: "24px",
|
||||
fontWeight: "400",
|
||||
},
|
||||
],
|
||||
"label-sm": [
|
||||
"12px",
|
||||
{
|
||||
lineHeight: "16px",
|
||||
letterSpacing: "0.05em",
|
||||
fontWeight: "600",
|
||||
},
|
||||
],
|
||||
},
|
||||
borderRadius: {
|
||||
"sm": "0.25rem",
|
||||
"DEFAULT": "0.5rem",
|
||||
"md": "0.75rem",
|
||||
"lg": "1rem",
|
||||
"xl": "1.5rem",
|
||||
"full": "9999px",
|
||||
},
|
||||
spacing: {
|
||||
"unit": "8px",
|
||||
"container-padding": "24px",
|
||||
"card-gap": "16px",
|
||||
"section-margin": "40px",
|
||||
"glass-padding": "20px",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,219 @@
|
||||
---
|
||||
name: Paws & Paths
|
||||
colors:
|
||||
surface: "#f9f9ff"
|
||||
surface-dim: "#d3daea"
|
||||
surface-bright: "#f9f9ff"
|
||||
surface-container-lowest: "#ffffff"
|
||||
surface-container-low: "#f0f3ff"
|
||||
surface-container: "#e7eefe"
|
||||
surface-container-high: "#e2e8f8"
|
||||
surface-container-highest: "#dce2f3"
|
||||
on-surface: "#151c27"
|
||||
on-surface-variant: "#534434"
|
||||
inverse-surface: "#2a313d"
|
||||
inverse-on-surface: "#ebf1ff"
|
||||
outline: "#867461"
|
||||
outline-variant: "#d8c3ad"
|
||||
surface-tint: "#855300"
|
||||
primary: "#855300"
|
||||
on-primary: "#ffffff"
|
||||
primary-container: "#f59e0b"
|
||||
on-primary-container: "#613b00"
|
||||
inverse-primary: "#ffb95f"
|
||||
secondary: "#0058be"
|
||||
on-secondary: "#ffffff"
|
||||
secondary-container: "#2170e4"
|
||||
on-secondary-container: "#fefcff"
|
||||
tertiary: "#00658b"
|
||||
on-tertiary: "#ffffff"
|
||||
tertiary-container: "#1abdff"
|
||||
on-tertiary-container: "#004966"
|
||||
error: "#ba1a1a"
|
||||
on-error: "#ffffff"
|
||||
error-container: "#ffdad6"
|
||||
on-error-container: "#93000a"
|
||||
primary-fixed: "#ffddb8"
|
||||
primary-fixed-dim: "#ffb95f"
|
||||
on-primary-fixed: "#2a1700"
|
||||
on-primary-fixed-variant: "#653e00"
|
||||
secondary-fixed: "#d8e2ff"
|
||||
secondary-fixed-dim: "#adc6ff"
|
||||
on-secondary-fixed: "#001a42"
|
||||
on-secondary-fixed-variant: "#004395"
|
||||
tertiary-fixed: "#c5e7ff"
|
||||
tertiary-fixed-dim: "#7fd0ff"
|
||||
on-tertiary-fixed: "#001e2d"
|
||||
on-tertiary-fixed-variant: "#004c6a"
|
||||
background: "#f9f9ff"
|
||||
on-background: "#151c27"
|
||||
surface-variant: "#dce2f3"
|
||||
typography:
|
||||
display:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 44px
|
||||
fontWeight: "800"
|
||||
lineHeight: 52px
|
||||
letterSpacing: -0.02em
|
||||
headline-lg:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 32px
|
||||
fontWeight: "700"
|
||||
lineHeight: 40px
|
||||
letterSpacing: -0.01em
|
||||
headline-md:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 24px
|
||||
fontWeight: "700"
|
||||
lineHeight: 32px
|
||||
title-lg:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 20px
|
||||
fontWeight: "600"
|
||||
lineHeight: 28px
|
||||
body-lg:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 18px
|
||||
fontWeight: "400"
|
||||
lineHeight: 28px
|
||||
body-md:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 16px
|
||||
fontWeight: "400"
|
||||
lineHeight: 24px
|
||||
label-md:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 14px
|
||||
fontWeight: "600"
|
||||
lineHeight: 20px
|
||||
letterSpacing: 0.01em
|
||||
label-sm:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 12px
|
||||
fontWeight: "500"
|
||||
lineHeight: 16px
|
||||
rounded:
|
||||
sm: 0.25rem
|
||||
DEFAULT: 0.5rem
|
||||
md: 0.75rem
|
||||
lg: 1rem
|
||||
xl: 1.5rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
base: 8px
|
||||
xs: 4px
|
||||
sm: 12px
|
||||
md: 24px
|
||||
lg: 40px
|
||||
xl: 64px
|
||||
gutter: 16px
|
||||
margin: 24px
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.label-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.md}"
|
||||
button-primary-hover:
|
||||
backgroundColor: "{colors.primary-container}"
|
||||
textColor: "{colors.on-primary-container}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.secondary}"
|
||||
textColor: "{colors.on-secondary}"
|
||||
typography: "{typography.label-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.md}"
|
||||
button-secondary-hover:
|
||||
backgroundColor: "{colors.secondary-container}"
|
||||
textColor: "{colors.on-secondary-container}"
|
||||
card-profile:
|
||||
backgroundColor: "{colors.surface-container-lowest}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.md}"
|
||||
card-walk-stat:
|
||||
backgroundColor: "{colors.secondary-container}"
|
||||
textColor: "{colors.on-secondary-container}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.sm}"
|
||||
input-field:
|
||||
backgroundColor: "{colors.surface-container-low}"
|
||||
textColor: "{colors.on-surface}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.DEFAULT}"
|
||||
padding: "{spacing.sm}"
|
||||
list-item-walker:
|
||||
backgroundColor: transparent
|
||||
padding: "{spacing.sm}"
|
||||
rounded: "{rounded.md}"
|
||||
list-item-walker-hover:
|
||||
backgroundColor: "{colors.surface-container-high}"
|
||||
badge-status:
|
||||
backgroundColor: "{colors.tertiary-container}"
|
||||
textColor: "{colors.on-tertiary-container}"
|
||||
typography: "{typography.label-sm}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "{spacing.xs}"
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
The design system is built to evoke the joyful energy of a walk in the park balanced with the reliability of a premium professional service. The brand personality is optimistic, trustworthy, and active.
|
||||
|
||||
The chosen style is **Modern Corporate** with a friendly, human-centric twist. It utilizes clean layouts and significant whitespace to reduce cognitive load for busy pet owners. The interface feels light and airy, avoiding heavy borders in favor of soft shadows and tonal shifts to create a welcoming, "best-in-class" digital environment.
|
||||
|
||||
## Colors
|
||||
|
||||
The palette centers on "Golden Retriever" orange to drive action and signal energy. This is balanced by "Sky Walk" blue, which provides a calming counterpoint for administrative tasks and scheduling.
|
||||
|
||||
- **Primary:** Use for main actions, active states, and highlights.
|
||||
- **Secondary:** Use for secondary information, trust indicators, and navigation accents.
|
||||
- **Neutral:** A range of soft grays used for backgrounds and borders to keep the UI feeling "premium."
|
||||
- **Deep Charcoal:** Used for all primary text to ensure high legibility and a grounded, professional feel.
|
||||
|
||||
## Typography
|
||||
|
||||
This design system utilizes **Plus Jakarta Sans** for its friendly, rounded terminals and exceptional legibility. It maintains a contemporary look while feeling more approachable than standard geometric sans-serifs.
|
||||
|
||||
- **Headlines:** Bold weights are used to create a clear hierarchy and guide the eye quickly to key information.
|
||||
- **Body:** Generous line heights are applied to the body text to maintain the "premium and clean" feel.
|
||||
- **Labels:** Used for buttons and small metadata, utilizing a medium or semi-bold weight to remain distinct even at small scales.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The layout follows a **Fixed Grid** model for mobile-first consistency, utilizing a 4-column system for handheld devices.
|
||||
|
||||
- **Whitespace:** A "generous" philosophy is applied. Never crowd elements; use `lg` and `xl` spacing for section vertical separation to maintain a high-end aesthetic.
|
||||
- **Rhythm:** Spacing is strictly based on an 8px scale.
|
||||
- **Containers:** Content should be centered with a maximum width on larger screens, ensuring the "Paths" (user journeys) feel focused and intentional.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
This design system uses **Ambient Shadows** and **Tonal Layers** to define the interface's verticality.
|
||||
|
||||
- **Surfaces:** Main backgrounds use the lightest neutral tint. Interactive cards sit one level above on a pure white surface.
|
||||
- **Shadows:** Shadows are highly diffused and soft (Blur: 20px-40px, Opacity: 4-8%) with a subtle hint of the primary orange or secondary blue mixed into the shadow color to prevent a "dirty" gray look.
|
||||
- **Interactions:** Elements should subtly lift on hover or tap, increasing shadow spread to provide tactile feedback.
|
||||
|
||||
## Shapes
|
||||
|
||||
The shape language is defined by **Rounded** corners, mirroring the soft features of a pet and making the app feel safe and friendly.
|
||||
|
||||
- **Buttons:** Main CTA buttons use a `12px` (rounded-lg) radius to feel substantial and clickable.
|
||||
- **Cards:** Dog profiles and walker cards use a `1.5rem` (rounded-xl) radius to create a soft, containerized look.
|
||||
- **Inputs:** Form fields use a `0.5rem` radius to maintain a professional yet modern appearance.
|
||||
- **Icons:** Icons should feature rounded caps and corners to harmonize with the UI's structural elements.
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons & Inputs
|
||||
|
||||
Buttons use `rounded-lg` (12px) to feel substantial and friendly, while form fields use a smaller `DEFAULT` radius to maintain structural alignment. All interactive states should utilize a subtle 150ms ease-in-out transition for background color shifts.
|
||||
|
||||
### Cards & Elevation
|
||||
|
||||
The `card-profile` is the hero container, utilizing `rounded-xl` and a tinted ambient shadow to create a "lifted" appearance against the `surface` background. Use `card-walk-stat` for high-contrast data visualization within the blue secondary palette.
|
||||
|
||||
### Lists & Navigation
|
||||
|
||||
List items should maintain a wide touch target and use `surface-container-high` for hover states to provide clear feedback without visual clutter. Use the `badge-status` for pet availability or walk progress indicators, ensuring the typography remains legible at the smaller scale.
|
||||
@@ -0,0 +1,11 @@
|
||||
# Paws & Paths
|
||||
|
||||
A warm, friendly design system for a dog-walking and pet care platform. Built around "Golden Retriever" orange primary and "Sky Walk" blue secondary colors, with Plus Jakarta Sans typography for an approachable yet premium feel.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | The complete design system specification in DESIGN.md format, including both structured YAML design tokens (frontmatter) and human-readable style guidance (markdown body). |
|
||||
| `tailwind.config.js` | A Tailwind CSS v3 theme configuration derived from the design tokens in the DESIGN.md frontmatter. Covers colors, typography, border-radius, and spacing. Component tokens are intentionally excluded — Tailwind's utility-first approach handles component styling through composition of these primitives. |
|
||||
| `design_tokens.json` | A [Design Tokens Community Group](https://www.designtokens.org/) JSON file containing all design tokens from the DESIGN.md frontmatter, including component-level tokens. This format is interoperable with tools like Figma, Style Dictionary, and other token pipelines. |
|
||||
@@ -0,0 +1,876 @@
|
||||
{
|
||||
"name": {
|
||||
"$type": "string",
|
||||
"$value": "Paws & Paths"
|
||||
},
|
||||
"colors": {
|
||||
"surface": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.976,
|
||||
0.976,
|
||||
1.0
|
||||
],
|
||||
"hex": "#f9f9ff"
|
||||
}
|
||||
},
|
||||
"surface-dim": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.827,
|
||||
0.855,
|
||||
0.918
|
||||
],
|
||||
"hex": "#d3daea"
|
||||
}
|
||||
},
|
||||
"surface-bright": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.976,
|
||||
0.976,
|
||||
1.0
|
||||
],
|
||||
"hex": "#f9f9ff"
|
||||
}
|
||||
},
|
||||
"surface-container-lowest": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"hex": "#ffffff"
|
||||
}
|
||||
},
|
||||
"surface-container-low": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.941,
|
||||
0.953,
|
||||
1.0
|
||||
],
|
||||
"hex": "#f0f3ff"
|
||||
}
|
||||
},
|
||||
"surface-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.906,
|
||||
0.933,
|
||||
0.996
|
||||
],
|
||||
"hex": "#e7eefe"
|
||||
}
|
||||
},
|
||||
"surface-container-high": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.886,
|
||||
0.91,
|
||||
0.973
|
||||
],
|
||||
"hex": "#e2e8f8"
|
||||
}
|
||||
},
|
||||
"surface-container-highest": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.863,
|
||||
0.886,
|
||||
0.953
|
||||
],
|
||||
"hex": "#dce2f3"
|
||||
}
|
||||
},
|
||||
"on-surface": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.082,
|
||||
0.11,
|
||||
0.153
|
||||
],
|
||||
"hex": "#151c27"
|
||||
}
|
||||
},
|
||||
"on-surface-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.325,
|
||||
0.267,
|
||||
0.204
|
||||
],
|
||||
"hex": "#534434"
|
||||
}
|
||||
},
|
||||
"inverse-surface": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.165,
|
||||
0.192,
|
||||
0.239
|
||||
],
|
||||
"hex": "#2a313d"
|
||||
}
|
||||
},
|
||||
"inverse-on-surface": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.922,
|
||||
0.945,
|
||||
1.0
|
||||
],
|
||||
"hex": "#ebf1ff"
|
||||
}
|
||||
},
|
||||
"outline": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.525,
|
||||
0.455,
|
||||
0.38
|
||||
],
|
||||
"hex": "#867461"
|
||||
}
|
||||
},
|
||||
"outline-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.847,
|
||||
0.765,
|
||||
0.678
|
||||
],
|
||||
"hex": "#d8c3ad"
|
||||
}
|
||||
},
|
||||
"surface-tint": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.522,
|
||||
0.325,
|
||||
0.0
|
||||
],
|
||||
"hex": "#855300"
|
||||
}
|
||||
},
|
||||
"primary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.522,
|
||||
0.325,
|
||||
0.0
|
||||
],
|
||||
"hex": "#855300"
|
||||
}
|
||||
},
|
||||
"on-primary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"hex": "#ffffff"
|
||||
}
|
||||
},
|
||||
"primary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.961,
|
||||
0.62,
|
||||
0.043
|
||||
],
|
||||
"hex": "#f59e0b"
|
||||
}
|
||||
},
|
||||
"on-primary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.38,
|
||||
0.231,
|
||||
0.0
|
||||
],
|
||||
"hex": "#613b00"
|
||||
}
|
||||
},
|
||||
"inverse-primary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.725,
|
||||
0.373
|
||||
],
|
||||
"hex": "#ffb95f"
|
||||
}
|
||||
},
|
||||
"secondary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.345,
|
||||
0.745
|
||||
],
|
||||
"hex": "#0058be"
|
||||
}
|
||||
},
|
||||
"on-secondary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"hex": "#ffffff"
|
||||
}
|
||||
},
|
||||
"secondary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.129,
|
||||
0.439,
|
||||
0.894
|
||||
],
|
||||
"hex": "#2170e4"
|
||||
}
|
||||
},
|
||||
"on-secondary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.996,
|
||||
0.988,
|
||||
1.0
|
||||
],
|
||||
"hex": "#fefcff"
|
||||
}
|
||||
},
|
||||
"tertiary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.396,
|
||||
0.545
|
||||
],
|
||||
"hex": "#00658b"
|
||||
}
|
||||
},
|
||||
"on-tertiary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"hex": "#ffffff"
|
||||
}
|
||||
},
|
||||
"tertiary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.102,
|
||||
0.741,
|
||||
1.0
|
||||
],
|
||||
"hex": "#1abdff"
|
||||
}
|
||||
},
|
||||
"on-tertiary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.286,
|
||||
0.4
|
||||
],
|
||||
"hex": "#004966"
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.729,
|
||||
0.102,
|
||||
0.102
|
||||
],
|
||||
"hex": "#ba1a1a"
|
||||
}
|
||||
},
|
||||
"on-error": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"hex": "#ffffff"
|
||||
}
|
||||
},
|
||||
"error-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.855,
|
||||
0.839
|
||||
],
|
||||
"hex": "#ffdad6"
|
||||
}
|
||||
},
|
||||
"on-error-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.576,
|
||||
0.0,
|
||||
0.039
|
||||
],
|
||||
"hex": "#93000a"
|
||||
}
|
||||
},
|
||||
"primary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.867,
|
||||
0.722
|
||||
],
|
||||
"hex": "#ffddb8"
|
||||
}
|
||||
},
|
||||
"primary-fixed-dim": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.725,
|
||||
0.373
|
||||
],
|
||||
"hex": "#ffb95f"
|
||||
}
|
||||
},
|
||||
"on-primary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.165,
|
||||
0.09,
|
||||
0.0
|
||||
],
|
||||
"hex": "#2a1700"
|
||||
}
|
||||
},
|
||||
"on-primary-fixed-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.396,
|
||||
0.243,
|
||||
0.0
|
||||
],
|
||||
"hex": "#653e00"
|
||||
}
|
||||
},
|
||||
"secondary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.847,
|
||||
0.886,
|
||||
1.0
|
||||
],
|
||||
"hex": "#d8e2ff"
|
||||
}
|
||||
},
|
||||
"secondary-fixed-dim": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.678,
|
||||
0.776,
|
||||
1.0
|
||||
],
|
||||
"hex": "#adc6ff"
|
||||
}
|
||||
},
|
||||
"on-secondary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.102,
|
||||
0.259
|
||||
],
|
||||
"hex": "#001a42"
|
||||
}
|
||||
},
|
||||
"on-secondary-fixed-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.263,
|
||||
0.584
|
||||
],
|
||||
"hex": "#004395"
|
||||
}
|
||||
},
|
||||
"tertiary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.773,
|
||||
0.906,
|
||||
1.0
|
||||
],
|
||||
"hex": "#c5e7ff"
|
||||
}
|
||||
},
|
||||
"tertiary-fixed-dim": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.498,
|
||||
0.816,
|
||||
1.0
|
||||
],
|
||||
"hex": "#7fd0ff"
|
||||
}
|
||||
},
|
||||
"on-tertiary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.118,
|
||||
0.176
|
||||
],
|
||||
"hex": "#001e2d"
|
||||
}
|
||||
},
|
||||
"on-tertiary-fixed-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.298,
|
||||
0.416
|
||||
],
|
||||
"hex": "#004c6a"
|
||||
}
|
||||
},
|
||||
"background": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.976,
|
||||
0.976,
|
||||
1.0
|
||||
],
|
||||
"hex": "#f9f9ff"
|
||||
}
|
||||
},
|
||||
"on-background": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.082,
|
||||
0.11,
|
||||
0.153
|
||||
],
|
||||
"hex": "#151c27"
|
||||
}
|
||||
},
|
||||
"surface-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.863,
|
||||
0.886,
|
||||
0.953
|
||||
],
|
||||
"hex": "#dce2f3"
|
||||
}
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"display": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Plus Jakarta Sans",
|
||||
"fontSize": {
|
||||
"value": 44,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 800,
|
||||
"lineHeight": {
|
||||
"value": 52,
|
||||
"unit": "px"
|
||||
},
|
||||
"letterSpacing": {
|
||||
"value": -0.02,
|
||||
"unit": "em"
|
||||
}
|
||||
}
|
||||
},
|
||||
"headline-lg": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Plus Jakarta Sans",
|
||||
"fontSize": {
|
||||
"value": 32,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 700,
|
||||
"lineHeight": {
|
||||
"value": 40,
|
||||
"unit": "px"
|
||||
},
|
||||
"letterSpacing": {
|
||||
"value": -0.01,
|
||||
"unit": "em"
|
||||
}
|
||||
}
|
||||
},
|
||||
"headline-md": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Plus Jakarta Sans",
|
||||
"fontSize": {
|
||||
"value": 24,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 700,
|
||||
"lineHeight": {
|
||||
"value": 32,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"title-lg": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Plus Jakarta Sans",
|
||||
"fontSize": {
|
||||
"value": 20,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 600,
|
||||
"lineHeight": {
|
||||
"value": 28,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"body-lg": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Plus Jakarta Sans",
|
||||
"fontSize": {
|
||||
"value": 18,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 400,
|
||||
"lineHeight": {
|
||||
"value": 28,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"body-md": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Plus Jakarta Sans",
|
||||
"fontSize": {
|
||||
"value": 16,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 400,
|
||||
"lineHeight": {
|
||||
"value": 24,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"label-md": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Plus Jakarta Sans",
|
||||
"fontSize": {
|
||||
"value": 14,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 600,
|
||||
"lineHeight": {
|
||||
"value": 20,
|
||||
"unit": "px"
|
||||
},
|
||||
"letterSpacing": {
|
||||
"value": 0.01,
|
||||
"unit": "em"
|
||||
}
|
||||
}
|
||||
},
|
||||
"label-sm": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Plus Jakarta Sans",
|
||||
"fontSize": {
|
||||
"value": 12,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 500,
|
||||
"lineHeight": {
|
||||
"value": 16,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"rounded": {
|
||||
"sm": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 0.25,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"DEFAULT": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 0.5,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"md": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 0.75,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"lg": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 1,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"xl": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 1.5,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"full": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 9999,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
"base": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 8,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"xs": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 4,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"sm": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 12,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"md": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 24,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"lg": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 40,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"xl": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 64,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"gutter": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 16,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"margin": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 24,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"components": {
|
||||
"button-primary": {
|
||||
"backgroundColor": "{colors.primary}",
|
||||
"textColor": "{colors.on-primary}",
|
||||
"typography": "{typography.label-md}",
|
||||
"rounded": "{rounded.lg}",
|
||||
"padding": "{spacing.md}"
|
||||
},
|
||||
"button-primary-hover": {
|
||||
"backgroundColor": "{colors.primary-container}",
|
||||
"textColor": "{colors.on-primary-container}"
|
||||
},
|
||||
"button-secondary": {
|
||||
"backgroundColor": "{colors.secondary}",
|
||||
"textColor": "{colors.on-secondary}",
|
||||
"typography": "{typography.label-md}",
|
||||
"rounded": "{rounded.lg}",
|
||||
"padding": "{spacing.md}"
|
||||
},
|
||||
"button-secondary-hover": {
|
||||
"backgroundColor": "{colors.secondary-container}",
|
||||
"textColor": "{colors.on-secondary-container}"
|
||||
},
|
||||
"card-profile": {
|
||||
"backgroundColor": "{colors.surface-container-lowest}",
|
||||
"rounded": "{rounded.xl}",
|
||||
"padding": "{spacing.md}"
|
||||
},
|
||||
"card-walk-stat": {
|
||||
"backgroundColor": "{colors.secondary-container}",
|
||||
"textColor": "{colors.on-secondary-container}",
|
||||
"rounded": "{rounded.md}",
|
||||
"padding": "{spacing.sm}"
|
||||
},
|
||||
"input-field": {
|
||||
"backgroundColor": "{colors.surface-container-low}",
|
||||
"textColor": "{colors.on-surface}",
|
||||
"typography": "{typography.body-md}",
|
||||
"rounded": "{rounded.DEFAULT}",
|
||||
"padding": "{spacing.sm}"
|
||||
},
|
||||
"list-item-walker": {
|
||||
"backgroundColor": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"alpha": 0
|
||||
}
|
||||
},
|
||||
"padding": "{spacing.sm}",
|
||||
"rounded": "{rounded.md}"
|
||||
},
|
||||
"list-item-walker-hover": {
|
||||
"backgroundColor": "{colors.surface-container-high}"
|
||||
},
|
||||
"badge-status": {
|
||||
"backgroundColor": "{colors.tertiary-container}",
|
||||
"textColor": "{colors.on-tertiary-container}",
|
||||
"typography": "{typography.label-sm}",
|
||||
"rounded": "{rounded.full}",
|
||||
"padding": "{spacing.xs}"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
// Copyright 2026 Google LLC
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// https://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"surface": "#f9f9ff",
|
||||
"surface-dim": "#d3daea",
|
||||
"surface-bright": "#f9f9ff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-low": "#f0f3ff",
|
||||
"surface-container": "#e7eefe",
|
||||
"surface-container-high": "#e2e8f8",
|
||||
"surface-container-highest": "#dce2f3",
|
||||
"on-surface": "#151c27",
|
||||
"on-surface-variant": "#534434",
|
||||
"inverse-surface": "#2a313d",
|
||||
"inverse-on-surface": "#ebf1ff",
|
||||
"outline": "#867461",
|
||||
"outline-variant": "#d8c3ad",
|
||||
"surface-tint": "#855300",
|
||||
"primary": "#855300",
|
||||
"on-primary": "#ffffff",
|
||||
"primary-container": "#f59e0b",
|
||||
"on-primary-container": "#613b00",
|
||||
"inverse-primary": "#ffb95f",
|
||||
"secondary": "#0058be",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-container": "#2170e4",
|
||||
"on-secondary-container": "#fefcff",
|
||||
"tertiary": "#00658b",
|
||||
"on-tertiary": "#ffffff",
|
||||
"tertiary-container": "#1abdff",
|
||||
"on-tertiary-container": "#004966",
|
||||
"error": "#ba1a1a",
|
||||
"on-error": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error-container": "#93000a",
|
||||
"primary-fixed": "#ffddb8",
|
||||
"primary-fixed-dim": "#ffb95f",
|
||||
"on-primary-fixed": "#2a1700",
|
||||
"on-primary-fixed-variant": "#653e00",
|
||||
"secondary-fixed": "#d8e2ff",
|
||||
"secondary-fixed-dim": "#adc6ff",
|
||||
"on-secondary-fixed": "#001a42",
|
||||
"on-secondary-fixed-variant": "#004395",
|
||||
"tertiary-fixed": "#c5e7ff",
|
||||
"tertiary-fixed-dim": "#7fd0ff",
|
||||
"on-tertiary-fixed": "#001e2d",
|
||||
"on-tertiary-fixed-variant": "#004c6a",
|
||||
"background": "#f9f9ff",
|
||||
"on-background": "#151c27",
|
||||
"surface-variant": "#dce2f3",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Plus Jakarta Sans"],
|
||||
"headline-lg": ["Plus Jakarta Sans"],
|
||||
"headline-md": ["Plus Jakarta Sans"],
|
||||
"title-lg": ["Plus Jakarta Sans"],
|
||||
"body-lg": ["Plus Jakarta Sans"],
|
||||
"body-md": ["Plus Jakarta Sans"],
|
||||
"label-md": ["Plus Jakarta Sans"],
|
||||
"label-sm": ["Plus Jakarta Sans"],
|
||||
},
|
||||
fontSize: {
|
||||
"display": [
|
||||
"44px",
|
||||
{
|
||||
lineHeight: "52px",
|
||||
letterSpacing: "-0.02em",
|
||||
fontWeight: "800",
|
||||
},
|
||||
],
|
||||
"headline-lg": [
|
||||
"32px",
|
||||
{
|
||||
lineHeight: "40px",
|
||||
letterSpacing: "-0.01em",
|
||||
fontWeight: "700",
|
||||
},
|
||||
],
|
||||
"headline-md": [
|
||||
"24px",
|
||||
{
|
||||
lineHeight: "32px",
|
||||
fontWeight: "700",
|
||||
},
|
||||
],
|
||||
"title-lg": [
|
||||
"20px",
|
||||
{
|
||||
lineHeight: "28px",
|
||||
fontWeight: "600",
|
||||
},
|
||||
],
|
||||
"body-lg": [
|
||||
"18px",
|
||||
{
|
||||
lineHeight: "28px",
|
||||
fontWeight: "400",
|
||||
},
|
||||
],
|
||||
"body-md": [
|
||||
"16px",
|
||||
{
|
||||
lineHeight: "24px",
|
||||
fontWeight: "400",
|
||||
},
|
||||
],
|
||||
"label-md": [
|
||||
"14px",
|
||||
{
|
||||
lineHeight: "20px",
|
||||
letterSpacing: "0.01em",
|
||||
fontWeight: "600",
|
||||
},
|
||||
],
|
||||
"label-sm": [
|
||||
"12px",
|
||||
{
|
||||
lineHeight: "16px",
|
||||
fontWeight: "500",
|
||||
},
|
||||
],
|
||||
},
|
||||
borderRadius: {
|
||||
"sm": "0.25rem",
|
||||
"DEFAULT": "0.5rem",
|
||||
"md": "0.75rem",
|
||||
"lg": "1rem",
|
||||
"xl": "1.5rem",
|
||||
"full": "9999px",
|
||||
},
|
||||
spacing: {
|
||||
"base": "8px",
|
||||
"xs": "4px",
|
||||
"sm": "12px",
|
||||
"md": "24px",
|
||||
"lg": "40px",
|
||||
"xl": "64px",
|
||||
"gutter": "16px",
|
||||
"margin": "24px",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,210 @@
|
||||
---
|
||||
name: Totality Festival Design System
|
||||
colors:
|
||||
surface: "#121318"
|
||||
surface-dim: "#121318"
|
||||
surface-bright: "#38393f"
|
||||
surface-container-lowest: "#0d0e13"
|
||||
surface-container-low: "#1a1b21"
|
||||
surface-container: "#1e1f25"
|
||||
surface-container-high: "#292a2f"
|
||||
surface-container-highest: "#34343a"
|
||||
on-surface: "#e3e1e9"
|
||||
on-surface-variant: "#d0c6ab"
|
||||
inverse-surface: "#e3e1e9"
|
||||
inverse-on-surface: "#2f3036"
|
||||
outline: "#999077"
|
||||
outline-variant: "#4d4732"
|
||||
surface-tint: "#e9c400"
|
||||
primary: "#fff6df"
|
||||
on-primary: "#3a3000"
|
||||
primary-container: "#ffd700"
|
||||
on-primary-container: "#705e00"
|
||||
inverse-primary: "#705d00"
|
||||
secondary: "#bdf4ff"
|
||||
on-secondary: "#00363d"
|
||||
secondary-container: "#00e3fd"
|
||||
on-secondary-container: "#00616d"
|
||||
tertiary: "#fcf3ff"
|
||||
on-tertiary: "#3b2754"
|
||||
tertiary-container: "#e7d1ff"
|
||||
on-tertiary-container: "#6b5586"
|
||||
error: "#ffb4ab"
|
||||
on-error: "#690005"
|
||||
error-container: "#93000a"
|
||||
on-error-container: "#ffdad6"
|
||||
primary-fixed: "#ffe16d"
|
||||
primary-fixed-dim: "#e9c400"
|
||||
on-primary-fixed: "#221b00"
|
||||
on-primary-fixed-variant: "#544600"
|
||||
secondary-fixed: "#9cf0ff"
|
||||
secondary-fixed-dim: "#00daf3"
|
||||
on-secondary-fixed: "#001f24"
|
||||
on-secondary-fixed-variant: "#004f58"
|
||||
tertiary-fixed: "#eedbff"
|
||||
tertiary-fixed-dim: "#d6bcf4"
|
||||
on-tertiary-fixed: "#25113e"
|
||||
on-tertiary-fixed-variant: "#523d6c"
|
||||
background: "#121318"
|
||||
on-background: "#e3e1e9"
|
||||
surface-variant: "#34343a"
|
||||
typography:
|
||||
headline-xl:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 72px
|
||||
fontWeight: "700"
|
||||
lineHeight: 80px
|
||||
letterSpacing: -0.04em
|
||||
headline-lg:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 48px
|
||||
fontWeight: "600"
|
||||
lineHeight: 56px
|
||||
letterSpacing: -0.02em
|
||||
headline-md:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 32px
|
||||
fontWeight: "600"
|
||||
lineHeight: 40px
|
||||
letterSpacing: 0em
|
||||
body-lg:
|
||||
fontFamily: Inter
|
||||
fontSize: 18px
|
||||
fontWeight: "400"
|
||||
lineHeight: 28px
|
||||
letterSpacing: 0em
|
||||
body-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: "400"
|
||||
lineHeight: 24px
|
||||
letterSpacing: 0em
|
||||
label-md:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 14px
|
||||
fontWeight: "500"
|
||||
lineHeight: 20px
|
||||
letterSpacing: 0.1em
|
||||
rounded:
|
||||
sm: 0.125rem
|
||||
DEFAULT: 0.25rem
|
||||
md: 0.375rem
|
||||
lg: 0.5rem
|
||||
xl: 0.75rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
unit: 8px
|
||||
container-max: 1280px
|
||||
gutter: 24px
|
||||
margin-mobile: 16px
|
||||
margin-desktop: 64px
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.label-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 12px
|
||||
height: 48px
|
||||
button-primary-hover:
|
||||
backgroundColor: "{colors.primary-fixed}"
|
||||
button-secondary:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.secondary}"
|
||||
typography: "{typography.label-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 12px
|
||||
height: 48px
|
||||
button-secondary-hover:
|
||||
backgroundColor: rgba(0, 227, 253, 0.1)
|
||||
card-glass-level-2:
|
||||
backgroundColor: rgba(52, 52, 58, 0.2)
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.gutter}"
|
||||
card-glass-interactive-hover:
|
||||
backgroundColor: rgba(56, 57, 63, 0.4)
|
||||
input-field:
|
||||
backgroundColor: "{colors.surface-container-lowest}"
|
||||
textColor: "{colors.on-surface}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 12px
|
||||
list-item-hover:
|
||||
backgroundColor: "{colors.surface-container-high}"
|
||||
textColor: "{colors.primary}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 8px
|
||||
hero-headline:
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.headline-xl}"
|
||||
badge-celestial:
|
||||
backgroundColor: "{colors.tertiary-container}"
|
||||
textColor: "{colors.on-tertiary-container}"
|
||||
typography: "{typography.label-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: 4px
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
The design system captures the visceral tension and awe of a solar eclipse. It targets an audience of celestial enthusiasts, music lovers, and seekers of rare experiences. The aesthetic is "Cosmic Premium," blending the stark mystery of deep space with the explosive brilliance of the solar corona.
|
||||
|
||||
To achieve this, the design system utilizes **Glassmorphism** and **High-Contrast** movements. Surfaces appear as translucent obsidian slabs floating over nebula-like gradients, creating a sense of immense depth. High-energy accents represent the "diamond ring" effect, ensuring that while the interface is dark, it feels luminous and alive rather than heavy or muted.
|
||||
|
||||
## Colors
|
||||
|
||||
The palette is anchored in the transition from shadow to light.
|
||||
|
||||
- **Primary (Amber/White-Gold):** Represents the solar corona and the "diamond ring" flash. Used for critical CTAs and high-importance highlights.
|
||||
- **Secondary (Soft Cyan):** Represents the atmospheric thinning and the ethereal glow of the sky during totality. Used for interactive states and secondary information.
|
||||
- **Tertiary (Deep Indigo):** Provides the "midnight" depth, used for subtle atmospheric gradients and deep backgrounds.
|
||||
- **Neutral (Obsidian/Charcoal):** A near-black foundation that ensures the vibrant accents pop with maximum intensity.
|
||||
|
||||
Gradient usage is mandatory: use radial gradients for backgrounds to simulate the circular nature of the eclipse, moving from `Neutral` at the edges to `Tertiary` or `Secondary` in the focal centers.
|
||||
|
||||
## Typography
|
||||
|
||||
This design system uses a dual-font strategy to balance cinematic impact with utility.
|
||||
|
||||
- **Space Grotesk** is the voice of the festival. Its geometric, technical quirks suggest a futuristic and astronomical tone. It should be used for all headers and labels. Large headings should use tight letter spacing to feel "locked" and monumental.
|
||||
- **Inter** provides a neutral, highly legible counterpoint for long-form content and descriptions, ensuring that even in low-light environments, the information remains accessible.
|
||||
|
||||
For a truly cinematic feel, apply a subtle text-shadow or "glow" to `headline-xl` elements when they appear on the darkest backgrounds, using a low-opacity version of the Primary color.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The layout philosophy follows a **Fixed Grid** model for desktop to maintain a prestigious, editorial feel, while transitioning to a fluid model for mobile.
|
||||
|
||||
A 12-column grid is used for desktop layouts, with generous outer margins to simulate the isolation of a celestial body in the void. Spacing is governed by an 8px base unit, but "negative space" is prioritized—elements should be allowed to breathe, echoing the vastness of space. Component groups should use tight internal spacing (e.g., 8px or 16px) but wide external margins (e.g., 64px or 80px) to create distinct "islands" of content.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
Depth in this design system is achieved through **Glassmorphism** and light-based layering rather than traditional drop shadows.
|
||||
|
||||
- **Level 1 (Base):** Deep obsidian/neutral background.
|
||||
- **Level 2 (Panels):** Semi-transparent surfaces (10-20% opacity) with a `20px` backdrop blur. These layers should have a `1px` inner stroke of white at 10% opacity to define the edge, simulating a glass refraction.
|
||||
- **Level 3 (Interactive):** Elements that are hovered or active should emit an "Ambient Glow." This is a soft, diffused shadow tinted with the `Secondary` or `Primary` color, creating the effect of light bleeding from behind the object.
|
||||
|
||||
## Shapes
|
||||
|
||||
The shape language is "Soft-Technical." While the overall feel is geometric, a small corner radius is applied to all components to prevent the UI from feeling too aggressive or "sharp."
|
||||
|
||||
Buttons and input fields should utilize the `rounded-lg` (8px) setting for a modern feel. For specific decorative elements, such as image containers or featured cards, the `rounded-xl` (12px) setting can be used to soften the composition. Circles and perfect arcs are encouraged as supporting graphic elements to mirror the orbital theme of the festival.
|
||||
|
||||
## Components
|
||||
|
||||
### Action Elements
|
||||
|
||||
Buttons utilize `Space Grotesk` for a technical, high-impact feel; the Primary button mimics the "diamond ring" flash with a luminous amber glow on hover. Secondary buttons remain ethereal with a cyan outline, suggesting the sky's transition during totality.
|
||||
|
||||
### Containers & Surfaces
|
||||
|
||||
Cards implement level-2 glassmorphism using a semi-transparent `surface-variant` fill and a fine 1px inner stroke to simulate light refraction on glass edges. For interactive states, cards should expand their "Ambient Glow" using the Secondary Cyan color to indicate focus.
|
||||
|
||||
### Inputs & Selection
|
||||
|
||||
Input fields are anchored in the deepest `surface-container-lowest` to provide maximum contrast for entered text. Focus states use the Secondary Cyan border to maintain the cosmic color story without distracting from content.
|
||||
|
||||
### Typography Application
|
||||
|
||||
`headline-xl` should always be paired with a subtle primary-colored glow when placed on dark backgrounds to ensure it feels "radiant" rather than static. List items use a tighter `rounded-md` corner to differentiate them from larger, more prominent layout containers.
|
||||
@@ -0,0 +1,11 @@
|
||||
# Totality Festival
|
||||
|
||||
A dark, immersive design system for a solar eclipse music festival. The "Cosmic Premium" aesthetic blends deep-space obsidian with explosive corona gold and atmospheric cyan, using glassmorphism and ambient glow effects to capture the visceral drama of totality.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | The complete design system specification in DESIGN.md format, including both structured YAML design tokens (frontmatter) and human-readable style guidance (markdown body). |
|
||||
| `tailwind.config.js` | A Tailwind CSS v3 theme configuration derived from the design tokens in the DESIGN.md frontmatter. Covers colors, typography, border-radius, and spacing. Component tokens are intentionally excluded — Tailwind's utility-first approach handles component styling through composition of these primitives. |
|
||||
| `design_tokens.json` | A [Design Tokens Community Group](https://www.designtokens.org/) JSON file containing all design tokens from the DESIGN.md frontmatter, including component-level tokens. This format is interoperable with tools like Figma, Style Dictionary, and other token pipelines. |
|
||||
@@ -0,0 +1,911 @@
|
||||
{
|
||||
"name": {
|
||||
"$type": "string",
|
||||
"$value": "Totality Festival Design System"
|
||||
},
|
||||
"colors": {
|
||||
"surface": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.071,
|
||||
0.075,
|
||||
0.094
|
||||
],
|
||||
"hex": "#121318"
|
||||
}
|
||||
},
|
||||
"surface-dim": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.071,
|
||||
0.075,
|
||||
0.094
|
||||
],
|
||||
"hex": "#121318"
|
||||
}
|
||||
},
|
||||
"surface-bright": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.22,
|
||||
0.224,
|
||||
0.247
|
||||
],
|
||||
"hex": "#38393f"
|
||||
}
|
||||
},
|
||||
"surface-container-lowest": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.051,
|
||||
0.055,
|
||||
0.075
|
||||
],
|
||||
"hex": "#0d0e13"
|
||||
}
|
||||
},
|
||||
"surface-container-low": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.102,
|
||||
0.106,
|
||||
0.129
|
||||
],
|
||||
"hex": "#1a1b21"
|
||||
}
|
||||
},
|
||||
"surface-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.118,
|
||||
0.122,
|
||||
0.145
|
||||
],
|
||||
"hex": "#1e1f25"
|
||||
}
|
||||
},
|
||||
"surface-container-high": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.161,
|
||||
0.165,
|
||||
0.184
|
||||
],
|
||||
"hex": "#292a2f"
|
||||
}
|
||||
},
|
||||
"surface-container-highest": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.204,
|
||||
0.204,
|
||||
0.227
|
||||
],
|
||||
"hex": "#34343a"
|
||||
}
|
||||
},
|
||||
"on-surface": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.89,
|
||||
0.882,
|
||||
0.914
|
||||
],
|
||||
"hex": "#e3e1e9"
|
||||
}
|
||||
},
|
||||
"on-surface-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.816,
|
||||
0.776,
|
||||
0.671
|
||||
],
|
||||
"hex": "#d0c6ab"
|
||||
}
|
||||
},
|
||||
"inverse-surface": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.89,
|
||||
0.882,
|
||||
0.914
|
||||
],
|
||||
"hex": "#e3e1e9"
|
||||
}
|
||||
},
|
||||
"inverse-on-surface": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.184,
|
||||
0.188,
|
||||
0.212
|
||||
],
|
||||
"hex": "#2f3036"
|
||||
}
|
||||
},
|
||||
"outline": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.6,
|
||||
0.565,
|
||||
0.467
|
||||
],
|
||||
"hex": "#999077"
|
||||
}
|
||||
},
|
||||
"outline-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.302,
|
||||
0.278,
|
||||
0.196
|
||||
],
|
||||
"hex": "#4d4732"
|
||||
}
|
||||
},
|
||||
"surface-tint": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.914,
|
||||
0.769,
|
||||
0.0
|
||||
],
|
||||
"hex": "#e9c400"
|
||||
}
|
||||
},
|
||||
"primary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.965,
|
||||
0.875
|
||||
],
|
||||
"hex": "#fff6df"
|
||||
}
|
||||
},
|
||||
"on-primary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.227,
|
||||
0.188,
|
||||
0.0
|
||||
],
|
||||
"hex": "#3a3000"
|
||||
}
|
||||
},
|
||||
"primary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.843,
|
||||
0.0
|
||||
],
|
||||
"hex": "#ffd700"
|
||||
}
|
||||
},
|
||||
"on-primary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.439,
|
||||
0.369,
|
||||
0.0
|
||||
],
|
||||
"hex": "#705e00"
|
||||
}
|
||||
},
|
||||
"inverse-primary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.439,
|
||||
0.365,
|
||||
0.0
|
||||
],
|
||||
"hex": "#705d00"
|
||||
}
|
||||
},
|
||||
"secondary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.741,
|
||||
0.957,
|
||||
1.0
|
||||
],
|
||||
"hex": "#bdf4ff"
|
||||
}
|
||||
},
|
||||
"on-secondary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.212,
|
||||
0.239
|
||||
],
|
||||
"hex": "#00363d"
|
||||
}
|
||||
},
|
||||
"secondary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.89,
|
||||
0.992
|
||||
],
|
||||
"hex": "#00e3fd"
|
||||
}
|
||||
},
|
||||
"on-secondary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.38,
|
||||
0.427
|
||||
],
|
||||
"hex": "#00616d"
|
||||
}
|
||||
},
|
||||
"tertiary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.988,
|
||||
0.953,
|
||||
1.0
|
||||
],
|
||||
"hex": "#fcf3ff"
|
||||
}
|
||||
},
|
||||
"on-tertiary": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.231,
|
||||
0.153,
|
||||
0.329
|
||||
],
|
||||
"hex": "#3b2754"
|
||||
}
|
||||
},
|
||||
"tertiary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.906,
|
||||
0.82,
|
||||
1.0
|
||||
],
|
||||
"hex": "#e7d1ff"
|
||||
}
|
||||
},
|
||||
"on-tertiary-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.42,
|
||||
0.333,
|
||||
0.525
|
||||
],
|
||||
"hex": "#6b5586"
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.706,
|
||||
0.671
|
||||
],
|
||||
"hex": "#ffb4ab"
|
||||
}
|
||||
},
|
||||
"on-error": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.412,
|
||||
0.0,
|
||||
0.02
|
||||
],
|
||||
"hex": "#690005"
|
||||
}
|
||||
},
|
||||
"error-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.576,
|
||||
0.0,
|
||||
0.039
|
||||
],
|
||||
"hex": "#93000a"
|
||||
}
|
||||
},
|
||||
"on-error-container": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.855,
|
||||
0.839
|
||||
],
|
||||
"hex": "#ffdad6"
|
||||
}
|
||||
},
|
||||
"primary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
1.0,
|
||||
0.882,
|
||||
0.427
|
||||
],
|
||||
"hex": "#ffe16d"
|
||||
}
|
||||
},
|
||||
"primary-fixed-dim": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.914,
|
||||
0.769,
|
||||
0.0
|
||||
],
|
||||
"hex": "#e9c400"
|
||||
}
|
||||
},
|
||||
"on-primary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.133,
|
||||
0.106,
|
||||
0.0
|
||||
],
|
||||
"hex": "#221b00"
|
||||
}
|
||||
},
|
||||
"on-primary-fixed-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.329,
|
||||
0.275,
|
||||
0.0
|
||||
],
|
||||
"hex": "#544600"
|
||||
}
|
||||
},
|
||||
"secondary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.612,
|
||||
0.941,
|
||||
1.0
|
||||
],
|
||||
"hex": "#9cf0ff"
|
||||
}
|
||||
},
|
||||
"secondary-fixed-dim": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.855,
|
||||
0.953
|
||||
],
|
||||
"hex": "#00daf3"
|
||||
}
|
||||
},
|
||||
"on-secondary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.122,
|
||||
0.141
|
||||
],
|
||||
"hex": "#001f24"
|
||||
}
|
||||
},
|
||||
"on-secondary-fixed-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.31,
|
||||
0.345
|
||||
],
|
||||
"hex": "#004f58"
|
||||
}
|
||||
},
|
||||
"tertiary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.933,
|
||||
0.859,
|
||||
1.0
|
||||
],
|
||||
"hex": "#eedbff"
|
||||
}
|
||||
},
|
||||
"tertiary-fixed-dim": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.839,
|
||||
0.737,
|
||||
0.957
|
||||
],
|
||||
"hex": "#d6bcf4"
|
||||
}
|
||||
},
|
||||
"on-tertiary-fixed": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.145,
|
||||
0.067,
|
||||
0.243
|
||||
],
|
||||
"hex": "#25113e"
|
||||
}
|
||||
},
|
||||
"on-tertiary-fixed-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.322,
|
||||
0.239,
|
||||
0.424
|
||||
],
|
||||
"hex": "#523d6c"
|
||||
}
|
||||
},
|
||||
"background": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.071,
|
||||
0.075,
|
||||
0.094
|
||||
],
|
||||
"hex": "#121318"
|
||||
}
|
||||
},
|
||||
"on-background": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.89,
|
||||
0.882,
|
||||
0.914
|
||||
],
|
||||
"hex": "#e3e1e9"
|
||||
}
|
||||
},
|
||||
"surface-variant": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.204,
|
||||
0.204,
|
||||
0.227
|
||||
],
|
||||
"hex": "#34343a"
|
||||
}
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"headline-xl": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Space Grotesk",
|
||||
"fontSize": {
|
||||
"value": 72,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 700,
|
||||
"lineHeight": {
|
||||
"value": 80,
|
||||
"unit": "px"
|
||||
},
|
||||
"letterSpacing": {
|
||||
"value": -0.04,
|
||||
"unit": "em"
|
||||
}
|
||||
}
|
||||
},
|
||||
"headline-lg": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Space Grotesk",
|
||||
"fontSize": {
|
||||
"value": 48,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 600,
|
||||
"lineHeight": {
|
||||
"value": 56,
|
||||
"unit": "px"
|
||||
},
|
||||
"letterSpacing": {
|
||||
"value": -0.02,
|
||||
"unit": "em"
|
||||
}
|
||||
}
|
||||
},
|
||||
"headline-md": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Space Grotesk",
|
||||
"fontSize": {
|
||||
"value": 32,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 600,
|
||||
"lineHeight": {
|
||||
"value": 40,
|
||||
"unit": "px"
|
||||
},
|
||||
"letterSpacing": {
|
||||
"value": 0,
|
||||
"unit": "em"
|
||||
}
|
||||
}
|
||||
},
|
||||
"body-lg": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": {
|
||||
"value": 18,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 400,
|
||||
"lineHeight": {
|
||||
"value": 28,
|
||||
"unit": "px"
|
||||
},
|
||||
"letterSpacing": {
|
||||
"value": 0,
|
||||
"unit": "em"
|
||||
}
|
||||
}
|
||||
},
|
||||
"body-md": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": {
|
||||
"value": 16,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 400,
|
||||
"lineHeight": {
|
||||
"value": 24,
|
||||
"unit": "px"
|
||||
},
|
||||
"letterSpacing": {
|
||||
"value": 0,
|
||||
"unit": "em"
|
||||
}
|
||||
}
|
||||
},
|
||||
"label-md": {
|
||||
"$type": "typography",
|
||||
"$value": {
|
||||
"fontFamily": "Space Grotesk",
|
||||
"fontSize": {
|
||||
"value": 14,
|
||||
"unit": "px"
|
||||
},
|
||||
"fontWeight": 500,
|
||||
"lineHeight": {
|
||||
"value": 20,
|
||||
"unit": "px"
|
||||
},
|
||||
"letterSpacing": {
|
||||
"value": 0.1,
|
||||
"unit": "em"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"rounded": {
|
||||
"sm": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 0.125,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"DEFAULT": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 0.25,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"md": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 0.375,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"lg": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 0.5,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"xl": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 0.75,
|
||||
"unit": "rem"
|
||||
}
|
||||
},
|
||||
"full": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 9999,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
"unit": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 8,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"container-max": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 1280,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"gutter": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 24,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"margin-mobile": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 16,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"margin-desktop": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 64,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"components": {
|
||||
"button-primary": {
|
||||
"backgroundColor": "{colors.primary}",
|
||||
"textColor": "{colors.on-primary}",
|
||||
"typography": "{typography.label-md}",
|
||||
"rounded": "{rounded.lg}",
|
||||
"padding": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 12,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"height": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 48,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"button-primary-hover": {
|
||||
"backgroundColor": "{colors.primary-fixed}"
|
||||
},
|
||||
"button-secondary": {
|
||||
"backgroundColor": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"alpha": 0
|
||||
}
|
||||
},
|
||||
"textColor": "{colors.secondary}",
|
||||
"typography": "{typography.label-md}",
|
||||
"rounded": "{rounded.lg}",
|
||||
"padding": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 12,
|
||||
"unit": "px"
|
||||
}
|
||||
},
|
||||
"height": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 48,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"button-secondary-hover": {
|
||||
"backgroundColor": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.0,
|
||||
0.89,
|
||||
0.992
|
||||
],
|
||||
"alpha": 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
"card-glass-level-2": {
|
||||
"backgroundColor": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.204,
|
||||
0.204,
|
||||
0.227
|
||||
],
|
||||
"alpha": 0.2
|
||||
}
|
||||
},
|
||||
"rounded": "{rounded.xl}",
|
||||
"padding": "{spacing.gutter}"
|
||||
},
|
||||
"card-glass-interactive-hover": {
|
||||
"backgroundColor": {
|
||||
"$type": "color",
|
||||
"$value": {
|
||||
"colorSpace": "srgb",
|
||||
"components": [
|
||||
0.22,
|
||||
0.224,
|
||||
0.247
|
||||
],
|
||||
"alpha": 0.4
|
||||
}
|
||||
}
|
||||
},
|
||||
"input-field": {
|
||||
"backgroundColor": "{colors.surface-container-lowest}",
|
||||
"textColor": "{colors.on-surface}",
|
||||
"typography": "{typography.body-md}",
|
||||
"rounded": "{rounded.lg}",
|
||||
"padding": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 12,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"list-item-hover": {
|
||||
"backgroundColor": "{colors.surface-container-high}",
|
||||
"textColor": "{colors.primary}",
|
||||
"rounded": "{rounded.md}",
|
||||
"padding": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 8,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"hero-headline": {
|
||||
"textColor": "{colors.primary}",
|
||||
"typography": "{typography.headline-xl}"
|
||||
},
|
||||
"badge-celestial": {
|
||||
"backgroundColor": "{colors.tertiary-container}",
|
||||
"textColor": "{colors.on-tertiary-container}",
|
||||
"typography": "{typography.label-md}",
|
||||
"rounded": "{rounded.full}",
|
||||
"padding": {
|
||||
"$type": "dimension",
|
||||
"$value": {
|
||||
"value": 4,
|
||||
"unit": "px"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
// Copyright 2026 Google LLC
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// https://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"surface": "#121318",
|
||||
"surface-dim": "#121318",
|
||||
"surface-bright": "#38393f",
|
||||
"surface-container-lowest": "#0d0e13",
|
||||
"surface-container-low": "#1a1b21",
|
||||
"surface-container": "#1e1f25",
|
||||
"surface-container-high": "#292a2f",
|
||||
"surface-container-highest": "#34343a",
|
||||
"on-surface": "#e3e1e9",
|
||||
"on-surface-variant": "#d0c6ab",
|
||||
"inverse-surface": "#e3e1e9",
|
||||
"inverse-on-surface": "#2f3036",
|
||||
"outline": "#999077",
|
||||
"outline-variant": "#4d4732",
|
||||
"surface-tint": "#e9c400",
|
||||
"primary": "#fff6df",
|
||||
"on-primary": "#3a3000",
|
||||
"primary-container": "#ffd700",
|
||||
"on-primary-container": "#705e00",
|
||||
"inverse-primary": "#705d00",
|
||||
"secondary": "#bdf4ff",
|
||||
"on-secondary": "#00363d",
|
||||
"secondary-container": "#00e3fd",
|
||||
"on-secondary-container": "#00616d",
|
||||
"tertiary": "#fcf3ff",
|
||||
"on-tertiary": "#3b2754",
|
||||
"tertiary-container": "#e7d1ff",
|
||||
"on-tertiary-container": "#6b5586",
|
||||
"error": "#ffb4ab",
|
||||
"on-error": "#690005",
|
||||
"error-container": "#93000a",
|
||||
"on-error-container": "#ffdad6",
|
||||
"primary-fixed": "#ffe16d",
|
||||
"primary-fixed-dim": "#e9c400",
|
||||
"on-primary-fixed": "#221b00",
|
||||
"on-primary-fixed-variant": "#544600",
|
||||
"secondary-fixed": "#9cf0ff",
|
||||
"secondary-fixed-dim": "#00daf3",
|
||||
"on-secondary-fixed": "#001f24",
|
||||
"on-secondary-fixed-variant": "#004f58",
|
||||
"tertiary-fixed": "#eedbff",
|
||||
"tertiary-fixed-dim": "#d6bcf4",
|
||||
"on-tertiary-fixed": "#25113e",
|
||||
"on-tertiary-fixed-variant": "#523d6c",
|
||||
"background": "#121318",
|
||||
"on-background": "#e3e1e9",
|
||||
"surface-variant": "#34343a",
|
||||
},
|
||||
fontFamily: {
|
||||
"headline-xl": ["Space Grotesk"],
|
||||
"headline-lg": ["Space Grotesk"],
|
||||
"headline-md": ["Space Grotesk"],
|
||||
"body-lg": ["Inter"],
|
||||
"body-md": ["Inter"],
|
||||
"label-md": ["Space Grotesk"],
|
||||
},
|
||||
fontSize: {
|
||||
"headline-xl": [
|
||||
"72px",
|
||||
{
|
||||
lineHeight: "80px",
|
||||
letterSpacing: "-0.04em",
|
||||
fontWeight: "700",
|
||||
},
|
||||
],
|
||||
"headline-lg": [
|
||||
"48px",
|
||||
{
|
||||
lineHeight: "56px",
|
||||
letterSpacing: "-0.02em",
|
||||
fontWeight: "600",
|
||||
},
|
||||
],
|
||||
"headline-md": [
|
||||
"32px",
|
||||
{
|
||||
lineHeight: "40px",
|
||||
letterSpacing: "0em",
|
||||
fontWeight: "600",
|
||||
},
|
||||
],
|
||||
"body-lg": [
|
||||
"18px",
|
||||
{
|
||||
lineHeight: "28px",
|
||||
letterSpacing: "0em",
|
||||
fontWeight: "400",
|
||||
},
|
||||
],
|
||||
"body-md": [
|
||||
"16px",
|
||||
{
|
||||
lineHeight: "24px",
|
||||
letterSpacing: "0em",
|
||||
fontWeight: "400",
|
||||
},
|
||||
],
|
||||
"label-md": [
|
||||
"14px",
|
||||
{
|
||||
lineHeight: "20px",
|
||||
letterSpacing: "0.1em",
|
||||
fontWeight: "500",
|
||||
},
|
||||
],
|
||||
},
|
||||
borderRadius: {
|
||||
"sm": "0.125rem",
|
||||
"DEFAULT": "0.25rem",
|
||||
"md": "0.375rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px",
|
||||
},
|
||||
spacing: {
|
||||
"unit": "8px",
|
||||
"container-max": "1280px",
|
||||
"gutter": "24px",
|
||||
"margin-mobile": "16px",
|
||||
"margin-desktop": "64px",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user