Skip to content

Search

Search pages, runs, and actions

Style guide

Colors, type, logo, and tokens for Foundry tooling. Use this page if you're not on shadcn/ui. Click any swatch to copy its hex value.

STYLE_GUIDE.mdRules for people and agents foundry-tokens.cssPlain CSS variables foundry-theme.cssshadcn/ui + Tailwind v4 tokens.jsonEvery value, hex and OKLCH foundry.jsonshadcn registry item
Lockup on lightfoundry-logo.svg
Lockup on darkfoundry-logo-reversed.svg
Glyphfoundry-glyph.svg
Foundry
App markfoundry-mark.svg

Click a tile to download its SVG. Use SVG wherever you can. Grab a PNG for slides, docs, and tools that don't take SVG.

foundry-logo.pngLockup on light · PNG · 1200×276 foundry-logo-reversed.pngLockup on dark · PNG · 1200×276 foundry-mark.pngApp mark · PNG · 296×295 favicon.icoFavicon · ICO email/foundry-logo-email.pngEmail signature · PNG · 400×100

Email signatures.

Foundry

400×100 PNG, white background. Shown at 200×50.

Use this file for signatures, not the full-size lockup. It's sized for email, and its white background keeps it readable when a mail app switches to dark mode.

https://foundry-branding.vercel.app/brand/logo/email/foundry-logo-email.png
  1. In Gmail, open Settings, then See all settings, then find Signature.
  2. Click the image button, choose Web address (URL), and paste the URL above.
  3. If it shows too large, click the image and pick a smaller size. For HTML signatures, use the copied HTML instead. It sets the size to 200×50 for you.

Do

  • Keep clear space equal to the glyph's dot on every side.
  • Keep the lockup at least 96px wide and the glyph at least 16px.
  • Use the square app mark for favicons, avatars, and tiles.
  • Place it on white, ink-950, or ink-975.

Don't

  • Recolor the glyph, or swap in the slide orange #F06924.
  • Redraw, retype, stretch, rotate, or outline the logo.
  • Put it on orange, photos, or busy backgrounds.
  • Add shadows, glows, gradients, or animation.

Color.

One bold orange on a calm navy-tinted base. Orange is for action and focus, not decoration.

Brand, primary actions, focus

Text, sidebar, dark backgrounds

Supporting accent, charts

Destructive, errors, charts

Light backgrounds, text on dark

Orange buttons use ink text.

White on #E8871E is 2.65:1 and fails. Ink on orange is 6.82:1.

Do thisNot this

Orange text uses the link token.

That's orange-700 #AC5101 on light (5.34:1) and orange-400 #F6A14F on dark (8.72:1).

Here's an inline link in this mode.

Scales.

orange

Foundry Orange. The brand color, taken from the final logo mark. 500 is the exact mark color.

ink

Ink. Navy-tinted neutrals. 950 is the navy from the slide templates.

teal

Teal. The supporting accent from the Round 3 logo explorations.

ember

Ember. The red-orange from the slide template bands. Used for destructive states.

green

Status green, from the InstUI palette.

blue

Status blue, from the InstUI palette.

amber

Status amber, from the InstUI palette.

Semantic tokens.

Build with these names, not raw hex. In plain CSS they're --fd-* variables. In shadcn/ui they're the standard theme variables plus success, warning, info, and link.

TokenLightDark
background
foreground
card
card-foreground
popover
popover-foreground
primary
primary-foreground
secondary
secondary-foreground
muted
muted-foreground
accent
accent-foreground
destructive
destructive-foreground
success
success-foreground
warning
warning-foreground
info
info-foreground
link
border
input
ring
chart-1
chart-2
chart-3
chart-4
chart-5
sidebar
sidebar-foreground
sidebar-primary
sidebar-primary-foreground
sidebar-accent
sidebar-accent-foreground
sidebar-border
sidebar-ring

Contrast.

Light mode

Aaforeground on background18.09 AA
Aacard-foreground on card18.09 AA
Aaprimary-foreground on primary6.82 AA
Aasecondary-foreground on secondary15.07 AA
Aamuted-foreground on muted4.83 AA
Aaaccent-foreground on accent8.31 AA
Aadestructive-foreground on destructive6.59 AA
Aasuccess-foreground on success5.76 AA
Aawarning-foreground on warning5.92 AA
Aainfo-foreground on info5.75 AA
Aalink on background5.34 AA
Aasidebar-foreground on sidebar12.05 AA
Aasidebar-primary on sidebar6.82 AA

Dark mode

Aaforeground on background17.32 AA
Aacard-foreground on card15.96 AA
Aaprimary-foreground on primary6.82 AA
Aasecondary-foreground on secondary13.42 AA
Aamuted-foreground on muted5.46 AA
Aaaccent-foreground on accent13.42 AA
Aadestructive-foreground on destructive8.31 AA
Aasuccess-foreground on success6.02 AA
Aawarning-foreground on warning8.16 AA
Aainfo-foreground on info5.92 AA
Aalink on background8.72 AA
Aasidebar-foreground on sidebar12.83 AA
Aasidebar-primary on sidebar7.26 AA

Typography.

Inter for everything in the UI. JetBrains Mono for code, IDs, and numbers that line up. Lora only for long-form reading.

Inter

font-sans

Aa

Ship it on Friday.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & @ # % → ✓

'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif

Lora

font-serif

Aa

A field guide to quiet tools.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & @ # % → ✓

'Lora Variable', Lora, ui-serif, Georgia, serif

JetBrains Mono

font-mono

Aa

run_7f3a2c · 4m 12s

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & @ # % → ✓

'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace
Display · 48/52 · 700

Runs finish faster with warm caches

H1 · 36/40 · 700

Runs finish faster with warm caches

H2 · 30/36 · 600

Runs finish faster with warm caches

H3 · 24/32 · 600

Runs finish faster with warm caches

H4 · 20/28 · 600

Runs finish faster with warm caches

Body · 16/24 · 400

Runs finish faster with warm caches

UI · 14/20 · 400

Runs finish faster with warm caches

Caption · 12/16 · 500

Runs finish faster with warm caches

Lora is for long-form reading: docs intros, release notes, and pull quotes. Keep it out of buttons, labels, and navigation.

Spacing, radius, and shadow.

A 4px spacing grid, a small radius, and light shadows. The mark is a square, and the UI should feel crisp.

Spacing (4px base)

1 · 4px
2 · 8px
3 · 12px
4 · 16px
6 · 24px
8 · 32px
12 · 48px
16 · 64px

Radius (base 0.375rem)

sm

md

lg

xl

2xl

full

Shadow

shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl

Use it without shadcn/ui.

Link the plain token file, then use the --fd- variables. Dark mode follows the OS, or set data-theme on <html>.

HTML
<link rel="stylesheet" href="/brand/foundry-tokens.css" />
<html data-theme="dark">  <!-- optional: force a mode -->
CSS
.button-primary {
  background: var(--fd-primary);
  color: var(--fd-primary-foreground);
  border-radius: var(--fd-radius);
  font: 500 14px/20px var(--fd-font-sans);
}
.button-primary:focus-visible {
  outline: 2px solid var(--fd-ring);
  outline-offset: 2px;
}