# Design Reference - Krea
> Midnight Terminal Interface. Imagine looking at code on a deep dark monitor, illuminated only by crisp white text and subtle UI elements.

## Source
- Original site: https://krea.ai
- Captured: 2026-04-11T18:36:49.487Z

## Tags
- dark-mode
- minimalist
- monochromatic
- high-contrast
- precise
- modern-tech
- command-center
- subtle-gradients
- functional

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Void Black | `#000000` | neutral | Primary background, text (on light buttons), icons, borders. |
| Canvas White | `#ffffff` | neutral | Primary text, button backgrounds, interactive elements, icons. |
| Ash Gray | `#a3a3a3` | neutral | Secondary text, disabled states, subtle borders. |
| Coal | `#171717` | neutral | Darker interactive elements, subtle surface variations. |
| Iron | `#262626` | neutral | Button backgrounds for secondary actions. |
| Frost | `#f5f5f5` | neutral | Light button backgrounds, subtle accents in light mode elements. |
| Deep Space Gradient | `#474747` | neutral | Background feature sections, providing a sense of depth and atmospheric perspective. |
| Cosmic Drift Gradient | `#646464` | neutral | Variant gradient for sections, implying subtle light sources or material depth. |
| Haze Gradient | `#FFFFFF` | neutral | Rare usage, likely for product shots or specific content blocks, to hint at a layered interface element. |

## Typography
- role: Dominant and sole typeface, maintaining a consistent, precise tone across all content from large display headings to small body text. The tight letter-spacing for larger sizes gives headlines a carved, intentional feel, while wider spacing for small text aids readability. Its custom nature highlights a brand commitment to distinct visual identity.; sizes: 12px, 13px, 14px, 15px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 60px, 72px, 96px; family: Suisse Intl; weight: 400, 450, 500, 600, 700; lineHeight: 1.00, 1.05, 1.11, 1.20, 1.25, 1.33, 1.38, 1.40, 1.43, 1.50, 1.56; substitute: Inter; letterSpacing: -0.0250em, -0.0150em, 0.0100em, 0.0150em, 0.1000em

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "large": "14px",
      "buttons": "8px",
      "default": "8px",
      "extraLarge": "32px"
    },
    "elementGap": "8px",
    "sectionGap": "72px",
    "cardPadding": "20px"
  },
  "radius": {
    "large": "14px",
    "buttons": "8px",
    "default": "8px",
    "extraLarge": "32px"
  }
}
```

## Component Patterns
- name: CTA Button Group
- name: Feature Stat / Metric Cards
- name: Pricing Plan Cards
- name: Primary Action Button; role: Call to action.
- name: Secondary Action Button; role: Alternative action.
- name: Ghost Navigation Button; role: Navigation links in header, subtle secondary calls-to-action.
- name: Navigation Link Button; role: Top navigation items.
- name: Image Action Button; role: Action button within an image or content block.
- name: Header Navigation Link; role: Primary navigation items in the header.

## Do
- Use Suisse Intl as the sole typeface, varying weight and size for hierarchy.
- Prioritize Void Black (#000000) for backgrounds and Canvas White (#ffffff) for foreground text to maintain high contrast.
- Apply 8px border radius consistently for most interactive elements like buttons and cards.
- Employ the Deep Space Gradient (linear-gradient(rgb(71, 71, 71) 0%, rgb(0, 0, 0) 100%)) or Cosmic Drift Gradient (linear-gradient(200deg, rgb(100, 100, 100) 0%, rgb(0, 0, 0) 100%)) for feature section backgrounds to create subtle depth.
- Use Ash Gray (#a3a3a3) for secondary text and disabled states to reduce visual hierarchy.
- Maintain a default letter-spacing pattern, notably the tight -0.0150em for larger headings, to achieve a precise, chiseled look.
- Utilize specific padding values (e.g., 12px vertical, 20px horizontal for primary buttons) to ensure consistent element sizing.

## Don't
- Do not introduce additional saturated colors beyond the strict neutral palette.
- Avoid overuse of shadows; reserve the rgba(0, 0, 0, 0.1) 0px 1px 6px 0px shadow for interactive elements only.
- Do not deviate from Suisse Intl; no other font families should be used.
- Do not use generic border radii; adhere to 8px, 14px, or 32px values.
- Avoid bright or high-key imagery that would disrupt the dark, high-contrast aesthetic.
- Do not use letter-spacing values outside the defined -0.0250em, -0.0150em, 0.0100em, 0.0150em, 0.1000em ranges.
- Do not apply vibrant accent colors to active states; rely on subtle background changes or border shifts instead.