Remixes of meandesign.org
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: Meandesign
description: |
Mean Design's visual system embodies a bold, forward-thinking minimalism with
intentional contrast. The palette pairs a vivid electric lime accent (#7CFF5B)
against deep, sophisticated charcoal and near-black surfaces, creating
dramatic visual punch with every interaction. Typography is architectural and
strong—oversized display faces at 115px+ set the tone for impact, while body
text remains meticulously legible despite the dark canvas. The aesthetic
rejects softness: corners are either razor-sharp (0px radius) or pill-rounded
(9999px), never middle-ground. Layering is achieved through color blocking
rather than subtle shadows—surfaces speak through their material density, not
through depth illusion. The system communicates precision, modernity, and
confidence, suited to a design-forward creative studio targeting brand
strategists and visual storytellers.
source:
url: "https://meandesign.org/"
pagesAnalyzed: 6
extractedAt: 2026-11-07
tokensMeasured: true
colors:
primary: "#7CFF5B"
canvas: "#F5F5F0"
surface: "#111111"
on-primary: "#111111"
ink: "#111111"
body: "#888888"
muted: "#FFFFFF"
neutral-1: "#000000"
typography:
display-xxl:
fontFamily: "Noto Sans TC"
fontSize: 316.8px
fontWeight: 900
lineHeight: 1
letterSpacing: 0px
display-xl:
fontFamily: "Noto Sans TC"
fontSize: 115.2px
fontWeight: 900
lineHeight: 1
letterSpacing: 0px
display-xl-tight:
fontFamily: "Noto Sans TC"
fontSize: 115.2px
fontWeight: 900
lineHeight: 1
letterSpacing: -2.3px
display-lg:
fontFamily: "Noto Sans TC"
fontSize: 100.8px
fontWeight: 900
lineHeight: 1
letterSpacing: -2.02px
display-md:
fontFamily: "Noto Sans TC"
fontSize: 86.4px
fontWeight: 900
lineHeight: 1
letterSpacing: -1.73px
display-sm:
fontFamily: "Noto Sans TC"
fontSize: 50.4px
fontWeight: 900
lineHeight: 1.15
letterSpacing: -1.01px
heading-xl:
fontFamily: "Noto Sans TC"
fontSize: 36px
fontWeight: 900
lineHeight: 1.1
letterSpacing: -0.36px
heading-lg:
fontFamily: "Noto Sans TC"
fontSize: 34.56px
fontWeight: 900
lineHeight: 1.7
letterSpacing: -0.35px
heading-md:
fontFamily: "Noto Sans TC"
fontSize: 31.68px
fontWeight: 900
lineHeight: 1.3
letterSpacing: -0.32px
heading-sm:
fontFamily: "Noto Sans TC"
fontSize: 30px
fontWeight: 900
lineHeight: 1.1
letterSpacing: -0.3px
heading-xs:
fontFamily: "Noto Sans TC"
fontSize: 22px
fontWeight: 900
letterSpacing: -0.22px
heading-xs-tight:
fontFamily: "Noto Sans TC"
fontSize: 22px
fontWeight: 900
lineHeight: 1.25
letterSpacing: -0.88px
body-lg:
fontFamily: "Noto Sans TC"
fontSize: 18px
fontWeight: 300
lineHeight: 1.75
letterSpacing: 0px
body-md:
fontFamily: "Noto Sans TC"
fontSize: 15px
fontWeight: 400
lineHeight: 1.9
letterSpacing: 0px
body-sm:
fontFamily: "Noto Sans TC"
fontSize: 14px
fontWeight: 400
lineHeight: 1.7
letterSpacing: 0px
body-sm-strong:
fontFamily: "Noto Sans TC"
fontSize: 14px
fontWeight: 700
letterSpacing: 0.56px
body-sm-2:
fontFamily: "Noto Sans TC"
fontSize: 14px
fontWeight: 900
letterSpacing: 0.28px
body-xs:
fontFamily: "Noto Sans TC"
fontSize: 13px
fontWeight: 400
lineHeight: 1.65
letterSpacing: 0px
nav:
fontFamily: Inter
fontSize: 13px
fontWeight: 400
letterSpacing: 1.04px
textTransform: uppercase
button:
fontFamily: "Noto Sans TC"
fontSize: 15px
fontWeight: 700
letterSpacing: 0.3px
label-md:
fontFamily: "Noto Sans TC"
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
label-sm:
fontFamily: Inter
fontSize: 10px
fontWeight: 500
letterSpacing: 1.8px
textTransform: uppercase
caption-sm:
fontFamily: "Noto Sans TC"
fontSize: 12px
fontWeight: 400
letterSpacing: 0px
caption-sm-inter:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
letterSpacing: 0.72px
caption-sm-uppercase:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
letterSpacing: 1.2px
textTransform: uppercase
caption-sm-strong:
fontFamily: "Noto Sans TC"
fontSize: 12px
fontWeight: 700
lineHeight: 1.65
letterSpacing: 0.48px
textTransform: uppercase
caption-xs:
fontFamily: "Noto Sans TC"
fontSize: 11px
fontWeight: 400
letterSpacing: 0.44px
caption-xs-strong:
fontFamily: Inter
fontSize: 11px
fontWeight: 500
letterSpacing: 2.2px
textTransform: uppercase
rounded:
none: 0px
full: 9999px
spacing:
xxs: 8px
xs: 12px
sm: 16px
md: 20px
lg: 24px
xl: 28px
xxl: 32px
xxxl: 40px
section: 48px
band: 56px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#F5F5F0"
surface: "#111111"
surfaceRaised: "#111111"
text: "#111111"
textMuted: "#888888"
border: "#DADAD5"
accent: "#21A200"
accentFg: "#000000"
focusRing: "#7CFF5B"
elevation: shadow
dark:
bg: "#0D130C"
surface: "#1C211B"
surfaceRaised: "#282D27"
text: "#FAFFF8"
textMuted: "#A0A59E"
border: "#343933"
accent: "#7CFF5B"
accentFg: "#0B0B0C"
focusRing: "#7CFF5B"
elevation: "border+surface"
contrastFailures:
- "light: muted on bg = 3.24:1 (needs 4.5:1)"
- "light: text on surface = 1:1 (needs 4.5:1)"
gradients:
- context: section
kind: linear
value: "linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.14) 55%, rgba(0, 0, 0, 0) 100%)"
components:
button-primary:
typography: "{typography.body-sm-strong}"
textColor: "{colors.ink}"
height: 50px
padding: "14px 28px 14px 28px"
rounded: 100px
backgroundColor: "{colors.primary}"
button-outline:
typography: "{typography.body-sm-strong}"
textColor: "{colors.muted}"
border: "1px solid rgba(255, 255, 255, 0.3)"
height: 50px
padding: "14px 28px 14px 28px"
rounded: 100px
button-outline-2:
typography: "{typography.caption-sm-inter}"
textColor: "{colors.muted}"
border: "1px solid rgba(255, 255, 255, 0.3)"
padding: "9px 18px 9px 18px"
rounded: 999px
button-secondary:
typography: "{typography.nav}"
textColor: "{colors.muted}"
padding: "10px 20px 10px 20px"
rounded: 100px
backgroundColor: "{colors.surface}"
button-secondary-2:
typography: "{typography.button}"
textColor: "{colors.muted}"
height: 58px
padding: "16px 36px 16px 36px"
rounded: 100px
backgroundColor: "{colors.surface}"
button-primary-sm:
typography: "{typography.body-sm-strong}"
textColor: "{colors.ink}"
height: 48px
padding: "14px 28px 14px 28px"
rounded: 100px
backgroundColor: "{colors.primary}"
card-featured:
textColor: "{colors.ink}"
fontSize: 16px
fontFamily: "Noto Sans TC"
fontWeight: 400
backgroundColor: "{colors.surface}"
card-featured-2:
textColor: "{colors.ink}"
fontSize: 16px
fontFamily: "Noto Sans TC"
fontWeight: 400
backgroundColor: "rgb(15, 15, 15)"
card:
textColor: "{colors.ink}"
padding: "28px 28px 30px 28px"
fontSize: 16px
fontFamily: "Noto Sans TC"
fontWeight: 400
card-sm:
typography: "{typography.heading-sm}"
textColor: "{colors.muted}"
badge-outline:
typography: "{typography.caption-sm}"
textColor: "{colors.body}"
border: "1px solid rgba(17, 17, 17, 0.12)"
height: 27px
padding: "4px 12px 4px 12px"
rounded: 100px
badge-outline-sm:
typography: "{typography.caption-xs}"
textColor: "rgba(255, 255, 255, 0.6)"
border: "1px solid rgba(255, 255, 255, 0.2)"
height: 26px
padding: "4px 10px 4px 10px"
rounded: 100px
badge-text:
textColor: "{colors.ink}"
height: 23px
fontSize: 16px
fontFamily: "Noto Sans TC"
fontWeight: 400
navigation:
textColor: "{colors.ink}"
height: 82px
padding: "28px 48px 28px 48px"
fontSize: 16px
fontFamily: "Noto Sans TC"
fontWeight: 400
navigation-sm:
textColor: "{colors.ink}"
height: 81.9688px
padding: "27.995px 48px 27.995px 48px"
fontSize: 16px
fontFamily: "Noto Sans TC"
fontWeight: 400
backgroundColor: "rgba(17, 17, 17, 0)"
footer:
textColor: "{colors.ink}"
border: "1px solid rgba(255, 255, 255, 0.08)"
padding: "36px 48px 36px 48px"
fontSize: 16px
fontFamily: "Noto Sans TC"
fontWeight: 400
backgroundColor: "{colors.surface}"
footer-2:
textColor: "{colors.ink}"
border: "1px solid rgba(255, 255, 255, 0.09)"
padding: "36px 48px 36px 48px"
fontSize: 16px
fontFamily: "Noto Sans TC"
fontWeight: 400
backgroundColor: "{colors.surface}"
link:
typography: "{typography.nav}"
textColor: "{colors.muted}"
link-2:
textColor: "rgba(255, 255, 255, 0.35)"
fontSize: 14px
fontFamily: Inter
fontWeight: 400
states:
nav-hover:
target: nav
state: hover
opacity: 0.5
button-hover:
target: button
state: hover
transform: "scaleX(1)"
card-hover:
target: card
state: hover
transform: "scale(1)"
link-hover:
target: link
state: hover
transform: "translateX(4px)"
other-hover:
target: other
state: hover
textColor: "rgba(255, 255, 255, 0.4)"
badge-hover:
target: badge
state: hover
textColor: "rgba(255, 255, 255, 0.5)"
borderColor: "rgba(255, 255, 255, 0.15)"
breakpoints:
- width: 375
containerWidth: 327
gridColumns: 5
navLinksVisible: 1
menuToggleVisible: true
headingPx: 38
bodyPx: 16
sectionPaddingX: 24
- width: 768
containerWidth: 720
gridColumns: 5
navLinksVisible: 1
menuToggleVisible: true
headingPx: 92
bodyPx: 16
sectionPaddingX: 24
- width: 1024
containerWidth: 960
gridColumns: 6
navLinksVisible: 7
menuToggleVisible: false
headingPx: 82
bodyPx: 16
sectionPaddingX: 32
- width: 1280
containerWidth: 1184
gridColumns: 6
navLinksVisible: 7
menuToggleVisible: false
headingPx: 102
bodyPx: 16
sectionPaddingX: 48
- width: 1440
containerWidth: 1344
gridColumns: 6
navLinksVisible: 7
menuToggleVisible: false
headingPx: 115
bodyPx: 16
sectionPaddingX: 48
coverage:
statesFound: 24
gradientsFound: 1
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Mean Design's visual system embodies a bold, forward-thinking minimalism with intentional contrast. The palette pairs a vivid electric lime accent ({colors.primary} — #7CFF5B) against deep, sophisticated charcoal and near-black surfaces, creating dramatic visual punch with every interaction. Typography is architectural and strong—oversized display faces at 115px+ set the tone for impact, while body text remains meticulously legible despite the dark canvas. The aesthetic rejects softness: corners are either razor-sharp (0px radius) or pill-rounded (9999px), never middle-ground. Layering is achieved through color blocking rather than subtle shadows—surfaces speak through their material density, not through depth illusion. The system communicates precision, modernity, and confidence, suited to a design-forward creative studio targeting brand strategists and visual storytellers.
Key Characteristics
#7CFF5B) as singular, high-contrast brand accent used sparingly for primary CTAs and hero moments#111111) and near-black (#000000) as primary surfaces and text, creating high-contrast legibility on light canvas{colors.primary} — #7CFF5B): Primary call-to-action fills, brand accent in hero sections, active link highlighting. Used strategically to break the dark–light palette contrast. High-visibility accent for maximum hierarchy leverage.{colors.canvas} — #F5F5F0): Default page background across light-themed surfaces. Soft off-white, warm undertone.{colors.surface} — #111111): Primary card and panel background; primary text color on light canvas; label text on brand-colored surfaces. Primary dark surface.{colors.body} — #888888): Body copy text on light backgrounds, secondary labels, descriptive and supporting text.{colors.muted} — #FFFFFF): Captions, secondary descriptive text on dark backgrounds, decorative text hierarchy.{colors.neutral-1} — #000000): No measured semantic role. Present in decorative and utility contexts; serves as pure black when needed for maximum contrast.No error, success, or warning colors were declared on the site. The design system does not expose a semantic status ramp. See Known Gaps.
Primary: Noto Sans TC
font-family: 'Noto Sans TC', 'Noto Sans', sans-serif
Traditional Chinese sans-serif, used for all primary content (headings, body, buttons, labels).
Secondary: Inter
font-family: 'Inter', sans-serif
Geometric sans-serif used for UI labels, navigation links, and captions where spacing and modern neutrality are preferred.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Noto Sans TC | 316.8px | 900 | 1.0 | 0px | Monumental hero text, ultra-heavy weight |
| Display XL (Tight) | Noto Sans TC | 115.2px | 900 | 1.0 | -2.3px | Primary hero heading with aggressive negative tracking |
| Display XL | Noto Sans TC | 115.2px | 900 | 1.0 | 0px | Large display size, looser spacing variant |
| Display LG | Noto Sans TC | 100.8px | 900 | 1.0 | -2.02px | Large hero section heading |
| Display MD | Noto Sans TC | 86.4px | 900 | 1.0 | -1.73px | Medium display, compressed tracking |
| Display SM | Noto Sans TC | 50.4px | 900 | 1.15 | -1.01px | Section subheading, display scale |
| Heading XL | Noto Sans TC | 36px | 900 | 1.1 | -0.36px | Primary section heading |
| Heading LG | Noto Sans TC | 34.56px | 900 | 1.7 | -0.35px | Large section heading with looser leading |
| Heading MD | Noto Sans TC | 31.68px | 900 | 1.3 | -0.32px | Medium section heading |
| Heading SM | Noto Sans TC | 30px | 900 | 1.1 | -0.3px | Smaller section heading |
| Heading XS (Tight) | Noto Sans TC | 22px | 900 | 1.25 | -0.88px | Tight subheading variant |
| Heading XS | Noto Sans TC | 22px | 900 | — | -0.22px | Standard subheading, loose variant |
| Body LG | Noto Sans TC | 18px | 300 | 1.75 | 0px | Large body copy, light weight |
| Body MD | Noto Sans TC | 15px | 400 | 1.9 | 0px | Default body copy size, generous line height |
| Body SM | Noto Sans TC | 14px | 400 | 1.7 | 0px | Standard body copy, slightly tighter leading |
| Body SM (Strong) | Noto Sans TC | 14px | 700 | — | 0.56px | Emphasized body text or inline callout |
| Body SM (Heavy) | Noto Sans TC | 14px | 900 | — | 0.28px | Heavy body emphasis, ultra-bold |
| Body XS | Noto Sans TC | 13px | 400 | 1.65 | 0px | Small body copy, high line height |
| Button | Noto Sans TC | 15px | 700 | — | 0.3px | Interactive button text, bold serif-based |
| Label MD | Noto Sans TC | 16px | 400 | 1.5 | 0px | Form input label |
| Caption SM (Strong) | Noto Sans TC | 12px | 700 | 1.65 | 0.48px | Bold caption with uppercase transform |
| Caption SM | Noto Sans TC | 12px | 400 | — | 0px | Standard caption, supporting text |
| Caption XS | Noto Sans TC | 11px | 400 | — | 0.44px | Extra small caption |
| Nav | Inter | 13px | 400 | — | 1.04px | Navigation link, uppercase transformed |
| Caption SM (Inter, Loose) | Inter | 12px | 400 | — | 2.64px | Ultra-spaced caption label |
| Caption SM (Inter) | Inter | 12px | 400 | — | 0.72px | Standard Inter caption |
| Caption SM (Uppercase) | Inter | 12px | 400 | — | 1.2px | Inter caption with uppercase transform |
| Caption XS (Strong) | Inter | 11px | 500 | — | 2.2px | Small strong label, uppercase, wide tracking |
| Label SM | Inter | 10px | 500 | — | 2.0px | Small form label, uppercase transformed |
| Label SM (Tight) | Inter | 10px | 500 | — | 1.8px | Small label, tighter tracking variant |
-0.3px to -2.3px) to create a compressed, modern aesthetic and visual impact at scale.Primary Button
{colors.primary} (#7CFF5B){colors.surface} (#111111)14px 28px{typography.button} (15px, weight 700)100px (pill-shaped)50pxtransform: translateX(4px), color remains #111111, border becomes 1px solid {colors.muted} (#FFFFFF)Primary Small Button
{colors.primary} (#7CFF5B){colors.surface} (#111111)14px 28px{typography.button} (15px, weight 700)100px48pxSecondary Button
{colors.surface} (#111111){colors.muted} (#FFFFFF)10px 20px100pxSecondary Large Button
{colors.surface} (#111111){colors.muted} (#FFFFFF)16px 36px{typography.button} (15px, weight 700)100px58pxtransform: scaleX(1), color becomes #000000Outline Button
rgba(0, 0, 0, 0){colors.muted} (#FFFFFF)14px 28px{typography.button} (14px, weight 700)1px solid rgba(255, 255, 255, 0.3)100px50pxcolor: #000000, borderColor: #FFFFFF, transform: translateX(4px)Outline Small Button
rgba(0, 0, 0, 0){colors.muted} (#FFFFFF)9px 18px1px solid rgba(255, 255, 255, 0.3)9999px (full pill)Featured Card
{colors.surface} (#111111){colors.surface} (#111111)288px440px0px{rounded.none} (0px, sharp)transform: translateY(-4px), opacity: 1Featured Card Variant
#0F0F0F (near-black){colors.surface} (#111111)287px440px0px{rounded.none} (0px)Default Card
rgba(0, 0, 0, 0){colors.surface} (#111111)287px440px28px 28px 30px 28px{rounded.none} (0px)transform: scale(1), backgroundColor: initial, opacity: 1, transform: translateY(-4px)Small Card
rgba(0, 0, 0, 0){colors.muted} (#FFFFFF)231px66px0px{typography.heading-sm} (30px, weight 900){rounded.none} (0px)33pxOutline Badge
rgba(0, 0, 0, 0){colors.body} (#888888)4px 12px1px solid rgba(17, 17, 17, 0.12){rounded.full} (9999px, full pill)27pxcolor: rgba(255, 255, 255, 0.5), borderColor: rgba(255, 255, 255, 0.15)Outline Small Badge
rgba(0, 0, 0, 0)rgba(255, 255, 255, 0.6)4px 10px1px solid rgba(255, 255, 255, 0.2){rounded.full} (9999px)26pxcolor: #FFFFFF, borderColor: #000000, transform: translateX(3px)Text Badge
rgba(0, 0, 0, 0){colors.surface} (#111111)0px{rounded.none} (0px)23pxDefault Navigation
rgba(0, 0, 0, 0) on light canvas, rgba(17, 17, 17, 0) on dark{colors.surface} (#111111)82px (light variant), 81.97px (dark variant)28px 48px (light), 27.995px 48px (dark){rounded.none} (0px)opacity: 0.5 or 0.55, color becomes #000000 or #FFFFFF depending on context, opacity: 1Default Footer
{colors.surface} (#111111){colors.surface} (#111111)97px36px 48px1px solid rgba(255, 255, 255, 0.08) (light divider on dark surface){rounded.none} (0px)1px solid rgba(255, 255, 255, 0.09) border availableDefault Link
rgba(0, 0, 0, 0){colors.muted} (#FFFFFF)0px{rounded.none} (0px)transform: translateX(4px), color: #FFFFFF, borderColor: #000000 (when underlined)Secondary Link
rgba(0, 0, 0, 0)rgba(255, 255, 255, 0.35)0px212px17pxBase unit: 8px. All spacing follows the modular scale below, ensuring visual rhythm and consistency.
{spacing.xxs} = 8px — Minimal padding within compact components (badges, labels){spacing.xs} = 12px — Small internal spacing, button/field padding{spacing.sm} = 16px — Default padding for cards, form elements, small sections{spacing.md} = 20px — Medium section spacing, component padding{spacing.lg} = 24px — Large padding, card spacing, section margins{spacing.xl} = 28px — Extra-large spacing, header/footer padding{spacing.xxl} = 32px — Double-unit spacing for major section dividers{spacing.xxxl} = 40px — Large gap between section blocks{spacing.section} = 48px — Major section padding (horizontal and between sections){spacing.band} = 56px — Hero band and maximum-gap vertical spacing| Viewport | Max Content Width | Grid Columns | Section Padding-X |
|---|---|---|---|
| 375px | 327px | 5 | {spacing.lg} (24px) |
| 768px | 720px | 5 | {spacing.lg} (24px) |
| 1024px | 960px | 6 | {spacing.xxl} (32px) |
| 1280px | 1184px | 6 | {spacing.section} (48px) |
| 1440px | 1344px | 6 | {spacing.section} (48px) |
The grid system maintains 5–6 columns across all breakpoints. Content containers scale fluidly; padding increases at desktop scales to maintain visual breathing room on wide screens.
Whitespace is architectural. The system balances dense, oversized typography with generous margins and padding, creating visual rest between high-impact moments. Section padding ({spacing.section} and {spacing.band}) provides major breathing room; internal component spacing ({spacing.sm} to {spacing.lg}) maintains hierarchy without clutter. The light canvas ({colors.canvas} — #F5F5F0) serves as a breathing background, while dark surfaces ({colors.surface} — #111111) are offset by white text and selective lime accents. No element feels crowded; every layout exhales.
{rounded.none} = 0px — Cards, containers, buttons (secondary), footer. Sharp edges reinforce architectural precision.{rounded.full} = 9999px — Buttons (primary, outline, secondary), badges, pill-shaped UI elements. Full-rounded geometry signals interactivity and softens sharp corners on clickable elements.1px (thin) — Used on outline buttons (border: 1px solid rgba(255, 255, 255, 0.3)), badges (border: 1px solid rgba(17, 17, 17, 0.12)), footer dividers (border: 1px solid rgba(255, 255, 255, 0.08–0.09)), and link underlines. Provides subtle visual definition without heaviness.The design system employs color-blocking depth—surfaces are distinguished by material color changes rather than cast shadows. No soft box-shadows are used; instead, visual hierarchy emerges from contrast in hue and opacity.
The site uses a single decorative gradient to create atmospheric depth:
Gradient Overlay (on hero/section backgrounds)
linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.14) 55%, rgba(0, 0, 0, 0) 100%)
This darkens the bottom of sections with a smooth fade to transparent, creating depth without shadow mechanics.
| Level | Treatment | Use |
|---|---|---|
| Flat (Base) | Solid color, no shadow, no overlay | Cards on light backgrounds, default containers |
| Lift (Micro) | transform: translateY(-4px) on hover, no shadow | Card hover states, interactive elevation |
| Atmospheric | Gradient overlay: rgba(0, 0, 0, 0.78) → rgba(0, 0, 0, 0.14) → transparent | Hero sections, background depth |
Opacity is used strategically for text hierarchy and interactive states:
100% (1.00) — Fully opaque text (headings, primary body copy, active links)58% (0.58) — Secondary text (muted captions, hover dimming on certain elements)49% (0.49) — Disabled or reduced emphasis (faded links, secondary descriptions)40% (0.40) — De-emphasized text (tertiary labels, placeholders)2% (0.02) — Minimal background tint (subtle surface variations, hairline separators)1% (0.01) — Barely perceptible, used for imperceptible background changes| Context | Z-Index | Use |
|---|---|---|
| Base | 1 | Default element stacking |
| Base (Secondary) | 2 | Slightly elevated default elements |
| Modal | 1000 | Dialog and modal backdrop, prominent overlay |
| Modal (Front) | 9999 | Modal content on top of all other modals |
| Toast | 10000 | Notification toast notifications, above all |
| Toast (Maximum) | 99998 | Secondary toast layer (stacking multiple toasts) |
| Toast (Override) | 100000 | Topmost toast or critical notification overlay |
{colors.primary} (#7CFF5B) is reserved for primary CTAs, hero moments, and active states. One accent per viewport section maintains visual clarity and impact.letter-spacing: -2.3px to -0.3px on all heading and display sizes to achieve the compressed, modern aesthetic. Never remove it.transform: translateX() or translateY() micro-movements. Color remains stable unless explicitly specified (e.g., outline button borders).1.65 line-height on body text; prioritize legibility and visual breathing room.{spacing.xxs} (8px).linear-gradient(to top, rgba(0, 0, 0, 0.78)…) to add atmospheric depth to hero backgrounds without adding shadow complexity.{colors.primary} background, {colors.surface} text).#7CFF5B), Canvas (#F5F5F0), Surface (#111111), Body (#888888), Muted (#FFFFFF), and Neutral (#000000). No error, warning, or success colors exist.| Breakpoint | Viewport | Content Width | Grid Columns | Nav Visible | Menu Toggle | Key Changes |
|---|---|---|---|---|---|---|
| Mobile (XS) | 375px | 327px | 5 | Hidden | Visible | Single-column layout, nav menu toggle present, padding {spacing.lg} (24px) |
| Tablet (SM) | 768px | 720px | 5 | Hidden | Visible | Maintained single-nav state, content widens, padding remains {spacing.lg} (24px) |
| Small Desktop (MD) | 1024px | 960px | 6 | 7 nav links | Hidden | Navigation expands to full horizontal menu, grid to 6 columns, padding {spacing.xxl} (32px) |
| Desktop (LG) | 1280px | 1184px | 6 | 7 nav links | Hidden | Content width increases, padding {spacing.section} (48px) |
| Large Desktop (XL) | 1440px | 1344px | 6 | 7 nav links | Hidden | Maximum content width, padding {spacing.section} (48px), display typography stable |
Breakpoint Logic:
Interactive elements maintain minimum touch-target dimensions of 44px × 44px (or equivalent padding + font size + line height combination) to meet accessibility standards:
48px (primary small) to 58px (secondary large); padding ensures adequate tap zone.82px height on desktop, 81.97px on mobile—full nav bar height serves as touch target.26px–27px height with 9px–12px padding to support touch on small screens.{spacing.lg} (24px).{spacing.xxl} (32px).Use this condensed mapping for rapid implementation:
{colors.primary} (#7CFF5B) with text {colors.surface} (#111111){colors.surface} (#111111){colors.canvas} (#F5F5F0){colors.body} (#888888){colors.surface} (#111111) or {colors.muted} (#FFFFFF) depending on background{colors.muted} (#FFFFFF) on dark, {colors.body} (#888888) on light{colors.primary} (#7CFF5B){colors.neutral-1} (#000000) for maximum contrastTypography Foundation: All content uses Noto Sans TC (primary) or Inter (secondary). Display sizes (50px+) always include negative letter-spacing per the hierarchy table. Never use font-weight below 300 or above 900; no intermediate weights.
Button Geometry: Primary CTAs are lime (#7CFF5B) with 9999px radius and transform: translateX(4px) on hover. Secondary buttons are dark (#111111) with white text. Outlines use semi-transparent white borders. All button padding is from the spacing scale ({spacing.sm}, {spacing.md}, etc.).
Card & Container Design: Cards are sharp (0px radius), background is either dark surface or transparent. Content padding inside cards uses {spacing.lg} (24px to 30px). Never add shadows; use color-blocking. Hover states translate vertically: transform: translateY(-4px).
Navigation: Desktop reveals full horizontal menu with 7 nav links at 1024px+. Mobile hides nav behind toggle. Nav text is uppercase Inter, 13px, letter-spacing 1.04px. Hover opacity to 50–55%.
Spacing & Layout: Every margin and padding is a multiple of 8px (the base {spacing.xxs}). Section padding is {spacing.section} (48px) on desktop, {spacing.lg} (24px) on mobile. Never use arbitrary spacing values.
Color Roles: Lime is only for primary CTA fills and active accents. Background hierarchy uses dark (#111111) and light (#F5F5F0). No semantic color ramp (no red/green/yellow). Text always has 4.5:1+ contrast ratio.
Responsiveness: Content width scales per breakpoint table (327px → 1344px). Display typography scales with viewport (38px → 115px). Nav menu appears at 1024px; menu toggle visible at 768px and below. Grid columns: 5 on mobile, 6 on desktop.
Hover & Interaction: Buttons and cards use transform for hover feedback—translate or scale. Links use translateX(4px). Never shift color on hover unless explicitly measured. Maintain opacity at 100% for interactive elements; use opacity only for disabled states.
Border Radius Strategy: Buttons and badges are pill-shaped (9999px). Cards, containers, and sections are sharp (0px). This sharp/round contrast is intentional and defines the system.
Depth Without Shadows: Use color-blocking (dark vs. light surfaces) and the single gradient overlay (rgba(0,0,0,0.78)→rgba(0,0,0,0)) on hero sections. Never add box-shadow for elevation; movement (translate) and color change are sufficient.
{colors.neutral-1} (#000000) has no measured semantic role; it appears in decorative contexts only. Whether it is intended as a utility black for maximum contrast or as a reserved accent is unclear from the extraction.themes metadata indicates one side may be derived, not shipped.label-md and label-sm typography was measured; input, textarea, select, and checkbox styling details are not documented.transition-duration, transition-timing-function, and animation-delay values were not extracted.colors:
primary: "#7CFF5B"
canvas: "#F5F5F0"
surface: "#111111"
body: "#888888"
muted: "#FFFFFF"
neutral-1: "#000000"
typography:
display-xxl:
size: 316.8px
weight: 900
lineHeight: 1.0
letterSpacing: 0px
font: Noto Sans TC
display-xl-tight:
size: 115.2px
weight: 900
lineHeight: 1.0
letterSpacing: -2.3px
font: Noto Sans TC
display-xl:
size: 115.2px
weight: 900
lineHeight: 1.0
letterSpacing: 0px
font: Noto Sans TC
display-lg:
size: 100.8px
weight: 900
lineHeight: 1.0
letterSpacing: -2.02px
font: Noto Sans TC
display-md:
size: 86.4px
weight: 900
lineHeight: 1.0
letterSpacing: -1.73px
font: Noto Sans TC
display-sm:
size: 50.4px
weight: 900
lineHeight: 1.15
letterSpacing: -1.01px
font: Noto Sans TC
heading-xl:
size: 36px
weight: 900
lineHeight: 1.1
letterSpacing: -0.36px
font: Noto Sans TC
heading-lg:
size: 34.56px
weight: 900
lineHeight: 1.7
letterSpacing: -0.35px
font: Noto Sans TC
heading-md:
size: 31.68px
weight: 900
lineHeight: 1.3
letterSpacing: -0.32px
font: Noto Sans TC
heading-sm:
size: 30px
weight: 900
lineHeight: 1.1
letterSpacing: -0.3px
font: Noto Sans TC
heading-xs-tight:
size: 22px
weight: 900
lineHeight: 1.25
letterSpacing: -0.88px
font: Noto Sans TC
heading-xs:
size: 22px
weight: 900
lineHeight: null
letterSpacing: -0.22px
font: Noto Sans TC
body-lg:
size: 18px
weight: 300
lineHeight: 1.75
letterSpacing: 0px
font: Noto Sans TC
body-md:
size: 15px
weight: 400
lineHeight: 1.9
letterSpacing: 0px
font: Noto Sans TC
button:
size: 15px
weight: 700
lineHeight: null
letterSpacing: 0.3px
font: Noto Sans TC
body-sm:
size: 14px
weight: 400
lineHeight: 1.7
letterSpacing: 0px
font: Noto Sans TC
body-sm-strong:
size: 14px
weight: 700
lineHeight: null
letterSpacing: 0.56px
font: Noto Sans TC
body-sm-2:
size: 14px
weight: 900
lineHeight: null
letterSpacing: 0.28px
font: Noto Sans TC
body-xs:
size: 13px
weight: 400
lineHeight: 1.65
letterSpacing: 0px
font: Noto Sans TC
nav:
size: 13px
weight: 400
lineHeight: null
letterSpacing: 1.04px
textTransform: uppercase
font: Inter
caption-sm-strong:
size: 12px
weight: 700
lineHeight: 1.65
letterSpacing: 0.48px
textTransform: uppercase
font: Noto Sans TC
caption-sm:
size: 12px
weight: 400
lineHeight: null
letterSpacing: 0px
font: Noto Sans TC
caption-sm-inter:
size: 12px
weight: 400
lineHeight: null
letterSpacing: 0.72px
font: Inter
caption-sm-uppercase:
size: 12px
weight: 400
lineHeight: null
letterSpacing: 1.2px
textTransform: uppercase
font: Inter
caption-xs:
size: 11px
weight: 400
lineHeight: null
letterSpacing: 0.44px
font: Noto Sans TC
caption-xs-strong:
size: 11px
weight: 500
lineHeight: null
letterSpacing: 2.2px
textTransform: uppercase
font: Inter
label-md:
size: 16px
weight: 400
lineHeight: 1.5
letterSpacing: 0px
font: Noto Sans TC
label-sm:
size: 10px
weight: 500
lineHeight: null
letterSpacing: 2px
textTransform: uppercase
font: Inter
spacing:
xxs: 8px
xs: 12px
sm: 16px
md: 20px
lg: 24px
xl: 28px
xxl: 32px
xxxl: 40px
section: 48px
band: 56px
rounded:
none: 0px
full: 9999px
breakpoints:
- name: Mobile XS
width: 375px
contentColumn: 327px
gridColumns: 5
navVisible: false
menuToggle: true
paddingX: 24px
- name: Tablet SM
width: 768px
contentColumn: 720px
gridColumns: 5
navVisible: false
menuToggle: true
paddingX: 24px
- name: Desktop MD
width: 1024px
contentColumn: 960px
gridColumns: 6
navVisible: true
navLinkCount: 7
menuToggle: false
paddingX: 32px
- name: Desktop LG
width: 1280px
contentColumn: 1184px
gridColumns: 6
navVisible: true
navLinkCount: 7
menuToggle: false
paddingX: 48px
- name: Desktop XL
width: 1440px
contentColumn: 1344px
gridColumns: 6
navVisible: true
navLinkCount: 7
menuToggle: false
paddingX: 48px
opacity:
- level: "100%"
value: 1.0
- level: "58%"
value: 0.58
- level: "49%"
value: 0.49
- level: "40%"
value: 0.4
- level: "2%"
value: 0.02
- level: "1%"
value: 0.01
zIndex:
base: 1
baseSecondary: 2
modal: 1000
modalFront: 9999
toast: 10000
toastSecondary: 99998
toastTop: 100000
gradients:
heroOverlay: "linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.14) 55%, rgba(0, 0, 0, 0) 100%)"
borderWidths:
thin: 1px
components:
button:
primary:
background: "#7CFF5B"
color: "#111111"
padding: "14px 28px"
fontSize: "15px"
fontWeight: "700"
borderRadius: "100px"
border: none
height: "50px"
fontFamily: Noto Sans TC
hover:
transform: translateX(4px)
color: "#111111"
borderColor: "#FFFFFF"
outline:
background: "rgba(0, 0, 0, 0)"
color: "#FFFFFF"
padding: "14px 28px"
fontSize: "14px"
fontWeight: "700"
borderRadius: "100px"
border: "1px solid rgba(255, 255, 255, 0.3)"
height: "50px"
fontFamily: Noto Sans TC
hover:
color: "#000000"
borderColor: "#FFFFFF"
transform: translateX(4px)
secondary:
background: "#111111"
color: "#FFFFFF"
padding: "16px 36px"
fontSize: "15px"
fontWeight: "700"
borderRadius: "100px"
border: none
height: "58px"
fontFamily: Noto Sans TC
hover:
color: "#FFFFFF"
borderColor: "#FFFFFF"
transform: scaleX(1)
card:
featured:
background: "#111111"
borderRadius: "0px"
width: "288px"
height: "440px"
padding: "0px"
hover:
transform: translateY(-4px)
opacity: "1"
default:
background: "rgba(0, 0, 0, 0)"
borderRadius: "0px"
width: "287px"
height: "440px"
padding: "28px 28px 30px 28px"
hover:
transform: translateY(-4px)
opacity: "1"
badge:
outline:
background: "rgba(0, 0, 0, 0)"
color: "#888888"
borderRadius: "9999px"
border: "1px solid rgba(17, 17, 17, 0.12)"
padding: "4px 12px"
height: "27px"
fontSize: "12px"
fontWeight: "400"
fontFamily: Noto Sans TC
hover:
color: "rgba(255, 255, 255, 0.5)"
borderColor: "rgba(255, 255, 255, 0.15)"
outlineSmall:
background: "rgba(0, 0, 0, 0)"
color: "rgba(255, 255, 255, 0.6)"
borderRadius: "9999px"
border: "1px solid rgba(255, 255, 255, 0.2)"
padding: "4px 10px"
height: "26px"
fontSize: "11px"
fontWeight: "400"
fontFamily: Noto Sans TC
hover:
color: "#FFFFFF"
borderColor: "#000000"
transform: translateX(3px)
navigation:
height: "82px"
padding: "28px 48px"
fontSize: "16px"
fontWeight: "400"
fontFamily: Noto Sans TC
borderRadius: "0px"
border: none
navLink:
fontSize: "13px"
fontWeight: "400"
fontFamily: Inter
letterSpacing: "1.04px"
textTransform: uppercase
hover:
opacity: "0.5"
footer:
background: "#111111"
height: "97px"
padding: "36px 48px"
fontSize: "16px"
fontWeight: "400"
fontFamily: Noto Sans TC
border: "1px solid rgba(255, 255, 255, 0.08)"
borderRadius: "0px"
link:
color: "#FFFFFF"
fontSize: "13px"
fontWeight: "400"
fontFamily: Inter
hover:
transform: translateX(4px)
color: "#FFFFFF"