AI · DESIGN.md · measured November 4, 2026

Krea design system

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.

#0B0F15
#0D1530
#FFFFFF
#262626

Download DESIGN.md

From krea.ai ↗ · 449 elements at 1440×900 and 390×844 Independent analysis, not affiliated with Krea

Krea color palette

15 colors with hex codes, grouped by where each one is used on the page.

Surfaces

Cool Charcoal#0B0F15backgroundPage background · 1×

Deep Blue#0D1530surface-container-lowRaised areas one step from the page · 1×

Near Black#000000surface-container · --color-primary-1000Cards and panels · 1×

Graphite#262626surface-container-high · --color-primary-800Hover and pressed fills · 10×

White 10%#FFFFFF1AoverlayTranslucent fill for cards and controls · 1×

White 4%#FFFFFF0Boverlay-strongStronger translucent fill · 1×

Text

White#FFFFFFon-surface · --color-whitePrimary text and headings · 43×

Gray#A3A3A3on-surface-variant · --color-primary-400Secondary text · 12×

Slate#737373on-surface-muted · --color-primary-500Muted text and metadata · 15×

Graphite#404040on-surface-subtle · --color-primary-700Subtle text and placeholders · 46×

White#FFFFFFon-primaryText and icons on primary

Accents

Graphite#262626primary · --color-primary-800Primary buttons and calls to action · 10×

Vivid Blue#006EFFsecondaryAccent in text, fills and borders · 6×

Borders

White 15%#FFFFFF26outlineBorders and dividers · 3×

Near Black 20%#00000033outline-variantSecondary dividers · 1×

Gradients

Krea fonts and type scale

One family carries the whole interface.

AaSuisse IntlWeights 400, 450, 500, 600Suisse Intl, ui-sans-serif, system-ui, sans-serif

display-heroOversized hero statementsKrea72px · 600 · 1.05 · -0.025em

headline-displayPage title (h1)Krea60px · 400 · 1.05
mobile 36px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog30px · 600 · 1.2 · -0.015em
mobile 24px

headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog24px · 600 · 1.33

headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog20px · 450 · 1.25

body-mdBody textThe quick brown fox jumps over the lazy dog14px · 400 · 1.43

body-lgLead paragraphsThe quick brown fox jumps over the lazy dog15px · 400 · 1.5 · 0.01em

body-smSecondary and small textThe quick brown fox jumps over the lazy dog13px · 400 · 1

captionCaptions and fine printThe quick brown fox jumps over the lazy dog12px · 400 · 1.33

label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog16px · 400 · 1.5

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog15px · 500 · 1.33

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog14px · 500 · 1.43

Contrast

Text on #0B0F15

AaAAA19.2:1

AaAAA7.6:1

AaLarge only4.0:1

AaLarge only1.8:1

Spacing

No strict grid · 81% are multiples of 4px

xs4px

sm8px

md12px

lg20px

xl64px

gutter8px

section160px

margin64px

Shapes

Corner radii, most used first.

sm8px · 124×

md14px · 32×

xl24px · 30×

lg16px · 24×

Depth

Shadow

Krea UI components

Rebuilt from the measured CSS.

button-primaryFilled button · hover to see the measured hover state

Open Krea

button-secondaryFilled button · hover to see the measured hover state

Krea Agent

button-outlineOutlined button

Features

button-ghostText button

Card

cardCard

Inline link

linkInline link

Motion

Interface transitions

0.2s0.3s0.4s0.15s

cubic-bezier(0, 0, 0.2, 1)cubic-bezier(0.4, 0, 0.2, 1)

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

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

Krea DESIGN.md256 lines

---
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).

Fonts

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.

AaSuisse Intl · 400, 450, 500, 600

Find every font on krea.ai with Font finder →

Colors

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

Get krea.ai’s palette as CSS or Tailwind with Colors →

Tech stack

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

Check krea.ai live with Tech stack →

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need a page behind a login?

The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.

See the Chrome extension

More in AI

All DESIGN.md examples →

LovableBrand lovable.dev · Camera Plain Variable

LumaBrand lumalabs.ai · graphik

MistralBrand mistral.ai · ALTMistral

ModalBrand modal.com · ABC Diatype

OpenAIBrand openai.com · OpenAI Sans

OpenRouterBrand openrouter.ai · gordita

Not in the library? Make a DESIGN.md from any site.

FAQ

Krea design system questions

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.