mirror of https://github.com/nexu-io/open-design.git synced 2026-05-31 19:04:39 +07:00

feat(skills): add social-media-dashboard skill + Totality Festival design system (#678 )

* feat(skills): add social-media-dashboard skill + Totality Festival design system

- New skill 'social-media-dashboard': single-screen creator analytics
  dashboard with platform switcher (X / GitHub / LinkedIn / YouTube /
  Instagram), KPI row, growth chart with annotations, top-post / top-PR
  preview, trending topics, and top comments. Includes a self-contained
  example.html (Totality Festival styled, X + GitHub tabs, live KPI
  ticker, GitHub contributors grid, world-map audience geography).
- New design system 'totality-festival': cosmic-premium dark glassmorphic
  system with amber corona highlights and cyan atmospheric accents.
  Mirrors Google Labs' design.md spec example so skills can be
  validated against an upstream reference.
- Fix swatches parser in apps/daemon/src/design-systems.ts so it
  recognises the '- **Name:**' bold-with-inner-colon form used by
  several existing systems (ant, totality-festival, ...). Previously
  only the '**Name** (`#hex`)' form was matched, which left their
  picker thumbnails empty.

* feat(skills): polish social-media-dashboard example + add PR preview

- Top Post media block: replace empty gold frame with an inline SVG
  thumbnail (radial glow + ascending data curve + amber/cyan pulse dots
  + play icon + 'LIVE · 0:22' caption). Visually echoes the live-artifact
  story the post copy is selling.
- Hoist the brand-mark linearGradient into a global SVG defs block at
  the top of <body> so all three avatars (header, user, top-post) can
  reference url(#brandRing) and render the teal arrow consistently.
  Previously only the header SVG carried the gradient definition, so
  the user and post avatars rendered as empty rings under headless
  capture.
- Add hero.png preview to .preview/ for the PR description.

---------

Co-authored-by: Tuola Ge <gexingli@refly.ai>

2026-05-06 21:50:23 +08:00

8.8 KiB

Raw Blame History

name

colors

typography

rounded

spacing

components

Totality Festival Design System

surface	surface-dim	surface-bright	surface-container-lowest	surface-container-low	surface-container	surface-container-high	surface-container-highest	on-surface	on-surface-variant	inverse-surface	inverse-on-surface	outline	outline-variant	surface-tint	primary	on-primary	primary-container	on-primary-container	inverse-primary	secondary	on-secondary	secondary-container	on-secondary-container	tertiary	on-tertiary	tertiary-container	on-tertiary-container	error	on-error	error-container	on-error-container	background	on-background	surface-variant
#121318	#121318	#38393f	#0d0e13	#1a1b21	#1e1f25	#292a2f	#34343a	#e3e1e9	#d0c6ab	#e3e1e9	#2f3036	#999077	#4d4732	#e9c400	#fff6df	#3a3000	#ffd700	#705e00	#705d00	#bdf4ff	#00363d	#00e3fd	#00616d	#fcf3ff	#3b2754	#e7d1ff	#6b5586	#ffb4ab	#690005	#93000a	#ffdad6	#121318	#e3e1e9	#34343a

headline-xl

headline-lg

headline-md

body-lg

body-md

label-md

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
Space Grotesk	72px	700	80px	-0.04em

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
Space Grotesk	48px	600	56px	-0.02em

fontFamily	fontSize	fontWeight	lineHeight
Space Grotesk	32px	600	40px

fontFamily	fontSize	fontWeight	lineHeight
Inter	18px	400	28px

fontFamily	fontSize	fontWeight	lineHeight
Inter	16px	400	24px

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
Space Grotesk	14px	500	20px	0.1em

sm	DEFAULT	md	lg	xl	full
0.125rem	0.25rem	0.375rem	0.5rem	0.75rem	9999px

unit	container-max	gutter	margin-mobile	margin-desktop
8px	1280px	24px	16px	64px

button-primary

button-primary-hover

button-secondary

card-glass-level-2

input-field

hero-headline

badge-celestial

backgroundColor	textColor	typography	rounded	padding	height
{colors.primary}	{colors.on-primary}	{typography.label-md}	{rounded.lg}	12px	48px

backgroundColor
{colors.primary-fixed}

backgroundColor	textColor	typography	rounded	padding	height
transparent	{colors.secondary}	{typography.label-md}	{rounded.lg}	12px	48px

backgroundColor	rounded	padding
rgba(52, 52, 58, 0.2)	{rounded.xl}	{spacing.gutter}

backgroundColor	textColor	typography	rounded	padding
{colors.surface-container-lowest}	{colors.on-surface}	{typography.body-md}	{rounded.lg}	12px

textColor	typography
{colors.primary}	{typography.headline-xl}

backgroundColor	textColor	typography	rounded	padding
{colors.tertiary-container}	{colors.on-tertiary-container}	{typography.label-md}	{rounded.full}	4px

Design System Inspired by Totality Festival

Category: Themed & Unique Surface: web A cosmic-premium, glassmorphic dark system that captures the visceral awe of a solar eclipse — obsidian surfaces, amber "corona" highlights, and cyan atmospheric accents.

1. Visual Theme & Atmosphere

"Cosmic Premium" — the visceral tension and awe of a solar eclipse. The aesthetic blends the stark mystery of deep space with the explosive brilliance of the solar corona. Surfaces appear as translucent obsidian slabs floating over nebula-like gradients. High-energy amber accents represent the "diamond ring" flash — they make the interface feel luminous and alive rather than heavy or muted.

Visual style: dark, glassmorphic, cinematic
Color stance: obsidian neutral, amber corona accent, cyan atmospheric
Design intent: Keep outputs recognizable as a premium festival / creator product; use radial gradients for backgrounds to simulate the circular nature of the eclipse.

2. Color

Primary: #fff6df — Amber / white-gold, the solar corona and "diamond ring" flash. Used for critical CTAs and high-importance highlights.
Primary Container: #ffd700 — Pure corona gold. Reserved for the single most important highlight on a screen.
Secondary: #bdf4ff — Soft cyan, the atmospheric thinning and ethereal glow of the sky during totality. Used for interactive states and secondary emphasis.
Secondary Container: #00e3fd — Vivid cyan for interactive ambient glow rims.
Tertiary: #fcf3ff — Faint lavender-white for subtle tinted highlights.
Tertiary Container: #e7d1ff — Deep indigo haze, celestial badges.
Surface: #121318 — Obsidian / near-black foundation.
Surface Container: #1e1f25 — Slightly elevated obsidian for cards.
Surface Container High: #292a2f — Elevated panels, active states.
Text: #e3e1e9 — Warm off-white for primary body copy and headlines.
Text Muted: #d0c6ab — Warm parchment tone for metadata and labels.
Outline: #999077 — Low-contrast warm gray for hairline borders.
Favor Primary (#fff6df) and Primary Container (#ffd700) for the "corona flash" moments — max 3 per screen.
Use Secondary (#bdf4ff / #00e3fd) for interactive states, never for decorative flourishes.
Surfaces stack as semi-transparent glass: rgba(255, 255, 255, 0.05-0.1) with backdrop-filter: blur(20px) and a 1px rgba(255, 255, 255, 0.1) inner border to simulate light refraction.

3. Typography

A dual-font strategy to balance cinematic impact with utility.

Display / Headings: Space Grotesk — geometric, technical, futuristic-astronomical tone. Tight letter spacing (-0.02em to -0.04em) on large headings to feel "locked" and monumental.
Body / Long-form: Inter — neutral, highly legible in low-light environments.
Labels: Space Grotesk with wide tracking (0.1em) and uppercase, to read as "coordinates" or "readouts" rather than UI chrome.

Apply a subtle text-shadow or low-opacity primary-colored glow to headline-xl elements on the darkest backgrounds for a truly cinematic feel — radiant, not static.

4. Layout & Spacing

Grid: 12-column fixed grid on desktop with generous outer margins (64–80px) to simulate the isolation of a celestial body in the void. Fluid model on mobile with 16px margins.
Rhythm: 8px base unit. Internal component spacing tight (8 / 16px); external section margins wide (64 / 80px) to create distinct "islands" of content.
Max width: 1280px for content containers.
Negative space is a feature, not a cost. Prefer breathing room over density.

5. Elevation & Depth

Depth is achieved through glassmorphism and light-based layering — not traditional drop shadows.

Level 1 (Base): Deep obsidian surface with an optional radial gradient vignette in #1a1b21 → #121318.
Level 2 (Panels): Semi-transparent surfaces at rgba(52, 52, 58, 0.2) with backdrop-filter: blur(20px) and a 1px inner stroke at rgba(255, 255, 255, 0.1) to simulate refraction on a glass edge.
Level 3 (Interactive / Active): An ambient glow — a soft, diffused shadow tinted with Secondary (#00e3fd) or Primary Container (#ffd700), creating the impression of light bleeding from behind the object.

6. Shapes

Shape language is soft-technical. Geometric overall, but small corner radii soften aggression.

Buttons, inputs: rounded-lg (8px).
Cards, featured containers: rounded-xl (12px).
Badges, pills: rounded-full.
Decorative elements: circles and perfect arcs are encouraged to mirror the orbital / eclipse theme.

7. Components

Primary button: Amber fill on obsidian, with a luminous amber glow on hover (mimics the diamond-ring flash). Space Grotesk label, uppercase, 0.1em tracking.
Secondary button: Transparent fill, cyan outline and label — suggests the sky's transition during totality.
Glass card (level 2): rgba(52,52,58,0.2) + 20px blur + 1px inner white stroke + generous internal padding.
Input field: Anchored in the deepest surface (#0d0e13) for maximum contrast; cyan border on focus.
Badges: Pill-shaped with the tertiary container color; reserved for "celestial" metadata (status, live indicators).

8. Do's & Don'ts

Do use Primary Container (#ffd700) no more than 3 times per screen — it's the flash, not the background.
Do pair large Space Grotesk headlines with a subtle primary-colored glow on dark surfaces.
Do tint shadows and glows with Primary or Secondary — never use pure gray shadows.
Don't use solid opaque fills for cards — break the glass illusion.
Don't combine amber and cyan glows on the same element — choose one depending on state (amber = highlight / CTA; cyan = interactive / focus).
Don't use sharp 0-radius corners except for data tables where structure outweighs warmth.

8.8 KiB Raw Blame History Unescape Escape