Kinetic Constructivism

动力学构成主义

stylekitMITExperimental · experimentalLight · lightMedium · mediumOrange · orangeMedium · mediumSerif · serifGeneral · generalLanding · landing

会动的构成主义。米白纸面上，红、蓝、黄的实色几何——圆、三角、方与粗对角线——不是被摆上去的，而是沿着轴线做机械运动：圆盘公转、三角钟摆、方块按节拍行进。运动学自 El Lissitzky 与 Rodchenko 的海报，节奏来自机械本身。

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Kinetic Constructivism" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/kinetic-constructivism @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/kinetic-constructivism · bfa7da909e86 · © AnxForever

Do

背景用米白纸 #EFE9DC，主体用暖墨 #17130E，制造纸面印刷的质感
只用三种强调色：构成红 #E0231B、群青蓝 #1C4A87、金黄 #F4B301，绝不引入第四色
只用基本几何图元：圆、三角、方、粗对角线、弧，实色平涂、硬边零圆角
重要构图沿 -30° / -45° 对角线组织，用旋转的字块和色带制造方向张力
让图元真的机械运动：圆做公转/自转、三角做钟摆、方块做节拍行进、对角块做扫入
入场用 expo-out（cubic-bezier(0.16,1,0.3,1)，0.6-0.9s），循环旋转用 linear 或 steps() 制造齿轮感
标题用超粗无衬线大写（Archivo/Anton 一类，wght 800-900）+ 等宽数字标签
所有动画都写 prefers-reduced-motion 降级，停在完整的构成终态

Don't

禁止圆角（rounded-*）、阴影（shadow-md 以上）、渐变（bg-gradient-*）、发光与模糊——构成主义是刀切的硬边实色
禁止第四种颜色，禁止低饱和 pastel，禁止把三原色调浑
禁止用插画、照片、3D 拟物抢几何的戏——图元本身就是主角
禁止弹跳卖萌的卡通缓动与超过 1.2s 的拖沓循环
禁止一屏同时让所有图元乱动（保留静态骨架，一次只有一组主导运动）
禁止动画 top/left/width/height（重排卡顿）——几何运动只用 transform
禁止忽略 prefers-reduced-motion

Prompt

Create a kinetic constructivism landing page with:
1. Frame: #EFE9DC bone paper, #17130E ink, three accents #E0231B / #1C4A87 / #F4B301 only
2. Load Archivo (wght 700-900) + Space Mono from fonts.loli.net
3. Hero on a diagonal: an orbiting red disc (parent div rotate 360deg 12s linear, child disc on the rim), a blue triangle swinging like a pendulum (transform-origin top center, rotate -24deg..24deg ease-in-out), a rotated headline block with one word on a yellow slab tilted -3deg
4. A row of squares marching with steps(3) between sections
5. Numbered feature cards: thick ink border, top color rule, a corner disc that spins on hover
6. Diagonal sweep entrances for color panels (translateX -110% skewX -12deg -> 0)
7. All motion via transform/opacity only; expo-out cubic-bezier(0.16,1,0.3,1) entrances; linear loops; prefers-reduced-motion settles everything on the constructivist end-state

---
"Kinetic Constructivism" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/kinetic-constructivism @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Kinetic Constructivism. \"Kinetic Constructivism\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/kinetic-constructivism @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-kinetic-constructivism",
      "license": "MIT",
      "attribution": "\"Kinetic Constructivism\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/kinetic-constructivism @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#efe9dc"
    },
    "foreground": {
      "$type": "color",
      "$value": "#17130e"
    },
    "card": {
      "$type": "color",
      "$value": "#efe9dc"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#17130e"
    },
    "primary": {
      "$type": "color",
      "$value": "#efe9dc"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#17130e"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#17130e"
    },
    "accent": {
      "$type": "color",
      "$value": "#e0231b"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e1dbcf"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#686662"
    },
    "border": {
      "$type": "color",
      "$value": "#cec8bd"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#efe9dc"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0px"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Kinetic Constructivism" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/kinetic-constructivism @ bfa7da909e86. */
:root {
  --background: #efe9dc;
  --foreground: #17130e;
  --card: #efe9dc;
  --card-foreground: #17130e;
  --primary: #efe9dc;
  --primary-foreground: #1c1917;
  --secondary: #17130e;
  --secondary-foreground: #17130e;
  --accent: #e0231b;
  --accent-foreground: #fafaf9;
  --muted: #e1dbcf;
  --muted-foreground: #686662;
  --border: #cec8bd;
  --destructive: #dc2626;
  --ring: #efe9dc;
  --radius: 0px;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Kinetic Constructivism" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/kinetic-constructivism @ bfa7da909e86. */
/** Tailwind theme extend for Kinetic Constructivism (stylekit-kinetic-constructivism) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#efe9dc",
        "foreground": "#17130e",
        "card": "#efe9dc",
        "primary": "#efe9dc",
        "primary-foreground": "#1c1917",
        "secondary": "#17130e",
        "accent": "#e0231b",
        "muted": "#e1dbcf",
        "border": "#cec8bd",
        "destructive": "#dc2626",
        "ring": "#efe9dc"
      },
      "borderRadius": {
        "lg": "0px"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Kinetic Constructivism" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/kinetic-constructivism @ bfa7da909e86. */
@layer base {
:root {
  --background: #efe9dc;
  --foreground: #17130e;
  --card: #efe9dc;
  --card-foreground: #17130e;
  --primary: #efe9dc;
  --primary-foreground: #1c1917;
  --secondary: #17130e;
  --secondary-foreground: #17130e;
  --accent: #e0231b;
  --accent-foreground: #fafaf9;
  --muted: #e1dbcf;
  --muted-foreground: #686662;
  --border: #cec8bd;
  --destructive: #dc2626;
  --ring: #efe9dc;
  --radius: 0px;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}