Remixes of axcel.cloud
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Axcel
description: |
Axcel Studio presents a refined, professional interface designed for creative
production. The visual language balances warmth with clarity, employing a
sophisticated earthy accent palette (#A8895A) against cool, neutral tones. The
design prioritizes content prominence through generous whitespace and subtle
depth, creating a calm, focused environment ideal for complex creative
workflows. Typography is precise and hierarchical, with consistent spacing
that guides users through multi-step processes. The overall atmosphere is one
of approachable sophistication—modern enough for a tech-forward AI platform,
yet warm enough to feel human-centered.
source:
url: "https://axcel.cloud/video/text-to-video"
pagesAnalyzed: 1
extractedAt: 2026-10-16
tokensMeasured: true
colors:
primary: "#A8895A"
link: "#241D12"
canvas: "#FFFFFF"
on-primary: "#101012"
ink: "#101012"
body: "#6B6B74"
muted: "#9A9AA3"
hairline: "#E4E4E7"
neutral-1: "#ECECEF"
typography:
heading:
fontFamily: system-ui
fontSize: 17px
fontWeight: 600
lineHeight: 1.5
letterSpacing: -0.42px
body-xl:
fontFamily: system-ui
fontSize: 15px
fontWeight: 600
lineHeight: 1.5
letterSpacing: -0.15px
body-lg:
fontFamily: system-ui
fontSize: 13.5px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
body-md:
fontFamily: system-ui
fontSize: 13px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: system-ui
fontSize: 12.5px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-xs:
fontFamily: system-ui
fontSize: 11px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0.55px
textTransform: uppercase
button-lg:
fontFamily: system-ui
fontSize: 14px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
button-md:
fontFamily: system-ui
fontSize: 13px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
button-sm:
fontFamily: system-ui
fontSize: 12.5px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
button-xs:
fontFamily: system-ui
fontSize: 11.5px
fontWeight: 600
lineHeight: 1
letterSpacing: 0px
label-md:
fontFamily: system-ui
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
label-sm:
fontFamily: system-ui
fontSize: 13.5px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
label-xs:
fontFamily: system-ui
fontSize: 12px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
caption-sm:
fontFamily: system-ui
fontSize: 11.5px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption-xs:
fontFamily: system-ui
fontSize: 11px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
rounded:
none: 0px
xs: 6px
sm: 8px
md: 12px
lg: 16px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
elevationStrategy: single-tier
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F7F7F7"
surfaceRaised: "#EEEEEE"
text: "#101012"
textMuted: "#6B6B74"
border: "#E4E4E7"
accent: "#A8895A"
accentFg: "#000000"
focusRing: "#A8895A"
elevation: shadow
dark:
bg: "#11100E"
surface: "#1F1E1C"
surfaceRaised: "#2B2A29"
text: "#FCFAF8"
textMuted: "#A3A19F"
border: "#373635"
accent: "#A8895A"
accentFg: "#0B0B0C"
focusRing: "#A8895A"
elevation: "border+surface"
components:
button-primary:
typography: "{typography.button-lg}"
textColor: "{colors.link}"
height: 45px
padding: "12px 16px 12px 16px"
rounded: "{rounded.md}"
backgroundColor: "{colors.primary}"
button-filled:
typography: "{typography.body-lg}"
textColor: "{colors.primary}"
height: 36.25px
padding: "8px 12px 8px 12px"
rounded: "{rounded.sm}"
backgroundColor: "rgb(240, 233, 217)"
button-primary-sm:
typography: "{typography.body-md}"
textColor: "{colors.link}"
height: 35.5px
padding: "8px 12px 8px 12px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.primary}"
button-filled-sm:
typography: "{typography.button-md}"
textColor: "{colors.ink}"
height: 31.5px
padding: "6px 14px 6px 14px"
rounded: "{rounded.xs}"
backgroundColor: "rgb(242, 242, 244)"
button-outline:
textColor: "{colors.ink}"
border: "1px solid {colors.hairline}"
height: 37.5px
padding: "8px 12px 8px 12px"
fontSize: 13px
fontFamily: system-ui
fontWeight: 400
lineHeight: 1.5
rounded: "{rounded.sm}"
backgroundColor: "{colors.canvas}"
navigation:
typography: "{typography.label-md}"
textColor: "{colors.ink}"
padding: "0px 12px 24px 12px"
link:
typography: "{typography.body-lg}"
textColor: "{colors.body}"
padding: "8px 12px 8px 12px"
rounded: "{rounded.sm}"
link-sm:
typography: "{typography.label-md}"
textColor: "{colors.ink}"
states:
input-hover:
target: input
state: hover
boxShadow: none
input-focus:
target: input
state: focus
outline: none
other-hover:
target: other
state: hover
borderColor: "color-mix(in srgb, oklch(0.637 0.237 25.331) 60%, transparent)"
other-disabled:
target: other
state: disabled
opacity: 0.5
button-hover:
target: button
state: hover
filter: "brightness(1.08)"
button-active:
target: button
state: active
transform: "scale(0.98)"
button-disabled:
target: button
state: disabled
opacity: 0.6
other-active:
target: other
state: active
transform: "scale(0.95)"
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: true
headingPx: 17
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 720
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: true
headingPx: 17
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 1024
gridColumns: 2
navLinksVisible: 7
menuToggleVisible: false
headingPx: 17
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1280
gridColumns: 2
navLinksVisible: 7
menuToggleVisible: false
headingPx: 17
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1440
gridColumns: 2
navLinksVisible: 7
menuToggleVisible: false
headingPx: 17
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 33
gradientsFound: 0
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Axcel Studio presents a refined, professional interface designed for creative production. The visual language balances warmth with clarity, employing a sophisticated earthy accent palette ({colors.primary} — #A8895A) against cool, neutral tones. The design prioritizes content prominence through generous whitespace and subtle depth, creating a calm, focused environment ideal for complex creative workflows. Typography is precise and hierarchical, with consistent spacing that guides users through multi-step processes. The overall atmosphere is one of approachable sophistication—modern enough for a tech-forward AI platform, yet warm enough to feel human-centered.
Key Characteristics
{colors.primary} — #A8895A): Primary call-to-action buttons, active states, brand accent highlights, and interactive focus elements. Warm, earthy tone that conveys trust and creativity.{colors.link} — #241D12): Inline hyperlink text colour, providing high contrast for discoverability.{colors.canvas} — #FFFFFF): Default page and card background; primary surface for all content.{colors.on-primary} — #101012): Primary text colour for headings, labels on brand surfaces, and high-contrast interface labels.{colors.body} — #6B6B74): Body copy and secondary text, offering softer contrast than ink while maintaining readability.{colors.muted} — #9A9AA3): Tertiary text, captions, secondary descriptions, and helper text. Used sparingly to de-emphasize supporting information.{colors.hairline} — #E4E4E7): 1px borders, dividers, input field borders, and subtle structural lines.{colors.neutral-1} — #ECECEF): Decorative surface; secondary background for cards and containers when distinction from canvas is needed.System font stack: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Heading | system-ui | 17px | 600 | 1.5 | -0.42px | Primary page titles and major sections; tight tracking for presence |
| Body XL | system-ui | 15px | 600 | 1.5 | -0.15px | Emphasized body text and secondary headings |
| Body MD | system-ui | 13px | 600 | 1.5 | 0px | Semibold body for labels and card titles |
| Body LG | system-ui | 13.5px | 500 | 1.5 | 0px | Links and medium-weight emphasis |
| Body SM | system-ui | 12.5px | 400 | 1.5 | 0px | Standard body copy; primary reading text |
| Body XS | system-ui | 11px | 500 | 1.5 | 0.55px | Uppercase labels and tags; distributed tracking for emphasis |
| Label MD | system-ui | 16px | 400 | 1.5 | 0px | Form labels and input descriptors |
| Label SM | system-ui | 13.5px | 400 | 1.63 | 0px | Smaller form labels and input hints |
| Label XS | system-ui | 12px | 500 | 1.5 | 0px | Compact labels for badges and small controls |
| Caption SM | system-ui | 11.5px | 400 | 1.5 | 0px | Supporting captions and auxiliary text |
| Caption XS | system-ui | 11px | 700 | 1.5 | 0px | Bold captions and prominent metadata |
| Button LG | system-ui | 14px | 600 | 1.5 | 0px | Primary and large action buttons |
| Button MD | system-ui | 13px | 500 | 1.5 | 0px | Standard medium buttons |
| Button SM | system-ui | 12.5px | 500 | 1.5 | 0px | Small secondary buttons |
| Button XS | system-ui | 11.5px | 600 | 1 | 0px | Minimal-height tertiary buttons |
Primary Large
{colors.primary} (#A8895A){colors.on-primary} (#101012){typography.button-lg} (14px, 600, line-height 1.5){rounded.md} (12px)filter: brightness(1.08), box-shadow: 0 6px 20px -8px var(--accent)transform: scale(0.98)opacity: 0.6Primary Small
{colors.primary} (#A8895A){colors.on-primary} (#101012){typography.button-md} (13px, 600, line-height 1.5){rounded.sm} (8px)filter: brightness(1.08), box-shadow: 0 6px 20px -8px var(--accent)transform: scale(0.99)opacity: 0.5Filled
#F0E9D9 (desaturated brand accent){colors.primary} (#A8895A){typography.body-lg} (13.5px, 500, line-height 1.5){rounded.sm} (8px)Filled Small
#F2F2F4 (light neutral){colors.on-primary} (#101012){typography.button-md} (13px, 500, line-height 1.5){rounded.xs} (6px)Outline
{colors.canvas} (#FFFFFF){colors.on-primary} (#101012){typography.button-md} (13px, 400, line-height 1.5){rounded.sm} (8px){colors.hairline} (#E4E4E7)border-color: var(--text-faint)transform: scale(0.95)Standard Card
{colors.canvas} (#FFFFFF){colors.hairline} (#E4E4E7){rounded.md} (12px)rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px{spacing.lg} (20px) or {spacing.xl} (24px) depending on content densityText Input
{colors.canvas} (#FFFFFF){colors.on-primary} (#101012){typography.label-sm} (13.5px, 400, line-height 1.63){rounded.sm} (8px){colors.hairline} (#E4E4E7)box-shadow: var(--ng-select-container-hover-shadow, 0 1px 0 rgba(0, 0, 0, .06))outline: none, preserve border, internal focus styling handled by select componentPlaceholder Text
{colors.muted} (#9A9AA3){typography.label-sm} (13.5px, 400, line-height 1.63)Dropdown / Select
{rounded.sm} (8px)#333333 (ng-select default)Sidebar Navigation
{colors.on-primary} (#101012){typography.label-md} (16px, 400, line-height 1.5){rounded.none} (0px)color: var(--text) (emphasis highlight)Body Link
{colors.body} (#6B6B74){typography.body-lg} (13.5px, 500, line-height 1.5)color: var(--text) or primary accentSmall Link
{colors.on-primary} (#101012){typography.label-md} (16px, 400, line-height 1.5)Standard Badge
{colors.neutral-1} (#ECECEF){colors.on-primary} (#101012){rounded.lg} (16px){typography.label-xs} (12px, 500, line-height 1.5)border-color: var(--accent) (brand accent appears on border)Base unit: {spacing.xxs} = 4px
Scale:
{spacing.xxs} = 4px{spacing.xs} = 8px{spacing.sm} = 12px{spacing.md} = 16px (primary horizontal padding for most containers){spacing.lg} = 20px (generous component padding){spacing.xl} = 24px (large section spacing and sidebar bottom padding)Usage Context
Whitespace is generous and intentional, creating clear visual hierarchies and breathing room around interactive elements. Spacing scales with content importance: secondary and tertiary text receive tighter line-height and tracking, while primary actions and headings receive tighter tracking (negative letter-spacing) to reinforce hierarchy without increasing spacing. Containers use consistent {spacing.lg} (20px) or {spacing.xl} (24px) padding to frame content, while text-to-element spacing defaults to {spacing.md} (16px).
{rounded.none} = 0px — Navigation elements, sharp structural divisions{rounded.xs} = 6px — Small pill buttons (filled small variant){rounded.sm} = 8px — Input fields, medium buttons, standard controls{rounded.md} = 12px — Primary buttons, cards, main containers{rounded.lg} = 16px — Badges and decorative chips{rounded.full} = 9999px — Avatar circles and pill badges| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no stroke | Body text, navigation, flat backgrounds |
| Raised | 1px solid {colors.hairline} + box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px | Cards, containers, inputs, modals |
| Interactive Hover | box-shadow: 0 6px 20px -8px var(--accent) + filter: brightness(1.08) | Button hover state |
Shadow Philosophy
The design employs a color-blocking and single-tier shadow strategy. Depth is primarily achieved through surface colour contrast (white canvas, neutral backgrounds) rather than stacked shadows. The single shadow applied to cards is a subtle two-layer composition: a 1px base shadow (rgba(0, 0, 0, 0.1) 0px 1px 3px 0px) for material separation, and a tighter 1px blur at -1px offset for fine detail. Interactive elements—primarily buttons—elevate on hover with a softer, warmer shadow tinted by the brand accent, creating a gentle lift without visual heaviness.
No explicit z-index scale was measured in component CSS; stacking appears to follow browser default layering (positioned elements, modals, tooltips managed implicitly). Assume standard front-end conventions: modals and dropdowns above content, sticky headers above scrolling content.
{colors.primary} (#A8895A) for all primary call-to-action buttons and active states to maintain brand consistency.{rounded.md} for visual softness).{spacing.md} (16px) as the default horizontal padding for most containers; use {spacing.lg} (20px) or {spacing.xl} (24px) for generous card padding.{typography.button-lg} (14px, 600 weight) for primary buttons and {typography.button-md} (13px, 500) for secondary actions to differentiate interaction importance.sm shadow only for raised cards and containers, never on text or small elements.{spacing.md} (16px) vertical spacing for clarity.{colors.hairline} (#E4E4E7) for all 1px borders and dividers to maintain visual subtlety.{colors.link} (#241D12) for buttons or large elements; reserve it for inline hyperlinks only.{rounded.full} (9999px) on interactive elements outside of avatars or pure decorative chips.{colors.primary}) for status states (error, success, warning). The site does not expose a semantic colour ramp; stick to neutral and primary only.{spacing.xl} (24px) between logical sections unless creating a major visual break.{typography.body-xs}.{colors.body} or {colors.muted} for interactive elements; reserve neutrals for static text only.| Viewport | Content Width | Grid Cols | Nav Links Visible | Menu Toggle | Heading Size | Body Size | Section Padding-X |
|---|---|---|---|---|---|---|---|
| 375px (Mobile) | 343px | 1 | 0 | Yes | 17px | 12.5px | 0px |
| 768px (Tablet) | 720px | 1 | 0 | Yes | 17px | 12.5px | 0px |
| 1024px (Desktop) | 1024px | 2 | 7 links | No | 17px | 12.5px | 0px |
| 1280px | 1280px | 2 | 7 links | No | 17px | 12.5px | 0px |
| 1440px | 1440px | 2 | 7 links | No | 17px | 12.5px | 0px |
Key Transitions
{spacing.md} (16px) minimum for non-adjacent, {spacing.sm} (12px) for grouped controlsMobile (375px–768px)
Tablet (768px)
Desktop (1024px+)
{colors.primary} — #A8895A){colors.on-primary} — #101012){colors.body} — #6B6B74){colors.muted} — #9A9AA3){colors.hairline} — #E4E4E7){colors.canvas} — #FFFFFF){colors.link} — #241D12){colors.neutral-1} — #ECECEF)Button Hierarchy: Use {colors.primary} with {typography.button-lg} (14px, 600, {rounded.md} 12px) for primary CTAs; reserve {typography.button-md} (13px, 500, {rounded.sm} 8px) for secondary actions. Apply filter: brightness(1.08) on hover and transform: scale(0.98) on active for tactile feedback.
Text Contrast: All body text uses {colors.body} (#6B6B74); headings and labels use {colors.on-primary} (#101012). Never invert text contrast on coloured backgrounds unless explicitly measured; background-aware contrast is not guaranteed.
Input Fields: Always apply {rounded.sm} (8px) border-radius and {colors.hairline} (#E4E4E7) 1px border. Padding: 8px 12px minimum. Typography: {typography.label-sm} (13.5px, 400) for labels; same for input text. Hover: subtle shadow shift.
Spacing Foundation: Base all layout spacing on the 4px unit ({spacing.xxs}). Primary padding: {spacing.md} (16px). Section gaps: {spacing.lg} (20px). Cards: {spacing.lg} or {spacing.xl} (24px) internal padding. Never break the scale.
Depth & Shadow: Single shadow tier—apply only to cards and modals. Use rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px for raised elements. Interactive hovers elevate with 0 6px 20px -8px var(--accent) for warmth and brand connection.
Typography Precision: Negative letter-spacing is a defining trait—apply -0.42px to headings and -0.15px to body-xl for visual authority. All other text: 0px. Uppercase labels: +0.55px for distributed emphasis. Never round or omit letter-spacing; it is core to hierarchy.
Responsive Breakpoint: Sidebar + hamburger toggle collapses at 1024px. Below that, single column; at 1024px+, unlock two-column layouts. No responsive typography resizing observed—all text sizes remain fixed.
Disabled States: Use opacity: 0.5 to 0.6 for disabled buttons and inputs. Cursor: not-allowed. Never remove disabled elements visually; always signify unavailability subtly.
Card & Container Pattern: Border-radius {rounded.md} (12px), border {colors.hairline} 1px, padding {spacing.lg} minimum. Background: {colors.canvas} (#FFFFFF). Apply subtle shadow. Never use decorative-only neutral surfaces (#ECECEF) for primary content; reserve for secondary containers or intentional contrast.
Form Group Spacing: Stack labels ({typography.label-md} 16px, 400) above inputs with {spacing.sm} (12px) gap. Between form groups: {spacing.md} (16px). Between sections: {spacing.lg} (20px). Maintain rhythm and breathing room for clarity.
{colors.primary} or neutral tones; do not invent a colour ramp.{colors.neutral-1} (#ECECEF) has no measured semantic role and appears only in decorative contexts. Use it sparingly for secondary surfaces or intentional background contrast.var(--ring) in extracted hover rules, but the ring colour value was not extracted. Use a high-contrast outline (e.g., 2px solid brand accent or ink) as a fallback.tokens:
colors:
primary:
id: colors.primary
value: "#A8895A"
role: "Primary / Brand"
link:
id: colors.link
value: "#241D12"
role: "Link"
canvas:
id: colors.canvas
value: "#FFFFFF"
role: "Canvas"
on-primary:
id: colors.on-primary
value: "#101012"
role: "Ink / On Primary"
body:
id: colors.body
value: "#6B6B74"
role: "Body"
muted:
id: colors.muted
value: "#9A9AA3"
role: "Muted"
hairline:
id: colors.hairline
value: "#E4E4E7"
role: "Hairline"
neutral-1:
id: colors.neutral-1
value: "#ECECEF"
role: "Decorative Neutral"
typography:
heading:
id: typography.heading
size: 17px
weight: 600
lineHeight: 1.5
letterSpacing: "-0.42px"
measuredOn: "h1"
body-xs:
id: typography.body-xs
size: 11px
weight: 500
lineHeight: 1.5
letterSpacing: "0.55px"
textTransform: uppercase
measuredOn: "body"
body-lg:
id: typography.body-lg
size: 13.5px
weight: 500
lineHeight: 1.5
letterSpacing: "0px"
measuredOn: "link"
button-md:
id: typography.button-md
size: 13px
weight: 500
lineHeight: 1.5
letterSpacing: "0px"
measuredOn: "button"
label-md:
id: typography.label-md
size: 16px
weight: 400
lineHeight: 1.5
letterSpacing: "0px"
measuredOn: "label"
label-sm:
id: typography.label-sm
size: 13.5px
weight: 400
lineHeight: 1.63
letterSpacing: "0px"
measuredOn: "input"
button-lg:
id: typography.button-lg
size: 14px
weight: 600
lineHeight: 1.5
letterSpacing: "0px"
measuredOn: "button"
body-sm:
id: typography.body-sm
size: 12.5px
weight: 400
lineHeight: 1.5
letterSpacing: "0px"
measuredOn: "body"
caption-sm:
id: typography.caption-sm
size: 11.5px
weight: 400
lineHeight: 1.5
letterSpacing: "0px"
measuredOn: "caption"
label-xs:
id: typography.label-xs
size: 12px
weight: 500
lineHeight: 1.5
letterSpacing: "0px"
measuredOn: "label"
body-xl:
id: typography.body-xl
size: 15px
weight: 600
lineHeight: 1.5
letterSpacing: "-0.15px"
measuredOn: "body"
button-sm:
id: typography.button-sm
size: 12.5px
weight: 500
lineHeight: 1.5
letterSpacing: "0px"
measuredOn: "button"
button-xs:
id: typography.button-xs
size: 11.5px
weight: 600
lineHeight: 1
letterSpacing: "0px"
measuredOn: "button"
caption-xs:
id: typography.caption-xs
size: 11px
weight: 700
lineHeight: 1.5
letterSpacing: "0px"
measuredOn: "caption"
body-md:
id: typography.body-md
size: 13px
weight: 600
lineHeight: 1.5
letterSpacing: "0px"
measuredOn: "body"
spacing:
xxs:
id: spacing.xxs
value: 4px
xs:
id: spacing.xs
value: 8px
sm:
id: spacing.sm
value: 12px
md:
id: spacing.md
value: 16px
lg:
id: spacing.lg
value: 20px
xl:
id: spacing.xl
value: 24px
rounded:
none:
id: rounded.none
value: 0px
xs:
id: rounded.xs
value: 6px
sm:
id: rounded.sm
value: 8px
md:
id: rounded.md
value: 12px
lg:
id: rounded.lg
value: 16px
full:
id: rounded.full
value: 9999px
shadows:
sm:
id: shadows.sm
value: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
role: "Raised / Card"
borderWidths:
thin:
id: borderWidths.thin
value: 1px
role: "Standard borders and dividers"
opacityLevels:
opacity-40:
id: opacity.40
value: 0.40
opacity-50:
id: opacity.50
value: 0.50
opacity-60:
id: opacity.60
value: 0.60
opacity-80:
id: opacity.80
value: 0.80
opacity-95:
id: opacity.95
value: 0.95