Signal Orange
#f25533Brand accent, logo mark, decorative SVG fills, nav emphasis — the single warm chromatic note that cuts through the monochrome system
Incident
incident.ioWebsite preview
The design language
Incident treats the status page like an editorial publication: a Times-serif typeface on a concrete-gray canvas, hairlines of pure black, and one warm signal-orange that acts as a flare against the monochrome. The discipline is extreme — chromatic color is rationed, appearing only as brand accent fills, logo marks, and decorative file-type illustrations, never as button backgrounds or action fills. Surfaces are flat and paper-like; depth comes from soft 2-layer shadows on imagery rather than elevation stacking. The result reads as a trusted technical broadsheet rather than a typical dashboard — authority through typographic restraint, not color volume.
Color palette
brand
accent
Alert Red
#ff492cOrange decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color
Ember
#f1641eOrange outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color
neutral
Concrete
#efefefPage canvas, button background — the dominant surface tone that gives the system its paper-like warmth
Ink
#000000Primary text, hairline borders (920+ uses), button outlines — pure black carries all structural line work
Paper
#ffffffCard surfaces, nav fills — the white layer that sits on top of the concrete canvas
Carbon
#161618Near-black for nav strokes, emphasis text, and the tinted shadow base — softer than pure ink for layered elements
Mist
#dadadaSubtle drop-shadow tone, decorative image edge tint
Fog
#ccccccSecondary shadow tone, decorative image edge tint
Parchment
#e4d9c8Warm cream decorative surface — near-gray but carries a beige cast that ties to the orange family
Typography
Type scale
Minor Second (1.067) · 16px baseheading
32px · 700 · 1.2The quick brown fox jumps
heading-sm
24px · 700 · 1.2The quick brown fox jumps
body-lg
19px · 700 · 1.2The quick brown fox jumps
body
16px · 400 · 1.2The quick brown fox jumps
text-13
13px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Times (system serif)
- Weights
- 400, 700
- Sizes
- 16px, 19px, 24px, 32px
- Line height
- 1.20
- Fallback
- Source Serif Pro, Lora, or Crimson Text — freely available serifs that preserve the editorial broadsheet feel
Body text, headings, nav items, hero copy, card content, list items, footer — Times carries 770+ uses and is the signature typographic choice. A serif body face on a B2B incident-management product is anti-convention: it borrows the authority of a legal broadsheet or technical manual, replacing the usual Inter/system-ui with something that reads as deliberately editorial. Weight 400 for body, 700 for emphasis and headings.
Additional typeface
Arial (system sans)
- Weights
- 400
- Sizes
- 13px
- Line height
- 1.20
- Fallback
- Inter or system-ui at 13px
Small UI micro-text: button labels, nav utility text, icon-adjacent labels. Arial at 13px handles the functional labels while Times carries the voice — a deliberate serif/sans split where Times says something and Arial just tags it.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 16px
Border radius
tags
4pxcards
12pxbuttons
4pxalertBanners
8pxSpacing scale
1px6px16px19px20px21px40pxGuidelines
Do
- Use Times (or Source Serif Pro as substitute) for all body copy, headings, nav items, and hero text — the serif face is the brand voice
- Set the page canvas to #efefef (Concrete) and let cards sit in #ffffff (Paper) above it — never invert to a white page with gray cards
- Use #000000 for all structural borders and hairline rules — borderColor is the dominant role of pure black in this system
- Use Signal Orange (#f25533) only for brand marks, logo elements, decorative fills, and file-type illustrations — never for action buttons or functional UI
- Set button background to #efefef with a 1px black border, 4px radius, and 1px/6px padding — buttons should feel like labeled frames, not filled actions
- Keep the type scale tight: 13px (Arial micro-labels), 16px (Times body), 19px (Times body-lg), 24px (Times heading-sm), 32px (Times heading) — do not introduce sizes outside this range
- Use status-tinted card borders (red for critical, amber for warning) to communicate severity — the border color does the semantic work, not a colored background fill
Don’t
- Do not use sans-serif (Inter, system-ui) for body copy or headings — replacing Times breaks the editorial identity
- Do not add colored button fills (blue, orange, green) for primary actions — the system uses neutral concrete buttons with black borders
- Do not use gradients — no gradient was detected in the source and the flat editorial aesthetic rejects them
- Do not use heavy drop-shadows for elevation — shadows are reserved for image containers at 2-4% opacity only
- Do not introduce blue or green as brand or accent colors — the chromatic palette is exclusively warm (orange family and amber)
- Do not round buttons beyond 4px or use pill shapes — the slightly squared button geometry reinforces the broadsheet feel
- Do not use color to indicate active or selected states — rely on weight (400→700) and underline affordances within the serif system
Components
Navigation Bar
Top-level site navigationWhite (#ffffff) background, sits on the concrete canvas. Uses Times for nav labels at 16px weight 400. The brand mark in Signal Orange (#f25533) anchors the left. Hairline black (#000000) bottom border separates it from page content. Carbon (#161618) used for stroked logo elements.
Neutral Button
Primary interactive actionConcrete (#efefef) background — the same as the page canvas, making the button feel like a raised card rather than a filled action. Black (#000000) 1px border, 4px radius, padding 1px top/bottom and 6px left/right (deliberately compact). Label in Arial 13px weight 400, Ink (#000000). No color fill, no shadow — the button is a labeled rectangle with a hairline frame.
Critical Alert Banner
Outage or incident status displaySoft red/pink wash background (tinted toward Alert Red #ff492c at low opacity), left-aligned warning triangle icon in Alert Red. Headline in Times 16px weight 700, body text in Times 16px weight 400. Full-width card with 8px radius and a saturated red border on the container card below.
Warning Alert Banner
Degraded service or maintenance noticeAmber/yellow icon (Ember #f1641e) with warning triangle. Headline in Times 16px weight 700, descriptive body in Times 16px weight 400. Sits inside a white card with a light amber-tinted border.
Status Tag / Pill
Component-level status indicator (e.g. Website, App)Small rounded-corner tag, 4px radius. Tinted background matching the status color: soft red wash for outages, soft amber wash for degraded. Label in Arial or Times at 13px, color matching the status hue. Inline, sits adjacent to other tags.
Status Card
Container for a single incident reportWhite (#ffffff) background on the concrete canvas. 12px radius. Border is chromatic and status-dependent: red-pink for active incidents, amber for warnings, subtle gray for resolved. Internal padding 24px. Contains icon, headline, body, and metadata line in muted gray.
Section Heading (Serif)
Page and section titlesTimes weight 400 or 700, 24–32px scale. Color is Ink (#000000) for primary, Carbon (#161618) for secondary. No underline, no decoration — the serif face does the hierarchy work. Often paired with a 16px body paragraph below in the same family at 16px.
Text Link
Inline navigation to subpages or external resourcesUnderlined text in a saturated blue (appears as ~#0000ff in rendered links), Arial or Times depending on context. No arrow, no icon — the underline is the affordance. Sits within serif body text blocks.
File-Type Illustration
Decorative graphic for file format referencesDocument-shape icon with a folded corner, filled in Signal Orange (#f25533), with white label text (e.g. 'PNG') in Arial bold. No shadow, no border — flat brand-colored fill on the concrete canvas.
Product Feature Card
Text-first card describing a product capabilityNo visible card container — text sits directly on the concrete canvas. Serif headline (Times 24–32px), sans-serif body description (Arial 13px or Times 16px), underlined text link. Accompanied optionally by a line-art illustration in blue or orange. Maximum text density without card chrome.
Surfaces & elevation
Level 1
Concrete
#efefefPage canvas — the warm light-gray base everything sits on
Level 2
Paper
#ffffffCard surfaces and nav containers — white layer above the concrete
Level 3
Parchment
#e4d9c8Decorative warm tint for file-type illustrations and graphic elements
Elevation is near-absent. The system stays flat — hairline black borders and card background contrast do the structural work. Shadows are reserved for image containers only, and they are whisper-light (2-4% opacity, carbon-tinted) so they read as paper-lift rather than digital elevation. No raised buttons, no floating panels, no drop-shadow hierarchy.
Image cards and decorative graphics
rgba(22, 22, 24, 0.02) 0px 8px 15px -3px, rgba(22, 22, 24, 0.04) 0px 4px 6px -2px
Layout & imagery
Layout
Max-width ~1200px centered on a concrete canvas. Pages are text-first: serif headlines, single-column body blocks, generous vertical breathing room (64px section gaps). No hero image — the top of each page is a centered or left-aligned serif headline over empty canvas. Sections flow as flat bands separated by hairline black rules rather than alternating background colors. Navigation is a simple top bar, not sticky or floating. Product feature sections use a asymmetric two-column layout (text-left, illustration-right) with no card containers — text sits directly on the canvas. The status page section uses full-width alert banners with chromatic-tinted borders. Overall density is low: whitespace is the primary structural element, with hairlines and serif hierarchy doing the organization work.
Imagery
Visual language is overwhelmingly text-dominant with sparse iconography. Imagery falls into three categories: (1) file-type illustrations — flat document shapes in Signal Orange with a folded corner and white format label (e.g. 'PNG'), used to anchor feature sections about file handling; (2) line-art directional arrows in saturated blue, used as decorative flow indicators on product pages; (3) product screenshots or UI captures with the signature soft carbon-tinted shadow (rgba(22,22,24,0.02–0.04)). No photography, no lifestyle imagery, no 3D renders. The page reads as editorial — images are functional illustrations, not atmospheric decoration.
Design notes
Agent Guide
Quick Color Reference: - Text: #000000 (Ink) for body, #161618 (Carbon) for emphasis - Background: #efefef (Concrete) page canvas, #ffffff (Paper) cards - Border: #000000 (Ink) for all structural hairlines - Accent: #f25533 (Signal Orange) for brand marks and decorative fills only - Status critical: #ff492c (Alert Red) - Status warning: #f1641e (Ember) - primary action: no distinct CTA color 3-5 Example Component Prompts: 1. Create a critical alert banner: soft red-pink wash background, Alert Red (#ff492c) warning triangle icon on the left. Headline 'Service disruption detected' in Times 16px weight 700, #000000. Body text in Times 16px weight 400, #000000. Full-width with 8px border-radius, sitting on a white card with a light red border. 2. Create a neutral button: #efefef background, 1px solid #000000 border, 4px border-radius, padding 1px top/bottom and 6px left/right. Label 'Get started' in Arial 13px weight 400, #000000. No shadow, no fill change on hover. 3. Create a page section heading: 'On-call gets the right people in the room' in Times 32px weight 700, #000000, on a #efefef page canvas. Below it, a body paragraph in Times 16px weight 400 at 19px line-height. No decorative elements, no underline, no accent color. 4. Create a status card: white (#ffffff) background, 12px border-radius, light amber-tinted (#f1641e at low opacity) 1px border. 24px internal padding. Contains a warning triangle icon in Ember (#f1641e), a Times 16px weight 700 headline, and a Times 16px weight 400 description. 5. Create a file-type illustration: a document shape with a folded top-right corner, filled in Signal Orange (#f25533), with 'PNG' in white Arial bold 32px centered. Flat — no shadow, no border, no gradient. Sits on the #efefef page canvas.
Similar brands
Stripe
Same editorial restraint with hairline rules and high-contrast monochrome surfaces, though Stripe uses a sans-serif body face
Linear
Shared minimal colorfulness and flat surface treatment, but Linear is dark-mode-first and sans-serif-driven
The Browser Company / Arc
Similar warm-cream accent tones and a willingness to use typographic personality over color volume to build brand
Basecamp
Same text-dominant, low-color-density editorial approach with flat surfaces and functional rather than decorative UI
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
