DESIGN.md · Analysis

Plnty

plnty.app · 8 Sept 2026 · 47 colors · KMR Apparat, Suisse Intl

Plnty

Plnty is a unified creative platform that transforms frontier AI models into purpose-built design tools for image, video, vector, 3D, and audio—all on one shared canvas. The design system embodies a 'Precision Minimalism' aesthetic: austere, confident, and tool-focused, with strategic color accents that guide creative

Colors

surface#f8f8f8

surface-dim#e9e8e3

surface-bright#fcfcfc

surface-container-lowest#f2f2f2

surface-container-low#f7f7f2

surface-container#f0f0eb

surface-container-high#e9e8e3

surface-container-highest#ddd9d0

on-surface#1a1a19

on-surface-variant#55554f

inverse-surface#1a1a19

inverse-on-surface#f7f7f2

outline#7a7a73

outline-variant#9a9a92

surface-tint#76c1f5

primary#76c1f5

on-primary#092538

primary-container#c5e0f5

on-primary-container#0d3a52

inverse-primary#5ba8d9

secondary#a68aff

on-secondary#471c6e

secondary-container#e8deff

on-secondary-container#5e2f8f

tertiary#dfba34

on-tertiary#3d2f00

tertiary-container#fce8a8

on-tertiary-container#58470e

error#c0392b

on-error#ffffff

error-container#f8d7d5

on-error-container#8b0000

primary-fixed#c5e0f5

primary-fixed-dim#a8cce8

on-primary-fixed#001d33

on-primary-fixed-variant#0d3a52

secondary-fixed#e8deff

secondary-fixed-dim#d0bfff

on-secondary-fixed#2d0052

on-secondary-fixed-variant#5e2f8f

tertiary-fixed#fce8a8

tertiary-fixed-dim#e8d08f

on-tertiary-fixed#2d2200

on-tertiary-fixed-variant#58470e

background#f8f8f8

on-background#1a1a19

surface-variant#d6d5cf

Typography

display: fontFamily: KMR Apparat · fontSize: 96px · fontWeight: 500 · lineHeight: 104px · letterSpacing: -0.02em
headline-lg: fontFamily: KMR Apparat · fontSize: 56px · fontWeight: 500 · lineHeight: 64px · letterSpacing: -0.015em
headline-md: fontFamily: KMR Apparat · fontSize: 40px · fontWeight: 500 · lineHeight: 48px · letterSpacing: -0.01em
title-lg: fontFamily: Suisse Intl · fontSize: 24px · fontWeight: 500 · lineHeight: 32px · letterSpacing: -0.005em
body-lg: fontFamily: Suisse Intl · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0em
body-md: fontFamily: Suisse Intl · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0em
label-md: fontFamily: Suisse Intl · fontSize: 14px · fontWeight: 500 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: Suisse Intl · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.05em

Design guidance

Overview

Plnty is a unified creative platform that transforms frontier AI models into purpose-built design tools for image, video, vector, 3D, and audio—all on one shared canvas. The design system embodies 'Precision Minimalism': an austere, confident aesthetic that prioritizes tool clarity and creative intent over decorative flourish. The UI evokes the feeling of a professional workshop—clean, purposeful, and uncluttered—where the interface recedes and the work takes center stage. The brand personality is direct, intelligent, and unapologetically technical. Voice: matter-of-fact, precise, never flowery. Vocabulary favors active verbs and concrete nouns ("turn ideas into killer work," "purpose-built tools"). Example sentence: "Plnty helps you find the idea and turn it into killer work across image, video, vector, 3D and audio."

Colors

The color palette operates on a principle of 'strategic accent over neutral canvas.' The dominant surface is a near-white (#f8f8f8) with a carefully calibrated text hierarchy: primary text at #1a1a19 (near-black, 53% frequency), secondary at #55554f (warm gray), and tertiary at #7a7a73 (lighter gray). This creates visual rhythm without relying on color saturation. Primary accent is a sky blue (#76c1f5, RGB 118, 193, 245) used exclusively on CTAs and interactive focus states—it appears on the 'Request Access' button and signals interactivity. Secondary accent is a vibrant purple (#a68aff, RGB 166, 138, 255) reserved for secondary CTAs and community links (Discord). Tertiary accent is a warm gold (#dfba34) used for badges, highlights, and the ecosystem root node. Error states use #c0392b. Al

Typography

The type system pairs two distinct typefaces to create hierarchy and personality. KMR Apparat (fontWeight 500) serves as the display and headline face—a geometric, technical typeface that conveys precision and modernity. It appears at sizes 96px (display), 56px (headline-lg), and 40px (headline-md) with tight negative letter-spacing (-0.02em to -0.01em) to reinforce its geometric character. Suisse Intl (fontWeight 400–500) is the body and label typeface—a humanist sans-serif that ensures readability at small sizes and provides warmth against Apparat's coldness. Body text runs at 16–18px with 24–28px line-height (1.5x multiplier) for comfortable reading. Labels and UI text use 12–14px at fontWeight 500 with 0.01–0.05em letter-spacing to add visual separation in dense layouts. The pairing co

Layout

The page uses a fixed container max-width of 860px centered on the viewport, creating a narrow, focused reading column that prioritizes content clarity over horizontal sprawl. The grid is 12 columns at this width, with a 24px gutter between sections. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for inline spacing, md (24px) for section padding and card margins, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The hero section uses lg spacing (40px) above and below to create breathing room around the large headline (96px). Body copy sits at 18px with 28px line-height, creating a 1.56x ratio that balances density and legibility. Cards and input fields use md padding (24px) internally. The ticker header and navigation occupy a f

Elevation & Depth

Depth in Plnty is conveyed through subtle shadow and surface-color shifts rather than dramatic layering. The elevation system uses three levels: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for resting cards and inputs—barely perceptible, suggesting a paper-thin lift; md (0 3px 8px rgba(0, 0, 0, 0.15)) for hover states and modals—a noticeable but not aggressive shadow that signals interactivity; lg (0 24px 70px rgba(0, 0, 0, 0.28)) for overlays and pinned cards—a dramatic shadow that pulls the element forward and establishes clear layering. Hairlines use opacity rather than shadow: subtle (rgba(26, 26,

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are present but restrained, signaling approachability without sacrificing precision. The rounded scale uses 3px (sm) for small UI elements like code blocks and tight controls, 6px (DEFAULT) for standard buttons and inputs, 7px (md) for cards and larger containers, 11px (lg) for prominent cards and modals, 16px (xl) for hero-adjacent elements, and 9999px (full) for pills and badges. Buttons use 11px (lg) to feel substantial and clickable without appearing soft or toy-like. Input fields use 6px (DEFAULT) to maintain visual consistency wit

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses background: {colors.primary} (#76c1f5), text-color: {colors.on-primary} (#092538), rounded: {rounded.lg} (11px), padding: 12px 24px, and height: 44px. On hover, background shifts to #5ba8d9 with a 150ms ease transition. The secondary button mirrors this structure but uses background: {colors.secondary} (#a68aff) and text-color: {colors.on-secondary} (#471c6e). Ghost buttons use a transparent background with a 1px border in {colors.outline-variant} (#9a9a92) and text-color: {colors.on-surface} (#1a1a19); on hover, background becomes {colors.surface-container-high} (#e9e8e3) and border shifts to {colors.outline} (#7a7a73). All buttons use fontWeight: 500 and {typography.label-md} (14px, 20px line-heigh

---
version: alpha
name: Plnty
description: >-
  Plnty is a unified creative platform that transforms frontier AI models into purpose-built design tools for image,
  video, vector, 3D, and audio—all on one shared canvas. The design system embodies a 'Precision Minimalism' aesthetic:
  austere, confident, and tool-focused, with strategic color accents that guide creative 
logo:
  src: https://plnty.app/favicon.svg
colors:
  surface: '#f8f8f8'
  surface-dim: '#e9e8e3'
  surface-bright: '#fcfcfc'
  surface-container-lowest: '#f2f2f2'
  surface-container-low: '#f7f7f2'
  surface-container: '#f0f0eb'
  surface-container-high: '#e9e8e3'
  surface-container-highest: '#ddd9d0'
  on-surface: '#1a1a19'
  on-surface-variant: '#55554f'
  inverse-surface: '#1a1a19'
  inverse-on-surface: '#f7f7f2'
  outline: '#7a7a73'
  outline-variant: '#9a9a92'
  surface-tint: '#76c1f5'
  primary: '#76c1f5'
  on-primary: '#092538'
  primary-container: '#c5e0f5'
  on-primary-container: '#0d3a52'
  inverse-primary: '#5ba8d9'
  secondary: '#a68aff'
  on-secondary: '#471c6e'
  secondary-container: '#e8deff'
  on-secondary-container: '#5e2f8f'
  tertiary: '#dfba34'
  on-tertiary: '#3d2f00'
  tertiary-container: '#fce8a8'
  on-tertiary-container: '#58470e'
  error: '#c0392b'
  on-error: '#ffffff'
  error-container: '#f8d7d5'
  on-error-container: '#8b0000'
  primary-fixed: '#c5e0f5'
  primary-fixed-dim: '#a8cce8'
  on-primary-fixed: '#001d33'
  on-primary-fixed-variant: '#0d3a52'
  secondary-fixed: '#e8deff'
  secondary-fixed-dim: '#d0bfff'
  on-secondary-fixed: '#2d0052'
  on-secondary-fixed-variant: '#5e2f8f'
  tertiary-fixed: '#fce8a8'
  tertiary-fixed-dim: '#e8d08f'
  on-tertiary-fixed: '#2d2200'
  on-tertiary-fixed-variant: '#58470e'
  background: '#f8f8f8'
  on-background: '#1a1a19'
  surface-variant: '#d6d5cf'
typography:
  display:
    fontFamily: KMR Apparat
    fontSize: 96px
    fontWeight: '500'
    lineHeight: 104px
    letterSpacing: '-0.02em'
  headline-lg:
    fontFamily: KMR Apparat
    fontSize: 56px
    fontWeight: '500'
    lineHeight: 64px
    letterSpacing: '-0.015em'
  headline-md:
    fontFamily: KMR Apparat
    fontSize: 40px
    fontWeight: '500'
    lineHeight: 48px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Suisse Intl
    fontSize: 24px
    fontWeight: '500'
    lineHeight: 32px
    letterSpacing: '-0.005em'
  body-lg:
    fontFamily: Suisse Intl
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0em
  body-md:
    fontFamily: Suisse Intl
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0em
  label-md:
    fontFamily: Suisse Intl
    fontSize: 14px
    fontWeight: '500'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Suisse Intl
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.05em
rounded:
  sm: 3px
  DEFAULT: 6px
  md: 7px
  lg: 11px
  xl: 16px
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 860px
elevation:
  sm: 0 1px 3px rgba(0, 0, 0, 0.08)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 0 24px 70px rgba(0, 0, 0, 0.28)
layout:
  containerMaxWidth: 860px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 44px
    fontWeight: '500'
    border: none
  button-primary-hover:
    backgroundColor: '#5ba8d9'
    textColor: '{colors.on-primary}'
    transition: background-color 150ms ease
  button-secondary:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-secondary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 44px
    fontWeight: '500'
    border: none
  button-secondary-hover:
    backgroundColor: '#9575e8'
    textColor: '{colors.on-secondary}'
    transition: background-color 150ms ease
  button-ghost:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 44px
    border: 1px solid {colors.outline-variant}
    fontWeight: '500'
  button-ghost-hover:
    backgroundColor: '{colors.surface-container-high}'
    border: 1px solid {colors.outline}
    transition: background-color 150ms ease, border-color 150ms ease
  card:
    backgroundColor: '{colors.surface-container-lowest}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.md}'
    border: 1px solid {colors.surface-variant}
    boxShadow: '{elevation.sm}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
    boxShadow: '{elevation.md}'
    transition: background-color 200ms ease, box-shadow 200ms ease
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
    border: 1px solid {colors.surface-variant}
    height: 44px
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(118, 193, 245, 0.1)
    transition: border-color 150ms ease, box-shadow 150ms ease
  pill-resting:
    backgroundColor: '#1a1a19'
    textColor: '#f8f8f8'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 8px 16px
    height: 32px
    fontFamily: KMR Apparat
    fontSize: 12px
    fontWeight: '500'
    letterSpacing: '-0.015em'
  pill-hover:
    backgroundColor: '#000000'
    textColor: '#f8f8f8'
    transition: background-color 150ms ease
  badge:
    backgroundColor: '{colors.tertiary-container}'
    textColor: '{colors.on-tertiary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    fontSize: 11px
    fontWeight: '500'
    letterSpacing: 0.05em
  divider:
    backgroundColor: '{colors.surface-variant}'
    height: 1px
    opacity: '0.12'
  hairline-subtle:
    backgroundColor: rgba(26, 26, 25, 0.08)
    height: 1px
  hairline-resting:
    backgroundColor: rgba(26, 26, 25, 0.12)
    height: 1px
---

## Overview

Plnty is a unified creative platform that transforms frontier AI models into purpose-built design tools for image, video, vector, 3D, and audio—all on one shared canvas. The design system embodies 'Precision Minimalism': an austere, confident aesthetic that prioritizes tool clarity and creative intent over decorative flourish. The UI evokes the feeling of a professional workshop—clean, purposeful, and uncluttered—where the interface recedes and the work takes center stage. The brand personality is direct, intelligent, and unapologetically technical. Voice: matter-of-fact, precise, never flowery. Vocabulary favors active verbs and concrete nouns ("turn ideas into killer work," "purpose-built tools"). Example sentence: "Plnty helps you find the idea and turn it into killer work across image, video, vector, 3D and audio."

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interaction mechanism. The primary button uses background: {colors.primary} (#76c1f5), text-color: {colors.on-primary} (#092538), rounded: {rounded.lg} (11px), padding: 12px 24px, and height: 44px. On hover, background shifts to #5ba8d9 with a 150ms ease transition. The secondary button mirrors this structure but uses background: {colors.secondary} (#a68aff) and text-color: {colors.on-secondary} (#471c6e). Ghost buttons use a transparent background with a 1px border in {colors.outline-variant} (#9a9a92) and text-color: {colors.on-surface} (#1a1a19); on hover, background becomes {colors.surface-container-high} (#e9e8e3) and border shifts to {colors.outline} (#7a7a73). All buttons use fontWeight: 500 and {typography.label-md} (14px, 20px line-heigh

Edit, then copy or download.