Ember Orange
#ff5a2fPrimary action buttons, active badges, accent borders — the system's only chromatic voice, used to signal interactivity and emphasis
Dot Inc.
pad.dotincorp.comWebsite preview
The design language
Dot Inc. operates a precise, near-monochrome visual system anchored by pure white surfaces and a single high-saturation orange accent that acts as functional punctuation. The interface is spacious, typographically confident, and relies on Plus Jakarta Sans at varying weights to create hierarchy without color noise. Every container, image, and card carries a generous 20-30px radius — the softness is the brand's tactile signature, echoing the braille dot product itself. Components are flat, borders are hairline, and the single shadow token is reserved for the primary action button. Color appears only when the system needs you to do something.
Color palette
brand
Ember Orange (link variant)
#f15b2bOrange text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color
neutral
Carbon Black
#000000Primary text, icons, image overlays, card headings — maximum contrast against white canvas
Graphite
#1f1f1fHeadings, body emphasis, dark surface alternative — slightly softened black for large display text
Slate Dark
#333333List items, secondary body text, card content
Stone
#555555Navigation labels, subdued body text
Pewter
#707070Muted descriptions, inactive list items, heading borders
Steel
#a5a5a5Disabled or decorative text
Mist
#b7bfc1Card borders, subtle button shadows — cool-tinted gray that defines container edges
Cloud
#cbcbcbAlternate card backgrounds, disabled surfaces
Fog
#ddddddNeutral secondary button fill, placeholder surfaces
Paper
#e5e7ebHairline dividers, borders across all contexts — the structural neutral that separates sections
Pearl
#f5f5f5Card surfaces, subtle backgrounds, alternate section bands
Canvas White
#ffffffPage background, nav surface, card fill, button text — the dominant canvas
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
80px · 700 · 1.34The quick brown fox jumps
text-60
60px · 600 · 1.5The quick brown fox jumps
heading-lg
50px · 800 · 1.34The quick brown fox jumps
text-46
46px · 700 · 1.5The quick brown fox jumps
text-40
40px · 700 · 1.5The quick brown fox jumps
heading
32px · 700 · 1.4The quick brown fox jumps
text-30
30px · 700 · 1.5The quick brown fox jumps
heading-sm
24px · 600 · 1.45The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Plus Jakarta Sans
- Weights
- 300, 400, 500, 600, 700, 800
- Sizes
- 12, 14, 15, 16, 18, 20, 22, 24, 30, 32, 40, 46, 50, 60, 80
- Line height
- 1.34, 1.40, 1.45, 1.50, 1.60, 1.64, 1.78, 1.80
- Letter spacing
- normal
- Fallback
- Inter, DM Sans
Sole typeface for all text — body, headings, nav, buttons, badges, icons. The wide weight range (300–800) carries the entire visual hierarchy; display sizes reach 80px at weight 300 for a light, expansive headline, while UI text sits at 14-16px weight 400-500
Spacing & shape
Spacing
- Density
- spacious
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 40px
- Element gap
- 24px
Border radius
nav
30pxcards
20pxbadges
20pximages
12-20pxbuttons
30pxheadings
100pxSpacing scale
4px6px8px10px12px14px15px16px18px20px21px24px28px30px32px36px40px45px48px49px50px60px66px69px75px80px83px90px92px105px120px129px208px209pxGuidelines
Do
- Use #ff5a2f exclusively for primary action buttons and active state accents — it should appear on no more than 3-5 elements per viewport.
- Set border-radius to 20px for cards and images, 30px for buttons and badges, and 12-20px for inline images.
- Use Plus Jakarta Sans weight 300 or 400 for headlines 40px and above to maintain the light, spacious typographic feel.
- Apply 1px #e5e7eb borders for all card and section dividers — never use heavier borders or decorative lines.
- Space sections with 80px vertical gaps and use 24px for inter-element gaps within cards and lists.
- Keep backgrounds white (#ffffff) as the default canvas; use #f5f5f5 only for alternating content bands or subtle card elevation.
- Reserve the shadow token rgba(0,0,0,0.25) 0px 4px 10px 0px for the single primary CTA button per view.
Don’t
- Do not introduce additional chromatic colors — the system's identity depends on the 2% colorfulness ceiling.
- Do not use border-radius below 8px for any interactive element; the soft, rounded geometry is a core brand trait.
- Do not apply shadows to cards, images, or navigation — only the primary CTA may have elevation.
- Do not use #000000 for body text at sizes above 20px; switch to #1f1f1f for large headings to avoid harshness.
- Do not use bold (weight 700-800) for body or heading text — reserve weights 700-800 for short labels or tags only.
- Do not create flat hard-edged rectangular blocks; every container needs 20-30px radius.
- Do not use gradients — the system is entirely flat with single solid color fills.
Components
Primary CTA Button (Ember Fill)
Main call-to-action — 'Find a Reseller' styleFilled #ff5a2f background, white text, Plus Jakarta Sans 16px weight 500, padding 14px 24px, border-radius 30px. Carries the single shadow token: rgba(0,0,0,0.25) 0px 4px 10px 0px. This is the only component in the system with elevation.
Secondary Ghost Button
Companion action — 'Request a Demo' styleTransparent or #f5f5f5 background, #333333 text, no border, border-radius 30px, padding 14px 24px, Plus Jakarta Sans 16px weight 500. Sits alongside the Ember CTA as a lower-commitment alternative.
Neutral Pill Button
Tertiary or disabled action#dddddd background, #333333 text, border-radius 30px, padding 14px 24px. Used for inactive or low-priority controls.
Bordered Card
Product content containerWhite or #f5f5f5 background, 1px #e5e7eb border, border-radius 20px, padding 40px. No shadow. Internal content uses 20-24px gaps.
Shadowed Card (elevated)
Featured product showcaseWhite background, border-radius 20px, no border, subtle shadow. Used sparingly to differentiate hero content blocks from standard cards.
Hero Banner
Full-width dark product showcase stripDark photographic background (near-black), centered white headline at 46-50px weight 300, white subtext at 18px weight 400, border-radius 20px on the container. Creates the single dramatic moment on a product page.
Section Heading
Page section titlePlus Jakarta Sans 40-50px weight 300-400, #1f1f1f or #000000, line-height 1.34. Frequently paired with a 18-20px weight 400 subheading in #333333.
Badge (Ember Outline)
Tag or category labelTransparent background, 1px #ff5a2f border, #ff5a2f text, Plus Jakarta Sans 12-14px weight 500, padding 4-6px 14px, border-radius 20px. Pill-shaped, thin stroke — the accent color in micro-form.
Top Navigation Bar
Site-wide primary navigationWhite background, no visible border separator, padding 15-21px vertical. Logo left in Plus Jakarta Sans 24-30px weight 400, nav links in 16px weight 500 #555555, utility items (Partner Alliance, Language) right-aligned in 16px #333333 with globe icon in #ff5a2f.
Breadcrumb
Page location indicatorPlus Jakarta Sans 14px weight 400, #707070 text, separated by chevron arrows. Sits directly below the nav bar with 15px vertical padding.
Rounded Image Container
Product photography frameImage clipped to 20px border-radius, no border. Photography is high-contrast, often on dark backgrounds to create product hero moments.
Text Link
Inline hyperlink#f15b2b color, no underline by default, Plus Jakarta Sans inheriting size, weight 500. Inline within body copy.
Surfaces & elevation
Level 0
Canvas
#ffffffPage background, dominant surface
Level 1
Pearl
#f5f5f5Card fills, alternate section bands
Level 2
Cloud
#cbcbcbDisabled or secondary surface tint
Level 3
Stone Dark
#aeaeaeNav utility bar background
Elevation is near-absent by design. The single shadow token applies only to the Ember CTA button to give it tactile lift against the flat, border-driven interface. All other elements rely on 1px #e5e7eb borders and 20px border-radius to define containment — shadows would contradict the clean, laboratory-like precision the brand projects.
Primary CTA Button
rgba(0, 0, 0, 0.25) 0px 4px 10px 0px
Layout & imagery
Layout
Max-width 1200px centered content with full-bleed hero banners. The page follows a vertical scroll rhythm: white nav → breadcrumb → full-bleed dark hero with centered title → white product detail section with 2-column layout (image left, text right) → full-bleed dark secondary image band → alternating white/light-gray content sections. Section gaps are generous (80px) creating breathing room between blocks. Content within sections uses 2-column or centered single-column arrangements. Navigation is a single horizontal bar with left-aligned logo and right-aligned utility links, no sticky behavior visible.
Imagery
Product photography dominates: the Dot Pad X device is shown in dramatic dark/nighttime settings with shallow depth of field, creating contrast against the otherwise white interface. Images are contained in 20px-radius frames. No illustrations, no abstract graphics, no lifestyle photography — the product IS the hero. Iconography is minimal: a globe icon for language, a chevron for breadcrumbs, and an external-link arrow, all rendered in single-stroke outlined style at 16-20px.
Design notes
Agent Guide
**Quick Color Reference** - Text: #1f1f1f (headings) / #333333 (body) / #707070 (muted) - Background: #ffffff (page) / #f5f5f5 (cards) - Border: #e5e7eb (hairline) / #b7bfc1 (card outline) - Accent: #ff5a2f (Ember Orange — CTA fill, badges, active states) - primary action: #ff5a2f (filled action) **Example Component Prompts** 1. Build a primary CTA button: 30px border-radius, #ff5a2f background, white text, Plus Jakarta Sans 16px weight 500, padding 14px 24px, shadow rgba(0,0,0,0.25) 0px 4px 10px 0px. Use as 'Find a Reseller'. 2. Build a product hero banner: full-bleed dark photographic background, centered white headline at 50px Plus Jakarta Sans weight 300, white subtext at 18px weight 400, container border-radius 20px. 3. Build a bordered content card: white background, 1px #e5e7eb border, 20px border-radius, 40px padding, internal gap 24px between child elements. 4. Build an accent badge: transparent background, 1px #ff5a2f border, #ff5a2f text, Plus Jakarta Sans 12px weight 500, padding 4px 14px, border-radius 20px. 5. Build a secondary ghost button: transparent background, #333333 text, no border, 30px border-radius, padding 14px 24px, Plus Jakarta Sans 16px weight 500. Use as 'Request a Demo'.
Similar brands
Apple Product Pages
Same near-monochrome palette with a single accent color, generous border-radius, spacious vertical rhythm, and full-bleed dark hero photography interrupting white sections
Teenage Engineering
Shared use of Plus Jakarta Sans (or similar geometric sans), ultra-rounded corners (20-30px), and a single high-saturation accent against a clean white canvas
Nothing.tech
Minimalist tech product presentation with bold headline weights, generous white space, and a single warm accent color punctuating an otherwise achromatic interface
Framework Computer
Product-first layout with centered content, high-contrast typography, and restraint in color usage — letting hardware photography carry visual weight
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
