name: ember-modern-design
version: alpha
description: >
  A neo-brutalist SaaS canvas on warm off-white paper (#F2EFE9) with pure-black
  4px borders and chunky hard-drop offset shadows (10px 10px 0 black). The brand
  voltage is an ember orange (#FF4D00) for primary buttons, highlights and
  accents, backed by a playful secondary palette of yellow/blue/green used as
  flat decorative blocks. Type pairs an extra-bold Bricolage Grotesque display
  (uppercase, tight) with Space Grotesque body. The signatures are the
  offset-shadow "brutalist card", the black scrolling marquee bar, and a
  springy press interaction that snaps the shadow flat.
colors:
  # Brand
  primary: '#FF4D00'           # ember orange — buttons, highlights, accents
  on-primary: '#FFFFFF'
  ink: '#000000'               # borders + text (pure black, intentional)
  # Surface
  surface: '#F2EFE9'           # warm paper canvas
  surface-card: '#FFFFFF'      # cards
  surface-invert: '#000000'    # footer, marquee, dark blocks
  on-invert: '#FFFFFF'
  # Decorative secondary (flat blocks / accent fills, used sparingly)
  yellow: '#FFD600'            # badge "v4.0 is now live"
  blue: '#00D1FF'              # CTA section background, blob
  green: '#00FF85'             # decorative blob
  # Neutral
  on-surface-secondary: '#1F2937' # gray-800 body
  on-surface-muted: '#6B7280'     # gray-500 captions
typography:
  display:
    fontFamily: '"Bricolage Grotesque", sans-serif'
    fontSize: clamp(72px, 9vw, 128px) # hero (text-7xl→9xl)
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -0.05em            # tracking-tighter, UPPERCASE
  headline:
    fontFamily: '"Bricolage Grotesque", sans-serif'
    fontSize: 60px                    # card h3/h4
    fontWeight: 900
    lineHeight: 0.95
    letterSpacing: -0.02em
  body-lg:
    fontFamily: '"Space Grotesk", sans-serif'
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.5
  label:
    fontFamily: '"Space Grotesk", sans-serif'
    fontSize: 14px
    fontWeight: 800
    letterSpacing: 0.05em             # uppercase nav / button text
rounded:
  none: 0px                           # cards/buttons are square
  full: 9999px                        # decorative blobs/dots only
spacing:
  # base unit = 4px
  sm: 16px
  md: 24px
  lg: 48px
  xl: 96px                            # section py-24/32
components:
  card-brutalist:
    background: '{colors.surface-card}'
    border: '4px solid {colors.ink}'
    rounded: '{rounded.none}'
    boxShadow: '10px 10px 0px 0px {colors.ink}'
    hover: 'translate(-4px,-4px), shadow 14px 14px 0'
    transition: 'cubic-bezier(0.175,0.885,0.32,1.275)'  # springy
  button-primary:
    background: '{colors.primary}'
    textColor: '{colors.on-primary}'
    border: '4px solid {colors.ink}'
    boxShadow: '6px 6px 0px 0px {colors.ink}'
    typography: '{typography.label}'
    padding: '16px 32px'
    active: 'translate(6px,6px), shadow 0 0 0'         # snaps flat
  button-secondary:
    background: '{colors.surface-card}'
    border: '4px solid {colors.ink}'
    boxShadow: '6px 6px 0px 0px {colors.ink}'
    hover: 'shadow none'
  badge:
    background: '{colors.yellow}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    rotate: '2deg'                    # tilted sticker
  marquee:
    background: '{colors.ink}'
    textColor: '{colors.on-invert}'
    typography: '{typography.headline}'
    border: '4px solid {colors.ink} (top+bottom)'
motion:
  easing-spring: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)' # card pop
  duration-card: 200ms
  duration-press: 100ms
  marquee: 'marquee 20s linear infinite'
icons:
  library: font-awesome           # fa-star, fab-twitter/linkedin/github
  style: solid + brand glyphs
  colorRule: 'inherit ink; stars use {colors.yellow}; hover → {colors.primary}'

Ember Modern — "StudioFlow"

Design spec — version alpha. Source: static HTML (ember-modern.html); tokens read from :root and component CSS. Fictional AI-agency SaaS; described factually.

Overview

A confident neo-brutalist SaaS look. The canvas is warm off-white paper ({colors.surface} #F2EFE9); structure is drawn with pure-black 4px borders and hard offset drop-shadows (10px 10px 0 #000) that make every card feel like a sticker peeled off the page. The brand voltage is ember orange {colors.primary} #FF4D00 — primary buttons, highlighted words, accent fills — supported by a playful secondary palette (yellow #FFD600, blue #00D1FF, green #00FF85) used only as flat decorative blocks/blobs and the CTA background. Type is Bricolage Grotesque extra-bold/black for uppercase display and Space Grotesk for body. Signatures: the offset brutalist card (springy pop on hover), a black scrolling marquee bar, tilted sticker badges, and a press interaction where the button slides into its shadow (active: translate(6,6), shadow 0).

Colors

Brand. Ember {colors.primary} #FF4D00 is the identity — primary CTAs, highlighted spans (px-6 inline-block -rotate-1), card accent borders/icons. Black {colors.ink} #000000 is used deliberately for all borders, shadows and body headings (this theme embraces pure black).

Surfaces. Paper {colors.surface} #F2EFE9, white cards {colors.surface-card}, and inverted black blocks ({colors.surface-invert}) for the marquee, footer and emphasis tiles.

Decorative secondary. Yellow, blue, green appear as flat bordered blocks (badge, CTA section, background blobs at 20% opacity) — never as text color.

Typography

Bricolage Grotesque (800–900) for all uppercase display/headlines, tight -0.05em tracking, 0.9 line-height; Space Grotesk (500–800) for body and uppercase labels/nav.

Token	Family	Size	Weight	Tracking	Usage
display	Bricolage Grotesque	clamp 72–128px	800	-0.05em	Hero headline (uppercase)
headline	Bricolage Grotesque	60px	900	-0.02em	Card titles, CTA
body-lg	Space Grotesk	20px	500	normal	Body copy
label	Space Grotesk	14px	800	0.05em	Nav, buttons (uppercase)

Layout

Base 4px; max-w-7xl content, py-24/py-32 sections. A bordered sticky nav, centered hero with floating bordered blobs, a full-bleed black marquee, a feature section (one wide split card + a 2-up card grid), a centered testimonial, a full-color blue CTA band, and a black 4-column footer.

Elevation & Depth

The whole system is hard-shadow brutalism — no blur, no gradient. Cards carry 10px 10px 0 #000 (growing to 14px 14px 0 on hover as they lift -4px,-4px); buttons carry 6px 6px 0 and snap flat on press. Decorative blobs sit at low opacity behind content.

Shapes

Square by default — cards, buttons and tiles are sharp-cornered with 4px borders. The only round elements are decorative blobs/dots ({rounded.full}) and small status dots.

Components

• card-brutalist — white, 4px black border, 10px offset shadow, springy hover lift.
• button-primary — ember fill, white uppercase label, 4px border, 6px shadow, press-to-flat.
• button-secondary — white fill, same border/shadow, hover removes shadow.
• badge — tilted yellow sticker with 2px border.
• marquee — full-bleed black bar of repeating Bricolage uppercase phrases scrolling left.

Motion

{motion.easing-spring} cubic-bezier(0.175,0.885,0.32,1.275) gives cards an overshoot "pop"; press states use a fast 100ms linear snap into the shadow. The marquee scrolls continuously (20s linear). Otherwise motion is minimal — the brutalist shadow shifts are the interaction language.

Iconography

Font Awesome solid + brand glyphs (fa-star, fab-twitter/linkedin/github). Icons inherit ink; rating stars use {colors.yellow}; footer/social icons hover to ember {colors.primary}.

Do's and Don'ts

• Do keep the warm #F2EFE9 paper canvas with pure-black 4px borders.
• Do use ember orange as the single text/CTA voltage; keep yellow/blue/green as flat blocks only.
• Do apply hard offset shadows (no blur) and the springy hover/press behavior.
• Do set display type in uppercase Bricolage, tight and heavy.
• Don't round card/button corners or use soft/gradient shadows.
• Don't color body text with the secondary palette.
• Don't dilute the contrast — black borders stay pure black.

Known Gaps

• Values read from the static implementation's resolved :root. Copy/imagery are sample content; the source disables transitions globally so timings reflect the authored CSS intent.