# Krea design system

> Krea design system measured from krea.ai: Suisse Intl font, #262626 primary on #0B0F15, 15 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/krea.ai/

Krea’s website (krea.ai) uses the Suisse Intl font and #262626 as its main color on a #0B0F15 background. Measured by Sitepeel on November 4, 2026.

## What font does Krea use?

Krea uses Suisse Intl (weights 400, 450, 500 and 600) on krea.ai. Page titles are 60px at weight 400 (36px on phones) and body text is 14px. Measured on November 4, 2026.

- Suisse Intl (weights 400, 450, 500, 600)

## Krea colors: palette and hex codes

Krea’s main colors are #0B0F15 (cool charcoal) for the background, #FFFFFF (white) for text and #262626 (graphite) as the main accent, with #006EFF (vivid blue) as another accent. Measured on November 4, 2026.

- #0B0F15: cool charcoal
- #FFFFFF: white
- #A3A3A3: gray
- #737373: slate
- #404040: graphite
- #0D1530: deep blue
- #000000: near black
- #262626: graphite

## What is Krea built with?

Krea’s website (krea.ai) is built with Svelte, SvelteKit, shadcn/ui, Tailwind CSS and Cloudflare. Measured on November 4, 2026.

- JavaScript framework: Svelte 5, SvelteKit
- Animation & 3D: GSAP 3.14.2
- Analytics: Meta Pixel 2.9.435, PostHog, Sentry 11.10.0, Google Ads
- Hosting & CDN: Cloudflare
- Fonts & icons: Iconify, Lucide
- Marketing & support: HubSpot

## Questions and answers

### What font does Krea use?

Krea’s website uses Suisse Intl (weights 400, 450, 500 and 600). Page titles are 60px at weight 400 (36px on phones) and body text is 14px. Measured on November 4, 2026.

### What are the Krea colors and hex codes?

On krea.ai: #0B0F15 (cool charcoal) for the background, #FFFFFF (white) for text and #262626 (graphite) as the main accent, with #006EFF (vivid blue) as another accent. The color palette above lists all 15 colors with their hex codes and where each one is used.

### What is the Krea design system?

The design system on this page is krea.ai’s, as measured on November 4, 2026: Suisse Intl type, #262626 as the main color and 8px corners, written down as a DESIGN.md. It is not Krea’s own documentation.

### What is Krea built with?

Krea’s website (krea.ai) is built with Svelte, SvelteKit, shadcn/ui, Tailwind CSS and Cloudflare. The full tech stack Sitepeel found: Svelte, SvelteKit, GSAP, Meta Pixel, PostHog, Sentry, Cloudflare, Iconify, HubSpot and Stripe. Measured on November 4, 2026.

### What is the Krea DESIGN.md?

A plain-text file with Krea’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Krea’s official design system?

No. Sitepeel measured it from krea.ai’s public page on November 4, 2026. It is an independent analysis, not made or approved by Krea.

### Can I use Krea’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Krea’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/krea.ai/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Krea.

## The DESIGN.md file

```markdown
---
version: alpha
name: Krea
description: "Dark monochrome interface measured from krea.ai: Suisse Intl type, tonal surfaces and 8px corners."
colors:
  background: "#0B0F15"
  surface: "#0B0F15"
  on-surface: "#FFFFFF"
  on-background: "#FFFFFF"
  on-surface-variant: "#A3A3A3"
  on-surface-muted: "#737373"
  on-surface-subtle: "#404040"
  surface-container-low: "#0D1530"
  surface-container: "#000000"
  surface-container-high: "#262626"
  overlay: "#FFFFFF1A"
  overlay-strong: "#FFFFFF0B"
  outline: "#FFFFFF26"
  outline-variant: "#00000033"
  primary: "#262626"
  on-primary: "#FFFFFF"
  secondary: "#006EFF"
typography:
  display-hero:
    fontFamily: Suisse Intl
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.025em
  headline-display:
    fontFamily: Suisse Intl
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.05
  headline-lg:
    fontFamily: Suisse Intl
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.015em
  headline-md:
    fontFamily: Suisse Intl
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
  headline-sm:
    fontFamily: Suisse Intl
    fontSize: 20px
    fontWeight: 450
    lineHeight: 1.25
  body-md:
    fontFamily: Suisse Intl
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  body-lg:
    fontFamily: Suisse Intl
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.01em
  body-sm:
    fontFamily: Suisse Intl
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1
  caption:
    fontFamily: Suisse Intl
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
  label-lg:
    fontFamily: Suisse Intl
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Suisse Intl
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.33
  label-sm:
    fontFamily: Suisse Intl
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
  headline-display-mobile:
    fontFamily: Suisse Intl
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.05
  headline-lg-mobile:
    fontFamily: Suisse Intl
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: -0.015em
rounded:
  sm: 8px
  md: 14px
  lg: 16px
  xl: 24px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 64px
  gutter: 8px
  section: 160px
  margin: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    padding: 8px 16px
    height: 36px
  button-primary-hover:
    backgroundColor: "#202020"
  button-secondary:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface-container}"
    typography: "{typography.label-lg}"
    padding: 24px 40px
    height: 48px
  button-secondary-hover:
    backgroundColor: "#FFFFFFE6"
  button-outline:
    backgroundColor: "{colors.overlay-strong}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    padding: 24px 40px
    height: 50px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.sm}"
    padding: 12px
  card:
    textColor: "#0A0A0A"
    typography: "{typography.label-lg}"
    rounded: "{rounded.lg}"
    padding: 24px 32px
  link:
    textColor: "{colors.on-surface-muted}"
---

# Krea Design System

## Overview

Krea describes itself as: “Generate, edit, and enhance images, videos, and 3D with Krea's AI creative suite. Start free with real-time tools and the best generative models.” The interface is dark, built on **Cool Charcoal (#0B0F15)** with **White (#FFFFFF)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Suisse Intl**. Headlines run large; body text is 14px. Depth comes from soft drop shadows. Corners are mostly 8px.

Measured from [krea.ai](https://www.krea.ai/) on November 4, 2026 at 1440×900 and 390×844 from 449 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 15 roles, plus gradient stops #4C9EFF, #155DFC, #2E6CF6, #1A3FB8.

- **Cool Charcoal (#0B0F15):** Page background, seen 1 time. Token `background`.
- **White (#FFFFFF):** Primary text and headings, seen 43 times. Token `on-surface`, CSS `--color-white`.
- **Gray (#A3A3A3):** Secondary text, seen 12 times. Token `on-surface-variant`, CSS `--color-primary-400`.
- **Slate (#737373):** Muted text and metadata, seen 15 times. Token `on-surface-muted`, CSS `--color-primary-500`.
- **Graphite (#404040):** Subtle text and placeholders, seen 46 times. Token `on-surface-subtle`, CSS `--color-primary-700`.
- **Deep Blue (#0D1530):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Near Black (#000000):** Cards and panels, seen 1 time. Token `surface-container`, CSS `--color-primary-1000`.
- **Graphite (#262626):** Hover and pressed fills, seen 10 times. Token `surface-container-high`, CSS `--color-primary-800`.
- **White 10% (#FFFFFF1A):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **White 4% (#FFFFFF0B):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **White 15% (#FFFFFF26):** Borders and dividers, seen 3 times. Token `outline`.
- **Near Black 20% (#00000033):** Secondary dividers, seen 1 time. Token `outline-variant`.
- **Graphite (#262626):** Primary buttons and calls to action, seen 10 times. Token `primary`, CSS `--color-primary-800`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Vivid Blue (#006EFF):** Accent in text, fills and borders, seen 6 times. Token `secondary`.

## Typography

**Suisse Intl** carries the whole interface. Fallback stack: `Suisse Intl, ui-sans-serif, system-ui, sans-serif`.

- **display-hero:** Suisse Intl 72px at weight 600, line height 1.05, tracking -0.025em. Oversized hero statements.
- **headline-display:** Suisse Intl 60px at weight 400, line height 1.05 (36px on mobile). Page title (h1).
- **headline-lg:** Suisse Intl 30px at weight 600, line height 1.2, tracking -0.015em (24px on mobile). Section headings (h2).
- **headline-md:** Suisse Intl 24px at weight 600, line height 1.33. Sub-section headings.
- **headline-sm:** Suisse Intl 20px at weight 450, line height 1.25. Card and feature titles.
- **body-md:** Suisse Intl 14px at weight 400, line height 1.43. Body text.
- **body-lg:** Suisse Intl 15px at weight 400, line height 1.5, tracking 0.01em. Lead paragraphs.
- **body-sm:** Suisse Intl 13px at weight 400, line height 1. Secondary and small text.
- **caption:** Suisse Intl 12px at weight 400, line height 1.33. Captions and fine print.
- **label-lg:** Suisse Intl 16px at weight 400, line height 1.5. Large buttons and tabs.
- **label-md:** Suisse Intl 15px at weight 500, line height 1.33. Buttons, navigation and labels.
- **label-sm:** Suisse Intl 14px at weight 500, line height 1.43. Small labels and badges.

## Layout

Spacing is mostly on a 4px grid (81% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 4px, sm 8px, md 12px, lg 20px, xl 64px.
- **Sections:** 160px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Page margin:** 64px on each side of full-width sections.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 6px 0px`
- `rgba(255, 255, 255, 0.9) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.28) 0px 18px 40px -28px`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`

## Shapes

Most elements use 8px corners. Measured radii, most used first:

- **sm (8px):** 124 elements.
- **md (14px):** 32 elements.
- **xl (24px):** 30 elements.
- **lg (16px):** 24 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Log in”):** #262626 fill, #FFFFFF text, 14px/450, 3.35544e+07px radius, padding 8px 16px.
- **button-primary-hover:** background #202020, text #FFFFFF on hover.
- **button-secondary (“Open Krea”):** #FFFFFF fill, #000000 text, 16px/450, 3.35544e+07px radius, padding 24px 40px.
- **button-secondary-hover:** background #FFFFFFE6, text #000000 on hover.
- **button-outline (“Krea Agent”):** #FFFFFF0B fill, #FFFFFF text, 16px/450, 3.35544e+07px radius, padding 24px 40px, border 1px solid #FFFFFF26, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`.
- **button-ghost (“Features”):** transparent fill, #FFFFFF text, 15px/400, 8px radius, padding 12px.
- **card:** transparent fill, #0A0A0A text, 16px/400, 16px radius, padding 24px 32px, shadow `rgba(255, 255, 255, 0.9) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.28) 0px 18px 40px -28px`.
- **link:** transparent fill, #737373 text, padding 0px.

## Do's and Don'ts

- Do use #0B0F15 for the page and lift surfaces in small steps: #0D1530, #000000, #262626.
- Do keep text in 4 levels: #FFFFFF, #A3A3A3, #737373, #404040.
- Do let contrast carry emphasis; primary actions use #262626 on #0B0F15.
- Do reuse the measured spacing steps (8px, 12px, 20px).
- Do use 8px corners on most elements; larger surfaces also use 14px, 24px and 16px.
- Don't use #737373 for body text; it reaches 4.05:1 on #0B0F15. Keep it for large text or metadata.
- Don't use #404040 for body text; it reaches 1.85:1 on #0B0F15. Keep it for large text or metadata.
- Don't introduce new font families beyond Suisse Intl.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.2s, 0.3s, 0.4s, 0.15s. Longer ambient animations run 0.7s.

- **Easing:** `cubic-bezier(0, 0, 0.2, 1)`, `cubic-bezier(0.4, 0, 0.2, 1)`, `ease-out`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/krea.ai/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```