Claude Code
Cursor
Codex
GitHub Copilot
CareSimple
DESIGN.md · measured November 4, 2026
Ember design system
Dark interface · aeonik, Inter · 12px corners
- #0A0A0A
- #020617
- #FAFAFA
- #3B82F6
From emberdesign.net ↗ · 416 elements at 1440×900 and 390×844 Independent analysis, not affiliated with Ember
Ember color palette
12 colors with hex codes, grouped by where each one is used on the page.
Surfaces
Near Black
#0A0A0AbackgroundPage background · 16×Deep Indigo
#020617surface-container-low · --slate-950Raised areas one step from the page · 3×Snow 5%
#FAFAFA0DoverlayTranslucent fill for cards and controls · 1×White 30%
#FFFFFF4Doverlay-strongStronger translucent fill · 1×Cool Gray
#9DA3AEinverse-surfaceHigh-contrast fills · 64×Text
Snow
#FAFAFAon-surface · --neutral-50Primary text and headings · 79×Gray
#A3A3A3on-surface-variantSecondary text · 61×Charcoal
#171717on-primaryText and icons on primaryAccents
Snow
#FAFAFAprimary · --neutral-50Primary buttons and calls to action · 94×Vivid Blue
#3B82F6secondaryAccent · 47×Borders
Graphite 50%
#26262680outlineBorders and dividers · 64×Graphite
#262626outline-variant · --neutral-800Secondary dividers · 18×Gradients
Ember fonts and type scale
2 families.
AaaeonikWeights 500aeonik, aeonik Fallback
AaInterWeights 400, 500Inter, Inter Fallback
headline-displayPage title (h1)Ember96px · 500 · 1.15
mobile 48px
mobile 48px
headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog48px · 500 · 1.1
mobile 30px
mobile 30px
headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog30px · 500 · 1.2
headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog20px · 500 · 1.4
body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.5
body-lgLead paragraphsThe quick brown fox jumps over the lazy dog18px · 500 · 1.56 · -0.025em
body-smSecondary and small textThe quick brown fox jumps over the lazy dog11px · 400 · 1.5
label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog16px · 500 · 1.5
label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog14px · 500 · 1.43
label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog12px · 500 · 1.33
Contrast
Text on #0A0A0A
AaAAA
18.9:1AaAAA
7.8:1Spacing
No strict grid · 78% are multiples of 4px
xs2pxsm8pxmd16pxlg24pxxl40pxgutter8pxmargin80pxcontainer1280pxBreakpoints: 600px 640px 768px 1024px 1280px 1400px
Shapes
Corner radii, most used first.
md12px · 260×
lg16px · 56×
sm6px · 52×
full9999px · 32×
Depth
Shadow
Ring
Inset
Ember UI components
Rebuilt from the measured CSS.
Get Started
Tools
Search embroidery designs...
Card
Inline link
Motion
Interface transitions
0.3s0.15s0.2scubic-bezier(0.4, 0, 0.2, 1)ease
Do’s and don’ts
Rules written from the measurements, so a coding agent stays on style.
- Use #0A0A0A for the page and lift surfaces in small steps: #020617.
- Keep text in 2 levels: #FAFAFA, #A3A3A3.
- Let contrast carry emphasis; primary actions use #FAFAFA on #0A0A0A.
- Reuse the measured spacing steps (8px, 16px, 24px).
- Use 12px corners on most elements; larger surfaces also use 16px and 6px.
- Introduce new font families beyond aeonik and Inter.
- Add saturated accent colors; the measured palette is almost entirely neutral.
- Make interface transitions slower than 0.3s.
Ember DESIGN.md225 lines
---
version: alpha
name: Ember
description: "Dark monochrome interface measured from emberdesign.net: aeonik type with Inter, tonal surfaces and 12px corners."
colors:
background: "#0A0A0A"
surface: "#0A0A0A"
on-surface: "#FAFAFA"
on-background: "#FAFAFA"
on-surface-variant: "#A3A3A3"
surface-container-low: "#020617"
overlay: "#FAFAFA0D"
overlay-strong: "#FFFFFF4D"
outline: "#26262680"
outline-variant: "#262626"
primary: "#FAFAFA"
on-primary: "#171717"
inverse-surface: "#9DA3AE"
secondary: "#3B82F6"
typography:
headline-display:
fontFamily: aeonik
fontSize: 96px
fontWeight: 500
lineHeight: 1.15
headline-lg:
fontFamily: aeonik
fontSize: 48px
fontWeight: 500
lineHeight: 1.1
headline-md:
fontFamily: aeonik
fontSize: 30px
fontWeight: 500
lineHeight: 1.2
headline-sm:
fontFamily: Inter
fontSize: 20px
fontWeight: 500
lineHeight: 1.4
body-md:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
body-lg:
fontFamily: Inter
fontSize: 18px
fontWeight: 500
lineHeight: 1.56
letterSpacing: -0.025em
body-sm:
fontFamily: Inter
fontSize: 11px
fontWeight: 400
lineHeight: 1.5
label-lg:
fontFamily: Inter
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
label-md:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
label-sm:
fontFamily: Inter
fontSize: 12px
fontWeight: 500
lineHeight: 1.33
headline-display-mobile:
fontFamily: aeonik
fontSize: 48px
fontWeight: 500
lineHeight: 1.15
headline-lg-mobile:
fontFamily: aeonik
fontSize: 30px
fontWeight: 500
lineHeight: 1.1
rounded:
sm: 6px
md: 12px
lg: 16px
full: 9999px
spacing:
xs: 2px
sm: 8px
md: 16px
lg: 24px
xl: 40px
gutter: 8px
margin: 80px
container: 1280px
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.label-md}"
rounded: "{rounded.sm}"
padding: 0px 12px
height: 32px
button-primary-hover:
backgroundColor: "#FAFAFAE6"
button-ghost:
textColor: "{colors.on-surface-variant}"
typography: "{typography.label-md}"
rounded: "{rounded.sm}"
padding: 0px 16px
input-field:
textColor: "{colors.on-surface}"
typography: "{typography.label-md}"
rounded: "{rounded.sm}"
padding: 8px 12px 8px 36px
card:
backgroundColor: "{colors.background}"
textColor: "{colors.on-surface}"
typography: "{typography.body-md}"
rounded: "{rounded.lg}"
padding: 0px
link:
textColor: "{colors.on-surface-variant}"
---
# Ember Design System
## Overview
Ember describes itself as: “Build, share, and explore a vast collection of embroideries for free with no installation necessary. Join thousands of creators digitizing their embroidery designs.” The interface is dark, built on **Near Black (#0A0A0A)** with **Snow (#FAFAFA)** text and almost no color: actions are carried by contrast, not hue.
Type is set in **aeonik** and **Inter**. Headlines run large; body text is 16px. Depth comes from soft drop shadows. Corners are mostly 12px.
Measured from [emberdesign.net](https://emberdesign.net/) on November 4, 2026 at 1440×900 and 390×844 from 416 rendered elements. Values are computed styles from the live page, not the original source files.
## Colors
The palette has 12 roles, plus gradient stops #3B82F6, #93C5FD, #8B5CF6, #2563EB.
- **Near Black (#0A0A0A):** Page background, seen 16 times. Token `background`.
- **Snow (#FAFAFA):** Primary text and headings, seen 79 times. Token `on-surface`, CSS `--neutral-50`.
- **Gray (#A3A3A3):** Secondary text, seen 61 times. Token `on-surface-variant`.
- **Deep Indigo (#020617):** Raised areas one step from the page, seen 3 times. Token `surface-container-low`, CSS `--slate-950`.
- **Snow 5% (#FAFAFA0D):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **White 30% (#FFFFFF4D):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **Graphite 50% (#26262680):** Borders and dividers, seen 64 times. Token `outline`.
- **Graphite (#262626):** Secondary dividers, seen 18 times. Token `outline-variant`, CSS `--neutral-800`.
- **Snow (#FAFAFA):** Primary buttons and calls to action, seen 94 times. Token `primary`, CSS `--neutral-50`.
- **Charcoal (#171717):** Text and icons on primary. Token `on-primary`.
- **Cool Gray (#9DA3AE):** High-contrast fills, seen 64 times. Token `inverse-surface`.
- **Vivid Blue (#3B82F6):** Accent, seen 47 times. Token `secondary`.
## Typography
**aeonik** and **Inter** share the interface. Fallback stack: `aeonik, aeonik Fallback`.
- **headline-display:** aeonik 96px at weight 500, line height 1.15 (48px on mobile). Page title (h1).
- **headline-lg:** aeonik 48px at weight 500, line height 1.1 (30px on mobile). Section headings (h2).
- **headline-md:** aeonik 30px at weight 500, line height 1.2. Sub-section headings.
- **headline-sm:** Inter 20px at weight 500, line height 1.4. Card and feature titles.
- **body-md:** Inter 16px at weight 400, line height 1.5. Body text.
- **body-lg:** Inter 18px at weight 500, line height 1.56, tracking -0.025em. Lead paragraphs.
- **body-sm:** Inter 11px at weight 400, line height 1.5. Secondary and small text.
- **label-lg:** Inter 16px at weight 500, line height 1.5. Large buttons and tabs.
- **label-md:** Inter 14px at weight 500, line height 1.43. Buttons, navigation and labels.
- **label-sm:** Inter 12px at weight 500, line height 1.33. Small labels and badges.
## Layout
Spacing is mostly on a 4px grid (78% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.
- **Scale:** xs 2px, sm 8px, md 16px, lg 24px, xl 40px.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1280px.
- **Page margin:** 80px on each side of full-width sections.
- **Breakpoints:** 600px, 640px, 768px, 1024px, 1280px, 1400px.
## 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.05) 0px 1px 2px 0px`
Hairline rings and inset highlights also appear: `rgb(255, 255, 255) 0px 0px 0px 0px, rgb(38, 38, 38) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`.
## Shapes
Most elements use 12px corners. Measured radii, most used first:
- **md (12px):** 260 elements.
- **lg (16px):** 56 elements.
- **sm (6px):** 52 elements.
- **full (9999px):** 32 elements.
## Components
Measured from the rendered page. Token values reference the tokens above.
- **button-primary (“Get Started”):** #FAFAFA fill, #171717 text, 14px/500, 6px radius, padding 0px 12px.
- **button-primary-hover:** background #FAFAFAE6, text #171717 on hover.
- **button-ghost (“Tools”):** transparent fill, #A3A3A3 text, 14px/500, 6px radius, padding 0px 16px.
- **input-field (“Search embroidery designs...”):** transparent fill, #FAFAFA text, 14px/400, 6px radius, padding 8px 12px 8px 36px.
- **card:** #0A0A0A fill, #FAFAFA text, 16px/400, 16px radius, padding 0px, border 1px solid #262626, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`.
- **link:** transparent fill, #A3A3A3 text, padding 0px.
## Do's and Don'ts
- Do use #0A0A0A for the page and lift surfaces in small steps: #020617.
- Do keep text in 2 levels: #FAFAFA, #A3A3A3.
- Do let contrast carry emphasis; primary actions use #FAFAFA on #0A0A0A.
- Do reuse the measured spacing steps (8px, 16px, 24px).
- Do use 12px corners on most elements; larger surfaces also use 16px and 6px.
- Don't introduce new font families beyond aeonik and Inter.
- 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.3s, 0.15s, 0.2s. Longer ambient animations run 3s, 6s.
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `ease`, `cubic-bezier(0, 0, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.
Generated by [Sitepeel](https://sitepeel.dev/design-md/emberdesign.net/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).
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.
Build a landing page for my product. Follow for every color, font, spacing value, corner and button.
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.
More designs
Brand examples →
Another site? Make a DESIGN.md from any link.
FAQ
Ember design system questions
What font does Ember use?
Ember’s website uses aeonik (weight 500) and Inter (weights 400 and 500). Page titles are 96px at weight 500 (48px on phones) and body text is 16px. Measured on November 4, 2026.
What are the Ember colors and hex codes?
On emberdesign.net: #0A0A0A (near black) for the background and #FAFAFA (snow) for text, with #3B82F6 (vivid blue) as another accent. The color palette above lists all 12 colors with their hex codes and where each one is used.
What is the Ember design system?
The design system on this page is emberdesign.net’s, as measured on November 4, 2026: aeonik type and 12px corners, written down as a DESIGN.md. It is not Ember’s own documentation.
What is the Ember DESIGN.md?
A plain-text file with Ember’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 Ember’s official design system?
No. Sitepeel measured it from emberdesign.net’s public page on November 4, 2026. It is an independent analysis, not made or approved by Ember.
Can I use Ember’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 Ember’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.