Midnight Ink
#090b2bPrimary brand color for headings, logo, emphasized text, nav labels, and icon strokes — a near-black with a faint violet cast that reads as ink rather than pure black against the cream canvas
Flatfile
flatfile.comWebsite preview
The design language
Flatfile presents a quiet, editorial design system on warm parchment — the entire canvas carries a faint cream-green wash rather than stark white, making data tooling feel like reading a printed report. The primary chromatic is a near-black midnight violet (#090b2b) that carries all headings, brand marks, and emphasis, while interactions are anchored by a single near-black pill button (#151515) and a single warm sage secondary button (#e5ebd3). Structure is built almost entirely from hairline #e5e7eb rules — there is barely a shadow in the system, and depth is achieved through surface shifts between #f8f8f8 card layers and the #e5ebd3 hero wash rather than elevation. Typography leans editorial: a geometric humanist sans (Flatfile Diatype) does all UI work, while Source Serif 4 enters exclusively for customer quotes, giving testimonials a printed-publication feel that contrasts with the data-product UI.
Color palette
brand
accent
Parchment
#e5ebd3Warm sage-cream wash used as the hero background and as the secondary button fill — gives the page its printed-paper atmosphere
neutral
Obsidian
#151515Dark elevated surface for cards, headers, and contained panels. Do not promote it to the primary CTA color
Graphite
#1b1b1ePrimary body and heading text, dark card fills, and icon fills — the workhorse near-black with the faintest cool cast
Charcoal
#262626Secondary dark surfaces and muted borders for inverted panels
Steel
#808080Mid-gray for supporting UI marks, icon fills, and medium borders
Silver
#aaaaaaLighter mid-gray for tertiary text, placeholder copy, and decorative fills
Fog
#d7d7d7Subtle border tone for ghost controls and quiet dividers
Mist
#e5e7ebThe system's structural hairline — dominant border, divider, and table-rule color across every layout context
Linen
#f8f8f8Card and elevated surface background — one step off the page to create depth without shadows
Paper
#ffffffPure white reserved for inverted buttons, tag chips, and high-contrast list items where Mist would be too muted
Slate Link
#8c8c8cDefault link and breadcrumb text color, distinct from body text gray
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
60px · 400 · 1 · -1.92px trackingThe quick brown fox jumps
heading
38px · 400 · 1.18 · -1.14px trackingThe quick brown fox jumps
heading-sm
26px · 500 · 1.42 · -0.26px trackingThe quick brown fox jumps
subheading
22px · 400 · 1.42 · -0.352px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.08px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.43 · -0.224px trackingThe quick brown fox jumps
caption
12px · 400 · 1.42 · -0.144px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
FlatfileDiatypeVariable
- Weights
- 400, 500
- Sizes
- 16px
- Line height
- 1.5
FlatfileDiatypeVariable — detected in extracted data but not described by AI
Additional typeface
Flatfile Diatype (Variable)
- Weights
- 400-500
- Sizes
- 12px, 14px, 16px, 22px, 38px, 60px
- Line height
- 1.18-1.50
- Letter spacing
- -0.0160em to -0.0230em at display sizes; normal at body
- Fallback
- Inter or Söhne
Primary UI and body sans — nav links, buttons, body copy, small labels, and card content. The variable axis lets the system shift between neutral body weight and slightly heavier button weight without changing family.
Additional typeface
Flatfile Diatype (Static)
- Weights
- 400
- Sizes
- 12px, 14px, 16px, 22px, 38px, 60px
- Line height
- 1.00-1.18
- Letter spacing
- -0.0320em at 60px, -0.0300em at 38px
- Fallback
- Inter Display or Söhne Breit
Display and section heading sizes. Uses tighter tracking as size grows — the 60px display sits at -0.0320em, pulling letters into a compact editorial block.
Additional typeface
Source Serif 4
- Weights
- 400
- Sizes
- 38px
- Line height
- 1.00
- Letter spacing
- -0.0320em
- Fallback
- Source Serif 4 or Tiempos Text
Reserved exclusively for customer-quote hero text in testimonial cards. The serif italic-leaning humanist voice creates a print-publication contrast against the otherwise sans-only system.
Additional typeface
Sharp Grotesk
- Weights
- 500
- Sizes
- 26px
- Line height
- 1.42
- Letter spacing
- -0.0100em
- Fallback
- Space Grotesk or GT America
Secondary display face for product-feature subheadings where a more condensed, technical voice is needed — used sparingly to break up the Diatype rhythm.
Additional typeface
Booton
- Weights
- 469
- Sizes
- 16px
- Line height
- 1.5
- Letter spacing
- -0.005
Booton — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 64-88px
- Card padding
- 24-32px
- Element gap
- 16px
Border radius
nav
99pxtags
8pxcards
12pxbuttons
99pxSpacing scale
2px4px8px9px12px14px16px24px32px40px64px88px112px120px129px160px194px231px298pxGuidelines
Do
- Use #151515 filled pills at 99px radius for all primary CTAs — never a rectangular button.
- Set every display heading at 60px in Flatfile Diatype weight 400 with -1.92px tracking; never go bolder than 500 for the display voice.
- Use #e5e7eb for all structural dividers and table rules; it is the system's connective tissue.
- Reserve Source Serif 4 exclusively for the customer-quote hero text inside testimonial cards.
- Layer the canvas as Parchment (#e5ebd3) → Paper (#ffffff) → Linen (#f8f8f8) for depth instead of adding shadows.
- Use 88px section padding above every new page section to preserve the editorial breathing room.
- Center the page content at max-width 1200px; never edge-to-edge inside content zones.
Don’t
- Do not introduce a secondary chromatic brand color — Midnight Ink (#090b2b) is the only one.
- Do not use box-shadows to separate cards; shift the surface color one step instead.
- Do not set body text in anything other than Graphite (#1b1b1e) or #090b2b — no chromatic body copy.
- Do not use rectangular (non-pill) buttons; the 99px radius is a signature.
- Do not pair a chromatic icon color with chromatic background — keep the surface white and the icon the only color.
- Do not apply letter-spacing looser than -0.0050em — the system is built on tight, compact tracking at every size.
- Do not use the Parchment (#e5ebd3) wash outside the hero — it is a hero-only atmosphere, not a general surface.
Components
Primary CTA Pill (Book a demo)
Main conversion actionFilled near-black pill, 99px radius. Fill #151515, text #ffffff, Flatfile Diatype 16px weight 500, padding 12px 24px. Sits on the cream hero and on white sections with equal contrast.
Secondary CTA Pill (Check out Obvious)
Soft secondary actionFilled Parchment (#e5ebd3) pill, 99px radius. Text in Midnight Ink (#090b2b) weight 500, 16px. Padding 12px 24px. Only used in the hero zone where the warm wash supports it.
Ghost Nav Link
Top-bar navigation itemNo background, no border. Text in Graphite (#1b1b1e) at 16px weight 400, padding 8px 12px. Hover shifts to Midnight Ink (#090b2b).
Floating File Card
Hero product showcase cardWhite surface (#ffffff), 12px radius, thin #e5e7eb border, subtle drop shadow. Contains a small chromatic icon, file title (Flatfile Diatype 14-16px weight 500 #1b1b1e), and file extension tag (.xlsx, .ndtx, .json) in lighter weight.
Sticky Top Nav Bar
Global navigationFloating white bar with 99px radius, centered on the page with margin. Contains logo, nav links, divider, Log in text link, and the dark CTA pill. Thin #e5e7eb border.
Testimonial Card
Customer quote blockLinen (#f8f8f8) surface, 12px radius, #e5e7eb border. Top row: author name (Graphite 16px) + role + customer logo row. Center: Source Serif 4 38px quote text. Bottom: metric stats (25% / 20% decrease) in Graphite with caption labels in Silver.
Carousel Arrow Button
Testimonial pagination40px circle, Mist (#e5e7eb) border, no fill. Diatype 16px arrow glyph in Graphite. Sits inline-right of the metric row.
Step Tab Bar (Extract / Prepare / Map / Build)
Process-step indicatorDark Obsidian (#151515) pill container, 99px radius, padding 8px. Five step labels in white at 14-16px weight 400, separated by hairline #262626 dividers inside the pill. The active step could be highlighted with weight 500.
Gradient Hero Band
Full-bleed atmospheric dividerEdge-to-edge gradient transitioning from a dusty teal-green on the left through warm amber-orange on the right. No text overlay — purely atmospheric, used to break up long scroll runs.
Section Heading Block
Page-section openerCentered, generous 88px top padding. H1 in Diatype 60px weight 400 with -1.92px tracking in Midnight Ink, optional subtext in Slate Link gray at 18px weight 400, optional centered dark CTA below.
Link List Item
Footer or nav text linkFlat text, no underline, Slate Link (#8c8c8c) at 14-16px. Hover shifts to Midnight Ink.
File Extension Tag
Format indicator chipSmall text tag (.xlsx, .json, .ndtx) in Silver (#aaaaaa) at 12px weight 400, set tight against the file title in the floating card.
Surfaces & elevation
Level 0
Parchment Canvas
#e5ebd3Hero section wash — the warm sage-cream that gives the page its editorial paper feel.
Level 1
Paper
#ffffffTrue-white body sections, inverted button faces, tag chips.
Level 2
Linen
#f8f8f8Card and panel surfaces that sit one layer above the page.
Level 3
Obsidian
#151515Footer band and filled CTA pill — the deepest surface in the system.
Shadows are used as little as possible. The system prefers surface-color shifts (Parchment → Paper → Linen) and hairline Mist borders to communicate layering. The only meaningful shadows appear on floating UI elements like the hero's overlapping file cards, where they need to detach from the warm background.
Floating File Card (hero)
0 8px 24px rgba(9, 11, 43, 0.08)
Testimonial Card
0 1px 2px rgba(9, 11, 43, 0.04)
Layout & imagery
Layout
Centered, max-width 1200px containment with generous outer margins. The hero is a full-bleed Parchment wash with a centered headline stack and floating product cards anchoring the bottom. Navigation is a floating pill-shaped white bar (not edge-to-edge), centered horizontally above the hero. Below the hero, sections alternate between pure white and a full-bleed teal-to-amber gradient band. Feature sections are centered single-column stacks, testimonial sections are single full-width cards, and process steps are presented as a dark pill tab bar centered above supporting copy. Spacing is generous — 88px between major sections, 64px between subsections, 16-24px within cards. The vertical rhythm is slow and editorial rather than dense product-grid.
Imagery
The visual language is product-screenshot-led, not photography-led. Hero imagery consists of overlapping floating UI cards (file rows with colored icons) that depict the actual product in use — the product is the visual. A full-bleed atmospheric gradient band (teal-to-amber) provides the only decorative color moment and breaks the parchment monotony. Customer testimonial cards use crisp monochrome partner logos (BuildOps, Kottino, GrowthZone) as social proof. No lifestyle photography, no 3D renders, no stock illustration. Icons are flat, single-weight, and color-coded by file type (green, orange, purple, red squares). The overall effect is a printed data-tools brochure — paper, ink, and one warm gradient.
Design notes
Agent Guide
Quick Color Reference: - text: #1b1b1e - background: #e5ebd3 (hero) / #ffffff (body) - border: #e5e7eb - accent: #090b2b - primary action: no distinct CTA color 3 Example Component Prompts: No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 3. Build a testimonial card: Linen (#f8f8f8) background, 12px radius, 1px #e5e7eb border, 32px padding. Top row: author name + role in #1b1b1e 16px on the left, customer logos aligned right. Center: quote text in Source Serif 4 38px weight 400, #1b1b1e, letter-spacing -1.14px, set as italic. Bottom: two metric stats (e.g. '25%') in #1b1b1e 22px with caption labels in #aaaaaa 12px, plus 40px circular arrow buttons with #e5e7eb border on the far right.
Gradient Band
The only gradient in the system is a full-bleed atmospheric band used sparingly between major sections. It transitions from a dusty teal-green (~#5a7a72) on the left through warm amber-orange (~#c89148) on the right, with no text or interactive elements overlaid. Use it once per long-scroll page to break the parchment/white rhythm; never use it as a card background or hero.
Similar brands
Linear
Same near-black pill CTAs, single dominant brand ink, and hairline-border-first depth model over heavy shadows.
Mercury
Similar editorial restraint — cream-warm canvas, single chromatic brand color used as ink, sans-led type with sparing serif accents.
Retool
Developer-tool tone with pill buttons, warm neutrals, and product-screenshot imagery rather than lifestyle photography.
Vercel
Same near-monochrome palette with a single near-black CTA pill and hairline #e5e7eb structural rules.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
