Skip to content

PUBLIC REFERENCE

Krea

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

2026-04-11 Source style Original site
Krea captured reference
DESIGN.md tokens.json Tailwind v4 detail JSON

Colors

Void Black #000000

Primary background, text (on light buttons), icons, borders.

Canvas White #ffffff

Primary text, button backgrounds, interactive elements, icons.

Ash Gray #a3a3a3

Secondary text, disabled states, subtle borders.

Coal #171717

Darker interactive elements, subtle surface variations.

Iron #262626

Button backgrounds for secondary actions.

Frost #f5f5f5

Light button backgrounds, subtle accents in light mode elements.

Deep Space Gradient #474747

Background feature sections, providing a sense of depth and atmospheric perspective.

Cosmic Drift Gradient #646464

Variant gradient for sections, implying subtle light sources or material depth.

Haze Gradient #FFFFFF

Rare usage, likely for product shots or specific content blocks, to hint at a layered interface element.

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.