CoreWeave Brand

Style Guide

CoreWeave Brand

Colors (WIP)

Fill and border colors for backgrounds and more.
Changes here will apply site wide.

Blue 100
#0541E9
blue-100
existing-color
var(--blue-100)
Black 100
#02030B
neutral-1300
existing-color
var(--cw-black)
White
#FFFFFF
neutral-0
existing-color
var(--cw-white)
Blue 90
#1E54EB
blue-90
var(--_katamari-26---blue-90)
Blue 80
#3767ED
blue-80
var(--cw-blue-80)
Blue 70
#507AF0
blue-1100
var(--cw-blue-1100)
Blue 60
#698DF2
blue-900
var(--cw-blue-900)
Blue 50
#82A0F4
blue-800
var(--cw-blue-800)
Blue 40
#9BB3F6
blue-700
var(--cw-blue-700)
Blue 30
#B4C6F8
blue-600
var(--cw-blue-600)
Blue 20
#CDD9FB
blue-500
var(--cw-blue-500)
Blue 10
#E6ECFD
blue-500
var(--cw-blue-500)
Blue 5
#F2F5FE
blue-500
var(--cw-blue-500)
Black 90
#555B61
neutral-1100
var(--cw-neutral-1100)
Black 80
#686D73
neutral-1000
var(--cw-neutral-1000)
Black 70
#7D8185
neutral-900
var(--cw-neutral-900)
Black 60
#95999E
neutral-800
var(--cw-neutral-800)
Black 50
#AFB3B8
neutral-700
var(--cw-neutral-700)
Black 40
rgba(0,0,0,0.5)
existing-color
var(--50-black)
Black 30
rgba(0,0,0,0.5)
existing-color
var(--50-black)
Black 20
rgba(0,0,0,0.5)
existing-color
var(--50-black)
Black 10
rgba(0,0,0,0.5)
existing-color
var(--50-black)
Warm White
#F2F4F7
neutral-200
var(--cw-neutral-200)
Gray
#EBEEF2
neutral-300
var(--cw-neutral-300)
Mid Blue
#E2E6EB
neutral-300
var(--cw-neutral-300)
Sky Blue
#CED2D9
neutral-300
var(--cw-neutral-300)
Cyan
#C2C6CC
neutral-300
var(--cw-neutral-300)
Aqua
#C2C6CC
neutral-300
var(--cw-neutral-300)
Teal
#C2C6CC
neutral-300
var(--cw-neutral-300)
Ice
#C2C6CC
neutral-300
var(--cw-neutral-300)
Mist
#C2C6CC
neutral-300
var(--cw-neutral-300)
Sea Glass
#C2C6CC
neutral-300
var(--cw-neutral-300)
Green
#C2C6CC
neutral-300
var(--cw-neutral-300)
Copper
#C2C6CC
neutral-300
var(--cw-neutral-300)
Red
#C2C6CC
neutral-300
var(--cw-neutral-300)
CoreWeave Transparent
#00000000
existing-color
var(--transparent)
CoreWeave Border on Dark BG
#333333
existing-color
var(--cw-border-color-on-dark)
CoreWeave Border on Light BG
#CCCCCC
existing-color
var(--cw-border-color-on-light)
CoreWeave Paragraph on Light BG
#464B51
existing-color
var(--cw-paragraph-on-light)
CoreWeave Paragraph on Dark BG
#9E9E9E
existing-color
var(--cw-paragraph-on-dark)
CoreWeave White Smoke
#EFF3F6
existing-color
var(--cw-off-white)
CoreWeave Light Gray
#F4F5F7
existing-color
var(--cw-light-gray)
CoreWeave Off White
#F9FAFC
existing-color
var(--cw-off-white)
CoreWeave Dark Grey
#191919
existing-color
var(--cw-dark-grey)
CoreWeave Dark Gray
#1E1E1E
existing-color
var(--cw-dark-gray)
CoreWeave Medium Gray
#616161
existing-color
var(--cw-medium-gray)
CoreWeave Dim Grey
#555555
existing-color
var(--dim-grey)
CoreWeave Off Gray
#323338
existing-color
var(--cw-off-gray)
CoreWeave Gray 34
#343338
existing-color
var(--cw-grey-34)
Silver Gray
#B3B5B7
existing-color
var(--silver-gray)
CoreWeave Alert
#FF4141
red-1000
var(--cw-red-1000)
CoreWeave Navy
#1E242E
existing-color
var(--cw-navy)

Typography

Type styles for body text, headings & subheadings.
Changes here will apply site-wide.

Fonts Used: ArponaSans

CoreWeave uses a modified version of the Major Third Scale which provides noticeable increments, making it easier to create distinct visual hierarchies. This allows designers to apply strong visual emphasis on certain elements, such as headers, subheaders, and key points. The ratio is very versatile and is suitable for applications, websites, and presentations.

When pasting in text, it is best to use CMD + Shift + V, as it should paste and match the style of the text box you are pasting into. This means it should remove all formatting from the text and paste it in without extra bold or italic styling attached (or even hidden characters). You can also select all of the text and use the Clear Formatting button that appears at the end of the little popup above the text.

When using headings, be sure to select the heading level on the element itself. This can be located by clicking on the gear icon after clicking on the Heading, or by using the Settings tab on the right panel. All headings default to the section's font color, but can use the heading-white combo class to turn white.

Font size below: 60px: Desktop Size, T 56px: Tablet Size, M 40px: Mobile Size

Heading 1

Matches Class: Headline 1
60px | T 56px | M 40px, 800 Extra Bold
h1
currentColor

Heading 2

Matches Class: Headline 3 (Until further notice)
40px | T 40px | M 32px, 800 Extra Bold
h2
currentColor

Heading 3

Matches Class: Headline 3
32px | T 32px | M 24px, 800 Extra Bold
h3
currentColor

Heading 4

Matches Class: Headline 4
24px | T 24px | M 20px, 800 Extra Bold
h4
currentColor
Heading 5
Matches Class: Headline 5
20px, 800 Extra Bold
h5
currentColor
Heading 6
Matches Class: Headline 6
18px, 800 Extra Bold
h6
neutral-1300

Font size below: 60px: Desktop Size, T 56px: Tablet Size, M 40px: Mobile Size

Add a heading class as: heading-60-36. If updating a font size in the class, update the class.

Display 1

144px | T 5vw | M 42px, 500 Medium
KAT26 Display 1
currentColor

Display 2

124px | T ??px | M ??px, 500 Medium
KAT26 Display 2
currentColor

Display 3

104px | T 9.9vw | M 44px, 500 Medium
KAT26 Display 3
currentColor

Headline 1

84px | T ??px | M ??px, 500 Medium
KAT26 Headline 1
currentColor

Headline 2

64px | T ??px | M ??px, 500 Medium
KAT26 Headline 2
currentColor

Headline 3

44px | T 4vw | M 32px, 500 Medium
KAT26 Headline 3
currentColor

Headline 4

32px | T 3vw | M 24px, 500 Medium
KAT26 Headline 4
currentColor

Headline 5

24px | T ??px | M ??px, 500 Medium
KAT26 Headline 5
currentColor

Headline 6

18px | T ??px | M ??px, 500 Medium
KAT26 Headline 6
currentColor

Headline 7

60px | T 50px | M 36px, 500 Medium
KAT26 Headline 7
currentColor

Heading 60·36

60px | T 50px | M 36px, 800 Extra Bold
heading-60-36
currentColor

Heading 56·32

56px | T 70px | M 32px, 800 Extra Bold
heading-56-32
currentColor

Heading 48·36

48px | M 36px, 800 Extra Bold
heading-48-36
currentColor

Heading 48·32

48px | M 32px, 800 Extra Bold
.heading-48-32
currentColor

Heading 44·32

44px | M 32px, 800 Extra Bold
heading-44-32
currentColor

Heading 40·32

40px, | M 32px 500 Medium
heading-40-32
currentColor

Heading 40·28

40px | M 28px, 800 Extra Bold
heading-40-28
currentColor

Heading 36·26

36px | M 26px, 800 Extra Bold
.heading-36-26
currentColor

Heading 32·24

32px | M 24px, 800 Extra Bold
heading-32-24
currentColor

Heading 32·20

32px | M 20px, 800 Extra Bold
heading-32-20
currentColor

Heading 24·24

24px, 800 Extra Bold
heading-24-24
currentColor

Heading 24·20

24px, | M 20px 800 Extra Bold
heading-24-20
currentColor

Paragraphs

Add a paragraph class as: KAT26 Paragraph Medium or paragraph-13-12

Paragraph XLarge. Font size 32px, M ??px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

32px | M ??px, 400 Regular
paragraph
black-100

Paragraph Large. Font size 24px, M 16px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

24px | M 16px, 400 Regular
paragraph
black-100

Paragraph Medium. Font size 18px, M 16px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

18px | M 16px, 400 Regular
paragraph
black-100

Paragraph Small (Default Size). Font size 16px, M 16px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

16px | M 16px, 400 Regular
paragraph
black-100

Paragraph XSmall. Font size 14px, M 14px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

14px | M 14px, 400 Regular
paragraph
black-100

Paragraph 13px, M 12px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

13px | M 12px, 400 Regular
paragraph
currentColor

Paragraph 14px, M 14px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

14px | M 14px, 400 Regular
paragraph
currentColor

Paragraph 22px, M 20px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

22px | M 20px, 400 Regular
paragraph
currentColor

eyebrows

Each eyebrow below the first is a combo class of the first. Enter the Eyebrow class first, then click again to select a variant.

Eyebrow

16px | M 16px, 800 Extra Bold
paragraph
currentColor

Eyebrow Dark

16px | M 16px, 800 Extra Bold
paragraph
neutral-1300

Eyebrow 14px | M 12px

14px | M 12px, 800 Extra Bold
paragraph
currentColor

Eyebrow Blue 16px

16px | M 16px, 800 Extra Bold
paragraph
blue-1000

Eyebrow Blue 14px

14px | M 12px, 800 Extra Bold
paragraph
blue-1000

Eyebrow Blue 12px

12px | M 12px, 800 Extra Bold
paragraph
blue-1000

Eyebrow Neutral 900 14px

14px | M 14px, 800 Extra Bold
paragraph
neutral-900

Eyebrow #9E9E9E Gray 14px

14px | M 12px, 800 Extra Bold
paragraph
var(--cw-paragraph-on-dark)

Eyebrow Gray

14px | M 12px, 800 Extra Bold
paragraph
var(--silver-gray)

Eyebrow Purple Gray 16px

16px | M 12px, 800 Extra Bold
paragraph
#63606d

Eyebrow Purple Gray 12px

12px | M 12px, 800 Extra Bold
paragraph
#63606d

Eyebrow Purple Gray 12px

12px | M 12px, 800 Extra Bold
paragraph
#63606d

Lists

Adding bullets (or not) to lists can be set by adding the List Item class and then adding a List Item Bullet or List Item Checkmark combo class.

16px | M 14px, 400 Regular
list item
inherits
  • List Item Check
  • List Item Check
  • List Item Check
16px | M 14px, 400 Regular
list item
inherits
  • List Heading 22px
    List Item
  • List Item
  • List Item
22px | M 22px, 800 Extra Bold
list item
inherits
  • List Heading 18px
    List Item
  • List Item
  • List Item
18px | M 16px, 800 Extra Bold
list item
inherits

Block Quote

“NVIDIA A100 GPUs have a different usage profile than the other SKUs we offer on-demand, due to the characteristics of large scale training workloads. With a limited selection of GPUs available on other cloud providers, many businesses struggle to access the scale of compute needed to accelerate training workloads. As an Elite CSP within the NVIDIA Partner Network, we care deeply about offering our clients the broadest range of GPUs at high-availability. We invested heavily in scaling our fleet of NVIDIA A40 GPUs to ensure our clients can access the scale and computing power their workloads require.”

— Brian Venturo, CTO, CoreWeave
32px | T 24px | M 24px, 500 Medium
blockquote
currentColor
“NVIDIA A100 GPUs have a different usage profile than the other SKUs we offer on-demand, due to the characteristics of large scale training workloads. With a limited selection of GPUs available on other cloud providers, many businesses struggle to access the scale of compute needed to accelerate training workloads. As an Elite CSP within the NVIDIA Partner Network, we care deeply about offering our clients the broadest range of GPUs at high-availability. We invested heavily in scaling our fleet of NVIDIA A40 GPUs to ensure our clients can access the scale and computing power their workloads require.”

— Brian Venturo, CTO, CoreWeave
24px | T 24px | M 18px, 500 Medium
blockquote
currentColor

KAT26 Generic Rich Text

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

1def is_prime(n):
2    if n <= 1:
3        return False
4    for i in range(2, int(n**0.5) + 1):
5        if n % i == 0:
6            return False
7    return True
8
9# Test it
10for num in range(1, 21):
11    print(f"{num}: {'Prime' if is_prime(num) else 'Not Prime'}")
  • Unordered List Item
  • Unordered List Item
  • Unordered List Item

New Paragraph!

  1. Ordered List Item
  2. Ordered List Item
  3. Ordered List Item

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tellus lorem, efficitur in scelerisque eget, tincidunt sit amet sem. Curabitur nec mauris varius, sagittis nibh non, pellentesque felis. Duis vitae consequat mi, quis dapibus neque. Ut efficitur a nibh a efficitur.

Praesent elementum neque sed risus ultrices, in facilisis purus pulvinar. Maecenas accumsan sagittis gravida. Ut tincidunt tempor eros, ut blandit purus molestie convallis. Nam efficitur ullamcorper condimentum. Donec nec mollis mauris, ut pellentesque urna. Praesent et erat tristique, tempus purus non, posuere enim. Mauris sed sollicitudin sem, eget aliquet nisl. Quisque nec quam iaculis, euismod metus id, eleifend arcu. Vivamus euismod, nulla sit amet egestas aliquet, mi ligula suscipit elit, sit amet laoreet dolor est quis tortor. Vestibulum gravida lacinia tortor, id vehicula augue tempor vitae. Cras placerat odio ac lectus tincidunt, rutrum gravida tellus tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla non commodo odio. In non venenatis enim. Praesent maximus non tortor sit amet venenatis.

Article Content Container

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

1def is_prime(n):
2    if n <= 1:
3        return False
4    for i in range(2, int(n**0.5) + 1):
5        if n % i == 0:
6            return False
7    return True
8
9# Test it
10for num in range(1, 21):
11    print(f"{num}: {'Prime' if is_prime(num) else 'Not Prime'}")
  • Unordered List Item
  • Unordered List Item
  • Unordered List Item

New Paragraph!

  1. Ordered List Item
  2. Ordered List Item
  3. Ordered List Item

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tellus lorem, efficitur in scelerisque eget, tincidunt sit amet sem. Curabitur nec mauris varius, sagittis nibh non, pellentesque felis. Duis vitae consequat mi, quis dapibus neque. Ut efficitur a nibh a efficitur.

Praesent elementum neque sed risus ultrices, in facilisis purus pulvinar. Maecenas accumsan sagittis gravida. Ut tincidunt tempor eros, ut blandit purus molestie convallis. Nam efficitur ullamcorper condimentum. Donec nec mollis mauris, ut pellentesque urna. Praesent et erat tristique, tempus purus non, posuere enim. Mauris sed sollicitudin sem, eget aliquet nisl. Quisque nec quam iaculis, euismod metus id, eleifend arcu. Vivamus euismod, nulla sit amet egestas aliquet, mi ligula suscipit elit, sit amet laoreet dolor est quis tortor. Vestibulum gravida lacinia tortor, id vehicula augue tempor vitae. Cras placerat odio ac lectus tincidunt, rutrum gravida tellus tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla non commodo odio. In non venenatis enim. Praesent maximus non tortor sit amet venenatis.

Tables in Richtext Elements

To create add a table within a Rich Text Element (double click the element if in Designer mode), press enter until a plus appears, then click the plus. Add an HTML Embed from the mini menu. Paste in your table code, be sure to include a <thead> and <tbody> section. View an example either by using Preview mode or by publishing to staging.

To create add a table within a Rich Text Element (double click the element if in Designer mode), press enter until a plus appears, then click the plus. Add an HTML Embed from the mini menu. Paste in your table code, be sure to include a <thead> and <tbody> section. View an example either by using Preview mode or by publishing to staging.

Pretraining Fine-tuning
Best for Building novel capabilities with full control Customizing a foundation model for specific domains
Cost / time $$$$ / Months to years $$ / Weeks to months
Pros
  • Total control over architecture and data
  • Maximum flexibility
  • Faster and cheaper
  • Tailored to business data
  • More practical for most teams
Cons
  • Extremely expensive
  • Requires massive datasets and GPU infrastructure
  • Inherits base model biases and limitations
  • Can still be resource-intensive
Example use cases
  • Proprietary LLMs in finance
  • Frontier-scale AI research
  • Biotech R&D assistants
  • Enterprise copilots
  • Regulatory chatbots

Links / URLs / Anchors

All Links »
General Style
‍
16px, 400 Regular
a
currentColor
Text Link Block
16px, 600 SemiBold
a
currentColor
Text Link Block (with chevron)
16px, 600 SemiBold
a
currentColor
16px, 600 SemiBold
a
currentColor
Text Link Component (No chevron)
16px, 600 SemiBold
a
currentColor

Buttons

Drag in a button and add the Button class. If any other variant is desired, click beside the Button class and select another. Place multiple buttons in a div element with the class Button Container for spaced buttons, 20px apart. Add combo class Button Container Center to that to center the group. To change button types with ease, use the Variable Button component.

Note: Unsure if all of these components should exist here.

LOGOS

Various available logos for use.

Logo Variants

Use SVGs when possible.

CoreWeave
@1x PNG -> AVIF
CoreWeave Light
CoreWeave
@1x PNG -> AVIF
CoreWeave Dark
CoreWeave
@2x PNG -> AVIF
CoreWeave Light
CoreWeave
@2x PNG -> AVIF
CoreWeave Dark
@2x PNG -> AVIF
CoreWeave Dark
SVG
CoreWeave White
SVG
CoreWeave Black
CoreWeave
SVG
CoreWeave Light
CoreWeave
SVG
CoreWeave Dark

COMPONENTS

Layouts and custom elements available for reuse. Any edits to them will change that instance, while double clicking into it and then editing will change all instances.

To change an instance for a specific page, right click the component and click Unlink Instance.

Warning: Unlinking an Instance while a Variant is set will create a new combo class on every single element inside.

Existing sections on each page can be made into components by right-clicking the section/element and selecting Create Component from the context menu. Be sure to unlink any instances that are varied from the original.

SAVED CLASSES & LAYOUTS

Saved layouts and classes.

Site Classes

Classes used sitewide and create cascading changes if edited. Try finding an existing combo class or class before making new classes and variants. Most important CSS styles mentioned.

KAT26 Section

Please do not edit, but use KAT26 Section and create variants through the component.

If using a plain section, still do not edit, but add a new class for the section or combo classes.

position: relative; padding-top: var(--cw-padding-120);
padding-bottom: var(--cw-padding-120);
KAT26 Section

KAT26 Section Wrapper

Please do not edit, but add new or existing combo classes.

position: relative; width: 1440px; max-width: 95%; margin-left: auto; margin-right: auto;
KAT26 Section Wrapper
var(--cw-site-wrapper)

KAT26 Section Header

Please do not edit, but add new or existing combo classes or use Edit CSS fields for different variants.

width: 75%;
KAT26 Section Header

KAT26 Section Content

Please do not edit. Is simply a container adjacent to the KAT26 Section Header to contain components and other elements etc.

KAT26 Section Content

KAT26 Eyebrow

Add new or existing combo classes or use Edit CSS fields for different variants.

KAT26 Eyebrow
var(--_katamari-26---cw-code-font)

KAT26 Rich Text Generic

Carefully edit its inside contents by selecting the desired element inside, then selecting its CSS Default Element style selector, attaching it to this class and then adjust styles. If properly attached to this rich text container class, you may edit sitewide default styles.

KAT26 Rich Text Generic

KAT26 Button Container

Please do not edit, but add new or existing combo classes or use Edit CSS fields for different variants.

KAT26 Button Container

KAT26 Button

Please do not edit, but use KAT26 Variable Button v2 and create variants through the component.

KAT26 Button

Saved Items & Classes

Saved hidden classes are here.

DO NOT DELETE THE FOLLOWING HIDDEN DIVS. THESE CONTAIN NECESSARY CLASSES FOR JAVASCRIPT USE.

Text Link
Text Link
Text Link
Text Link
Text Link
Text Link
Text Link
Text Link
Text Link
Text Link
Learn more
Legacy styles

Need to go back?

Visit the old Style Guide for quick reference. It may not exist forever!