# Embarko design system

> Embarko design system measured from embarko.ai: Inter font, 15 color hex codes, type scale, spacing and a free DESIGN.md. Light theme with pill corners.

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

Embarko’s website (embarko.ai) uses the Inter font on a #F5F4F0 background. Measured by Sitepeel on November 4, 2026.

## What font does Embarko use?

Embarko uses Inter (weights 400, 500, 600 and 800) on embarko.ai. Page titles are 80px at weight 800 (44px on phones) and body text is 14px. Measured on November 4, 2026.

- Inter (weights 400, 500, 600, 800)
- ui-monospace (weights 400)

## Embarko colors: palette and hex codes

Embarko’s main colors are #F5F4F0 (mist) for the background and #1A1916 (charcoal) for text, with #16A34A (dark green) as another accent. Measured on November 4, 2026.

- #F5F4F0: mist
- #1A1916: charcoal
- #525252: slate
- #6F6A62: warm slate
- #736D65: warm slate
- #FDFDFB: snow
- #ECEAE3: warm mist
- #CFE6D6: light green

## What is Embarko built with?

Embarko’s website (embarko.ai) is built with Next.js, React, Tailwind CSS, Cloudflare and Lucide. Measured on November 4, 2026.

- JavaScript framework: Next.js 15.5.25, React 19.2.0-canary-0bdb9206-2
- Hosting & CDN: Cloudflare
- Analytics: Cloudflare Web Analytics, Google Ads, Microsoft Clarity, Google Analytics
- UI & CSS: Tailwind CSS 4.x
- Fonts & icons: Lucide

## Questions and answers

### What font does Embarko use?

Embarko’s website uses Inter (weights 400, 500, 600 and 800). Page titles are 80px at weight 800 (44px on phones) and body text is 14px. Measured on November 4, 2026.

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

On embarko.ai: #F5F4F0 (mist) for the background and #1A1916 (charcoal) for text, with #16A34A (dark green) as another accent. The color palette above lists all 15 colors with their hex codes and where each one is used.

### What is the Embarko design system?

The design system on this page is embarko.ai’s, as measured on November 4, 2026: Inter type and pill-shaped corners, written down as a DESIGN.md. It is not Embarko’s own documentation.

### What is Embarko built with?

Embarko’s website (embarko.ai) is built with Next.js, React, Tailwind CSS, Cloudflare and Lucide. The full tech stack Sitepeel found: Next.js, React, Cloudflare, Cloudflare Web Analytics, Google Ads, Microsoft Clarity, Tailwind CSS, Lucide, Google Analytics and Google Tag Manager. Measured on November 4, 2026.

### What is the Embarko DESIGN.md?

A plain-text file with Embarko’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 Embarko’s official design system?

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

### Can I use Embarko’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 Embarko’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/embarko.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 Embarko.

## The DESIGN.md file

```markdown
---
version: alpha
name: Embarko
description: "Light monochrome interface measured from embarko.ai: Inter type, tonal surfaces and pill-shaped controls."
colors:
  background: "#F5F4F0"
  surface: "#F5F4F0"
  on-surface: "#1A1916"
  on-background: "#1A1916"
  on-surface-variant: "#525252"
  on-surface-muted: "#6F6A62"
  on-surface-subtle: "#736D65"
  surface-container-low: "#FDFDFB"
  surface-container: "#ECEAE3"
  surface-container-high: "#CFE6D6"
  overlay: "#FDFDFBB3"
  overlay-strong: "#FFFFFF1A"
  outline: "#E5E1D8"
  outline-variant: "#D4CEC3"
  primary: "#1A1916"
  on-primary: "#F5F4F0"
  secondary: "#16A34A"
typography:
  headline-display:
    fontFamily: Inter
    fontSize: 80px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.045em
  headline-lg:
    fontFamily: Inter
    fontSize: 60px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.045em
  headline-md:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.11
    letterSpacing: -0.025em
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.025em
  label-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.02em
  label-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
  code:
    fontFamily: ui-monospace
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  headline-display-mobile:
    fontFamily: Inter
    fontSize: 44px
    fontWeight: 800
    lineHeight: 0.98
    letterSpacing: -0.045em
  headline-lg-mobile:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 800
    lineHeight: 0.98
    letterSpacing: -0.045em
rounded:
  sm: 6px
  md: 22px
  full: 9999px
spacing:
  xs: 2px
  sm: 6px
  md: 16px
  lg: 24px
  xl: 36px
  gutter: 8px
  section: 80px
  margin: 24px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 0px 24px
    height: 52px
  button-primary-hover:
    backgroundColor: "#2B2B2B"
  button-outline:
    textColor: "#2563EB"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: 8px 16px
    height: 38px
  button-outline-hover:
    backgroundColor: "#EFF6FF"
  button-ghost:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-sm}"
    rounded: 0px
    padding: 0px
  card:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-container-low}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 0px
---

# Embarko Design System

## Overview

Embarko describes itself as: “Embarko gives the apps you build with AI a home online. Copy one prompt, paste it into your AI agent, and get a live URL with a database and storage built in.” The interface is light, built on **Mist (#F5F4F0)** with **Charcoal (#1A1916)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Inter**, with **ui-monospace** for code. Headlines run large with tight negative tracking; body text is 14px. Depth comes from soft drop shadows. Controls are pill-shaped.

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

## Colors

The palette has 15 roles.

- **Mist (#F5F4F0):** Page background. Token `background`, CSS `--ds-lime`.
- **Charcoal (#1A1916):** Primary text and headings, seen 53 times. Token `on-surface`, CSS `--ink`.
- **Slate (#525252):** Secondary text, seen 4 times. Token `on-surface-variant`.
- **Warm Slate (#6F6A62):** Muted text and metadata, seen 40 times. Token `on-surface-muted`, CSS `--ink-soft`.
- **Warm Slate (#736D65):** Subtle text and placeholders, seen 7 times. Token `on-surface-subtle`, CSS `--ds-dim`.
- **Snow (#FDFDFB):** Raised areas one step from the page, seen 27 times. Token `surface-container-low`, CSS `--surface`.
- **Warm Mist (#ECEAE3):** Cards and panels, seen 6 times. Token `surface-container`, CSS `--surface-2`.
- **Light Green (#CFE6D6):** Hover and pressed fills, seen 1 time. Token `surface-container-high`.
- **Snow 70% (#FDFDFBB3):** Translucent fill for cards and controls, seen 3 times. Token `overlay`.
- **White 10% (#FFFFFF1A):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **Warm Silver (#E5E1D8):** Borders and dividers, seen 25 times. Token `outline`.
- **Warm Silver (#D4CEC3):** Secondary dividers, seen 3 times. Token `outline-variant`.
- **Charcoal (#1A1916):** Primary buttons and calls to action, seen 79 times. Token `primary`, CSS `--ink`.
- **Mist (#F5F4F0):** Text and icons on primary. Token `on-primary`.
- **Dark Green (#16A34A):** Accent, seen 2 times. Token `secondary`, CSS `--ok`.

## Typography

**Inter** and **ui-monospace** (monospace) share the interface. Fallback stack: `Inter, -apple-system, BlinkMacSystemFont, Segoe UI`. Other loaded fonts: Instrument Serif.

- **headline-display:** Inter 80px at weight 800, line height 1, tracking -0.045em (44px on mobile). Page title (h1).
- **headline-lg:** Inter 60px at weight 800, line height 1, tracking -0.045em (36px on mobile). Section headings (h2).
- **headline-md:** Inter 36px at weight 600, line height 1.11, tracking -0.025em. Sub-section headings.
- **body-md:** Inter 14px at weight 400, line height 1.43. Body text.
- **body-lg:** Inter 18px at weight 600, line height 1.25, tracking -0.025em. Lead paragraphs.
- **label-lg:** Inter 16px at weight 400, line height 1.5. Large buttons and tabs.
- **label-md:** Inter 15px at weight 600, line height 1.5, tracking -0.02em. Buttons, navigation and labels.
- **label-sm:** Inter 14px at weight 500, line height 1.43. Small labels and badges.
- **code:** ui-monospace 16px at weight 400, line height 1.5. Code and technical values.

## Layout

Spacing does not follow a strict grid: 61% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2px, sm 6px, md 16px, lg 24px, xl 36px.
- **Sections:** 80px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Page margin:** 24px on each side of full-width sections.
- **Breakpoints:** 599px, 600px, 640px, 720px, 768px, 779px, 900px, 959px, 1024px, 1139px, 1280px, 1319px, 1440px, 1499px, 1536px, 1859px.

## Elevation & Depth

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

- `rgba(11, 11, 15, 0.03) 0px 1px 1px 0px, rgba(11, 11, 15, 0.04) 0px 2px 6px 0px, rgba(11, 11, 15, 0.1) 0px 16px 40px -12px`
- `rgba(26, 25, 22, 0.35) 0px 30px 60px -30px`

Hairline rings and inset highlights also appear: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(245, 244, 240) 0px 0px 0px 6px`.

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 88 elements.
- **md (22px):** 84 elements.
- **sm (6px):** 16 elements.

## Components

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

- **button-primary (“Host your app”):** #1A1916 fill, #F5F4F0 text, 15px/600, 999px radius, padding 0px 24px, border 1px solid #1A1916.
- **button-primary-hover:** background #2B2B2B, text #F5F4F0 on hover.
- **button-outline (“Sign up”):** transparent fill, #2563EB text, 14px/600, 9999px radius, padding 8px 16px, border 1px solid #2563EB.
- **button-outline-hover:** background #EFF6FF, text #2563EB on hover.
- **button-ghost (“Log in”):** transparent fill, #525252 text, 14px/500, padding 0px.
- **card:** #1A1916 fill, #FDFDFB text, 15px/700, 9999px radius, padding 0px, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(245, 244, 240) 0px 0px 0px 6px, rgb(212, 206, 195) 0px 0px 0px 7px`.

## Do's and Don'ts

- Do use #F5F4F0 for the page and lift surfaces in small steps: #FDFDFB, #ECEAE3, #CFE6D6.
- Do keep text in 4 levels: #1A1916, #525252, #6F6A62, #736D65.
- Do let contrast carry emphasis; primary actions use #1A1916 on #F5F4F0.
- Do set headlines in Inter with tight tracking (-0.045em).
- Do reuse the measured spacing steps (6px, 16px, 24px).
- Do make buttons and chips fully rounded (9999px); most other elements use 22px corners.
- Don't introduce new font families beyond Inter and ui-monospace.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.3s.

## Motion

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

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

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

```