• Docs
  • Blog
  • Pricing
Get started
proof · publicproof · public
kit 1.6

The dFlow mark,in public.

Logos, colors, and type for press, partners, and community. Download the files. Keep the sprite as it is drawn.

LogoSymbolsColorTypeFiles

  • Accent

    #f97316

  • Display

    Space Grotesk

  • Machine

    JetBrains Mono

  • Clearance

    10px

Logo

Lockup, mark, wordmark.

Lockup is the looping sprite plus the outlined wordmark. Mark-only stays static.

specimen · lockupspecimen · lockup
dark · light

Dark

clearance · 10px

Light

clearance · 10px

Mark · optical sizes

16
24
32
48

Wordmark

Space Grotesk · outlined

Symbols

Product marks, two sizes.

Stroke icons take the text color. The larger drawings stay on a light field: their apricot fills are baked in.

  • apps
  • backups
  • databases
  • deployments
  • domains
  • empty-state
  • integrations
  • monitoring
  • search
  • security
  • settings
  • storage
  • teams
  • templates
  • terminal
  • workflows

Apps

dflow-apps.svg

Backups

dflow-backups.svg

Databases

dflow-databases.svg

Deployments

dflow-deployments.svg

Domains

dflow-domains.svg

Empty state

dflow-empty-state.svg

Integrations

dflow-integrations.svg

Monitoring

dflow-monitoring.svg

Search

dflow-search.svg

Security

dflow-security.svg

Settings

dflow-settings.svg

Storage

dflow-storage.svg

Teams

dflow-teams.svg

Templates

dflow-templates.svg

Terminal

dflow-terminal.svg

Workflows

dflow-workflows.svg

Apps · 01 / 16

Color

Charcoal, then orange.

Five roles per theme. Accent is the same orange in light and dark.

Accent · CTAs, live indicators, the mark

#f97316

film · Darkfilm · Dark
4 roles

Background

#090909

Page

Surface

#141414

Cards, navbar island

Foreground

#f2f2f2

Headings, body

Muted

#a7abb4

Secondary text

film · Lightfilm · Light
4 roles

Background

#f6f6f6

Page

Surface

#ffffff

Cards, navbar island

Foreground

#141414

Headings, body

Muted

#6b7280

Secondary text

themetheme
dFlow

dFlow. Colors, fonts, radius, tracking. Paste into tweakcn Import or your shadcn globals.css.

/* Theme: dFlow — https://dflow.sh/brand */

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: hsl(0 0% 96.5%);
  --foreground: hsl(0 0% 7.8%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(0 0% 7.8%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(0 0% 7.8%);
  --primary: hsl(24.6 94.6% 53.1%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(0 0% 94.5%);
  --secondary-foreground: hsl(0 0% 15%);
  --muted: hsl(0 0% 94.5%);
  --muted-foreground: hsl(220 8.9% 46.1%);
  --accent: hsl(0 0% 92.2%);
  --accent-foreground: hsl(0 0% 7.8%);
  --destructive: hsl(0 72% 51%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(0 0% 88.6%);
  --input: hsl(0 0% 88.6%);
  --ring: hsl(24.6 94.6% 53.1%);
  --chart-1: hsl(24.6 94.6% 53.1%);
  --chart-2: hsl(143.8 61.2% 52%);
  --chart-3: hsl(206.7 89% 67.8%);
  --chart-4: hsl(174.3 41.8% 50.8%);
  --chart-5: hsl(325.5 100% 73.7%);
  --sidebar: hsl(0 0% 100%);
  --sidebar-foreground: hsl(0 0% 7.8%);
  --sidebar-primary: hsl(24.6 94.6% 53.1%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(0 0% 92.2%);
  --sidebar-accent-foreground: hsl(0 0% 7.8%);
  --sidebar-border: hsl(0 0% 88.6%);
  --sidebar-ring: hsl(24.6 94.6% 53.1%);
  --font-sans: Space Grotesk, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, monospace;
  --radius: 1rem;
  --tracking-normal: -0.015em;
  --spacing: 0.25rem;
}

.dark {
  --background: hsl(0 0% 3.5%);
  --foreground: hsl(0 0% 94.9%);
  --card: hsl(0 0% 7.8%);
  --card-foreground: hsl(0 0% 94.9%);
  --popover: hsl(0 0% 7.8%);
  --popover-foreground: hsl(0 0% 94.9%);
  --primary: hsl(24.6 94.6% 53.1%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(0 0% 10%);
  --secondary-foreground: hsl(0 0% 85%);
  --muted: hsl(0 0% 7.8%);
  --muted-foreground: hsl(220 8% 68%);
  --accent: hsl(0 0% 12.2%);
  --accent-foreground: hsl(0 0% 94.9%);
  --destructive: hsl(0 72% 51%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(0 0% 12.2%);
  --input: hsl(0 0% 12.2%);
  --ring: hsl(24.6 94.6% 53.1%);
  --chart-1: hsl(24.6 94.6% 53.1%);
  --chart-2: hsl(143.8 61.2% 52%);
  --chart-3: hsl(206.7 89% 67.8%);
  --chart-4: hsl(174.3 41.8% 50.8%);
  --chart-5: hsl(325.5 100% 73.7%);
  --sidebar: hsl(0 0% 7.8%);
  --sidebar-foreground: hsl(0 0% 94.9%);
  --sidebar-primary: hsl(24.6 94.6% 53.1%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(0 0% 12.2%);
  --sidebar-accent-foreground: hsl(0 0% 94.9%);
  --sidebar-border: hsl(0 0% 12.2%);
  --sidebar-ring: hsl(24.6 94.6% 53.1%);
  --font-sans: Space Grotesk, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, monospace;
  --radius: 1rem;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
  --tracking-normal: var(--tracking-normal);
  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    letter-spacing: var(--tracking-normal);
  }
}

Type

Two faces. Three roles.

Display and body share Space Grotesk. Machine output is JetBrains Mono.

type specimentype specimen
Space Grotesk · JetBrains Mono

  1. display-xl

    72

    dFlow

  2. display-lg

    56

    You build the product.

  3. display-md

    36

    We manage the infrastructure.

  4. body-lg

    18

    Deploy your apps and databases in one place. We handle the infrastructure.

  5. label

    13

    repo scan

Use

Keep the sprite intact.

Clear space is one eye-height on every side. Do not invent a second mark.

  1. 01

    Do not stretch or crop

    Keep the aspect ratio. Do not rotate, crop the crests, or squeeze the lockup.

  2. 02

    Do not recolor the mark

    The sprite stays orange. No shadows, gradients, or extra strokes.

  3. void

    03

    Do not use retired marks

    The purple letterform and the play-triangle stamp are retired. Do not mix them with this kit.

  4. Dflow

    DFLOW

    dFlow

    04

    Write dFlow

    Preserve that capitalization. Not Dflow, DFLOW, or dflow in a headline.

  5. lockup
    mark

    05

    Mark below 144px

    Full lockup needs room. Use the mark alone when the lockup would sit under 144px wide. The mascot is not a favicon.

Downloads

Take the files.

Copy the public URL, or save the SVG. The path is the file.

SVG

Lockup on light

Mark plus wordmark for light surfaces.

/logo.svg

SVG

Lockup on dark

Mark plus wordmark for dark surfaces.

/logo-dark.svg

  • SVG

    Mark

    Static sprite. Favicon, avatars, OG.

    /logo-mark.svg

  • SVG

    Wordmark

    Outlined Space Grotesk. Light lettering, dark surfaces.

    /wordmark.svg

  • SVG

    Lockup, one color

    Near-black mark and lettering. Print and single ink.

    /logo-mono.svg

  • SVG

    Lockup, reversed

    White mark and lettering for dark surfaces.

    /logo-reversed.svg

Social

SVG

Social cover

Head and wordmark on a light plate. 1200×630.

/social-cover.svg

SVG

Social avatar

Square mark for profile pictures.

/social-avatar.svg

Cover, transparent

Same cover with no plate. Dark lettering, light surfaces.

/social-cover-transparent.svg

  • GitHubOpens in a new tab
  • DiscordOpens in a new tab
  • LinkedInOpens in a new tab
StatusOpens in a new tab

Product

  • Pricing
  • Application hosting
  • Database hosting
  • Template hosting
  • AI workflow

Resources

  • Features
  • How it works
  • DocsOpens in a new tab
  • dFlow MCPOpens in a new tab
  • Blog
  • Changelog
  • Roadmap
  • Feedback
  • Developers Hub
  • dFlow vs.

Company

  • Enterprise
  • Partners
  • Join dFlow
  • Startup program
  • Affiliate program
  • Trust Center
  • Brand
  • Contact

Use cases

  • All use cases
  • Web applications
  • APIs and services
  • Data services
  • Workers and cron
  • AI apps and agents
  • Internal tools
  • Replace DIY cloud stack
  • Leave Kubernetes overhead
  • SOC 2Coming soon
  • Australian DPA
  • GDPR
  • Moving our trust centerOpens in a new tab

© 2026 dFlow

  • Privacy
  • Cookies
  • Terms
  • AnalyticaOpens in a new tab