# FUNDAMENTALco brand brief

Version 0.1.0. Media covered: web, slides. Source: https://brand.fcopilot.co/fundamentalco/

Status tags: values and rules without a tag are confirmed by the brand owner or read exactly from source files. **[inferred]** = derived from examples. **[assumed]** = a placeholder not yet confirmed; follow it, but say so if it decides an important choice. Counts: 3 confirmed, 50 sourced, 37 inferred, 24 assumed.

## How to apply

1. Pick a colour scheme from the approved list.
2. Set type with the typography roles below. Use only the listed weights.
3. Place the logo variant that matches the background.
4. Check the piece against the **Avoid** list. One breach fails the piece.
5. Check the rules for the medium you are working in.

## Avoid

- Do not use any colour except black and white for FUNDAMENTALco's own material. A client colour is the only exception. [assumed]
- Do not use more than one accent colour in a piece. [assumed]
- Do not round corners or add shadows. [inferred]
- Do not set headings in bold (700). Use 400 or 500. [assumed]
- Do not use an off-white or cream background. White is #FFFFFF.
- Do not recolour, outline, stretch or retype the wordmark. [assumed]
- Do not use a typeface other than Helvetica Neue for FUNDAMENTALco's own material. [assumed]
- Do not add gradients to FUNDAMENTALco's own material. [assumed]

## Colour [assumed]

Approved schemes: dark, light.

Accent: supplied per piece. FUNDAMENTALco has no accent colour of its own. A piece made for a client may use one colour from that client's brand.

Proportion: Black and white only. A client accent, if used, stays under 10% of the area.

Denied combinations:
- #00000040 (color.black-25) on #000000 (color.black): dimmed text is only for inactive items

| token | value | note |
|---|---|---|
| `color.black` | #000000 |  |
| `color.white` | #ffffff |  |
| `color.black-10` | #0000001a |  |
| `color.black-25` | #00000040 | [inferred] |
| `color.white-20` | #ffffff33 | [assumed] |
| `color.white-25` | #ffffff40 | [inferred] |
| `color.scheme.light.background` | #ffffff | [inferred] |
| `color.scheme.light.foreground` | #000000 | [inferred] |
| `color.scheme.light.muted` | #00000040 | [inferred] |
| `color.scheme.light.border` | #000000 | [inferred] |
| `color.scheme.light.divider` | #0000001a |  |
| `color.scheme.dark.background` | #000000 | [inferred] |
| `color.scheme.dark.foreground` | #ffffff | [inferred] |
| `color.scheme.dark.muted` | #ffffff40 | [inferred] |
| `color.scheme.dark.border` | #ffffff | [inferred] |
| `color.scheme.dark.divider` | #ffffff33 | [assumed] |

## Typography

- **display**: 500 240px/0.75 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing -7.2px (typography.display)
- **headline**: 500 40px/1 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px (typography.headline)
- **title**: 500 28px/1 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px (typography.title)
- **body**: 400 20px/1.2 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px (typography.body)
- **slide-title**: 500 64px/1.05 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing -1.3px (typography.slide.title)
- **slide-body**: 400 28px/1.25 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px (typography.slide.body)
- **slide-label**: 500 20px/1.2 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px (typography.slide.label)
- **slide-numeral**: 500 200px/0.85 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing -6px (typography.slide.numeral)
- **slide-footer**: 400 14px/1.2 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px (typography.slide.footer)

Headline weight: 500 (font.weight.medium)

| token | value | note |
|---|---|---|
| `font.family.sans` | "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif |  |
| `font.weight.regular` | 400 |  |
| `font.weight.medium` | 500 |  |

| token | value | note |
|---|---|---|
| `typography.display` | `font-size: clamp(32px, 13.3779cqw, 240px); letter-spacing: -0.03em; line-height: .75` | Website h1. Scales with its container; 240px is the maximum. |
| `typography.headline` | 500 40px/1 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px | Website h2. 32px/32px under 992px, 24px/24px on phones. |
| `typography.title` | 500 28px/1 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px | Website h3. |
| `typography.body` | 400 20px/1.2 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px | Website body. 16px/20px under 992px. |
| `typography.slide.title` | 500 64px/1.05 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing -1.3px | [assumed] |
| `typography.slide.body` | 400 28px/1.25 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px | [assumed] |
| `typography.slide.label` | 500 20px/1.2 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px | [assumed] |
| `typography.slide.numeral` | 500 200px/0.85 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing -6px | [assumed] |
| `typography.slide.footer` | 400 14px/1.2 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px | [assumed] |

## Logo [assumed]

Variant by background:
- light: `wordmark-black` https://brand.fcopilot.co/fundamentalco/assets/logo/wordmark-black.svg
- dark: `wordmark-white` https://brand.fcopilot.co/fundamentalco/assets/logo/wordmark-white.svg
- photo: `wordmark-white` https://brand.fcopilot.co/fundamentalco/assets/logo/wordmark-white.svg

Clear space: The height of the wordmark on all sides.

Minimum width: 120px (logo.min-width)

## Signature device: line grid [inferred]

A rectangular grid of thin lines in the foreground colour. On deck covers it is 4 columns by 2 rows filling the slide inside the margins. The website intro animates a dense grid zooming out to a coarse one.

Asset: `grid-intro` https://brand.fcopilot.co/fundamentalco/assets/motion/grid-intro.lottie.json

## Elements

- **outline-box** [inferred]: Rectangle with a 1px (border.hairline) line in #000000 (color.scheme.light.border) (or dark), no fill, no radius, no shadow. Holds text or a diagram.
- **label-box** [inferred]: Rectangle filled with the foreground colour, text in the background colour, 500 20px/1.2 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px (typography.slide.label). Used for row and column labels.
- **divider**: Full-width 1px (border.hairline) line in the scheme's divider colour, between sections.
- **round-button**: Circular button filled with #000000 (color.black), icon in #ffffff (color.white). Turns 360° on hover in 200ms (duration.hover).
- **slide-footer** [inferred]: "FUNDAMENTALco Confidential" bottom-left in 400 14px/1.2 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing 0px (typography.slide.footer); page number bottom-right; client logo small in a top or bottom corner.

## Layout tokens

| token | value | note |
|---|---|---|
| `space.gutter` | 30px | Website column gutter and page margin. |
| `space.margin` | 30px |  |
| `space.slide-margin` | 80px | Slide margin at 1920×1080. [assumed] |

| token | value | note |
|---|---|---|
| `grid.columns` | 6 | Website content grid. |
| `grid.columns-logos` | 8 | Website client logo grid. |
| `grid.columns-cards` | 3 | Website card grid. |

| token | value | note |
|---|---|---|
| `border.hairline` | 1px | [inferred] |

| token | value | note |
|---|---|---|
| `radius.none` | 0px | [inferred] |
| `radius.round` | 9999px | Circular buttons on the website only. |

| token | value | note |
|---|---|---|
| `logo.min-width` | 120px | Smallest width for the wordmark on screen. [assumed] |

## Motion tokens

| token | value | note |
|---|---|---|
| `duration.instant` | 50ms | Cursor follow. |
| `duration.fast` | 150ms | Small reveals (partner list items). |
| `duration.hover` | 200ms | Round CTA 360° turn on hover. |
| `duration.fade` | 300ms | Accordion content opacity. |
| `duration.reveal` | 440ms | Larger reveals (press items). |
| `duration.expand` | 450ms | Accordion height. |
| `duration.flip` | 500ms | Card flip. |
| `duration.intro-grid` | 2s | Intro grid animation (Lottie, 60 frames at 30fps). |
| `duration.stagger.tight` | 30ms | Between partner list items. |
| `duration.stagger.normal` | 100ms | Between press items. |
| `duration.stagger.cards` | 120ms | Between card flips. |

| token | value | note |
|---|---|---|
| `easing.standard` | cubic-bezier(0.25, 0.1, 0.25, 1) | CSS 'ease'. Used for accordion and reveals. |
| `easing.out` | cubic-bezier(0, 0, 0.58, 1) | CSS 'ease-out'. Cursor. |
| `easing.flip` | cubic-bezier(0.22, 0.61, 0.36, 1) | Card flip. |

| token | value | note |
|---|---|---|
| `offset.reveal` | 8px | Revealed items rise from 8px below. |

| token | value | note |
|---|---|---|
| `transition.expand` | 450ms cubic-bezier(0.25, 0.1, 0.25, 1) |  |
| `transition.reveal` | 440ms cubic-bezier(0.25, 0.1, 0.25, 1) |  |
| `transition.reveal-fast` | 150ms cubic-bezier(0.25, 0.1, 0.25, 1) |  |
| `transition.flip` | 500ms cubic-bezier(0.22, 0.61, 0.36, 1) |  |

## Rules

### color

- **COL-01** (must; web, slides): Use black and white only. White is pure #FFFFFF.
- **COL-02** (should; slides) [assumed]: A piece made for a client may add one colour taken from the client's brand, used for emphasis only (a numeral, a highlight, a key shape).
- **COL-03** (should; slides, web) [assumed]: Keep a client accent under 10% of the area of any slide or screen.
- **COL-04** (should; slides) [inferred]: Show inactive items (for example the other agenda items) at 25% opacity of the foreground colour.
- **COL-05** (should; slides) [inferred]: Use the dark scheme (black background) for covers and section dividers, and the light scheme (white background) for content slides.

### device

- **GRID-01** (should; slides, web) [assumed]: The line grid is the signature graphic. Use it on deck covers and section dividers, on black.
- **GRID-02** (should; slides) [inferred]: On covers, draw the grid 4 columns by 2 rows inside the margins, in hairline white lines, with the wordmark above it.
- **GRID-03** (should; slides) [assumed]: Do not fill grid cells with colour or images; text may sit inside a cell.

### imagery

- **IMG-01** (should; web, slides) [inferred]: Portraits are black and white.
- **IMG-02** (should; slides) [inferred]: Full-bleed photographs carry a dark overlay so white text on top reads clearly.
- **IMG-03** (should; slides) [inferred]: Client imagery and product shots appear inside a frame or box, not full bleed.

### layout

- **LAY-01** (must; web): Website pages use a 6 (grid.columns)-column grid with 30px (space.gutter) gutters and margins.
- **LAY-02** (should; web, slides): Separate sections with a full-width hairline in the scheme's divider colour.
- **LAY-03** (should; slides) [inferred]: Put information in outline boxes (1px, square corners, no fill); use filled label boxes for row or column headers.
- **LAY-04** (should; slides) [assumed]: Leave generous empty space; one idea per slide.
- **LAY-05** (should; slides) [assumed]: Keep 80px (space.slide-margin) margins on 1920×1080 slides.

### logo

- **LOGO-01** (must; web, slides): The wordmark is "FUNDAMENTALco" with a raised lowercase "co". Use the supplied files only.
- **LOGO-02** (must; web, slides) [inferred]: Use the black wordmark on white and the white wordmark on black or on photographs.
- **LOGO-03** (should; web, slides) [inferred]: On covers and the website header, set the wordmark at full width between the page margins, at the top.
- **LOGO-04** (must; web, slides) [inferred]: In running text write the name as FUNDAMENTALco.

### motion

- **MOT-01** (should; web) [inferred]: Motion is short and plain - fades, small rises of 8px (offset.reveal), height changes and flips. No bounce or overshoot.
- **MOT-02** (should; web): Lists reveal item by item with a stagger (30ms (duration.stagger.tight) for short items, 100ms (duration.stagger.normal) for larger ones).
- **MOT-03** (must; web): Respect reduced motion - with prefers-reduced-motion, show the end state with no transition.
- **MOT-04** (should; web, slides) [inferred]: The intro sequence is the line grid animation, then the wordmark, then the page. Use it only as an opening.

### slides

- **SLD-01** (must; slides) [inferred]: Slides are 16:9 (1920×1080).
- **SLD-02** (must; slides) [inferred]: Every content slide has the footer "FUNDAMENTALco Confidential" bottom-left and the page number bottom-right.
- **SLD-03** (should; slides) [inferred]: In client work, place the client's logo small in a corner, in one colour (black or white).
- **SLD-04** (should; slides) [inferred]: The agenda is a numbered list; when it repeats as a section divider, the current item is full strength and the rest are dimmed.
- **SLD-05** (should; slides) [inferred]: Use the recurring diagram forms - three-column framework with large letters, two-circle Venn in outline, two poles with a balance triangle, horizontal timeline with dots, quote with large quote marks - drawn in hairline outline.
- **SLD-06** (should; slides) [assumed]: When a client's own styling is used for a section (as in the Olaplex deck), the FUNDAMENTALco cover, dividers and footer stay as standard.

### typography

- **TYPE-01** (must; web, slides): Set everything in Helvetica Neue (LT Pro where available), weights 400 and 500 only.
- **TYPE-02** (must; web, slides): Headings use weight 500 with tight leading (line height equal to the font size, 0.75 for the display size).
- **TYPE-03** (should; web, slides) [inferred]: Headings and titles are in sentence case. The only capitals are in the wordmark and proper nouns.
- **TYPE-04** (should; slides) [inferred]: Slide titles sit top-left and run to at most three lines.
- **TYPE-05** (should; slides) [inferred]: Show key figures as large numerals in 500 200px/0.85 "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing -6px (typography.slide.numeral) with a short label beneath.

### web

- **WEB-01** (should; web): Section headings on the website are full-width wordmark-style titles; each section opens and closes like an accordion.
- **WEB-02** (should; web): Use the round black button with an icon for small calls to action.

## Assets

- `wordmark-black` (logo, on light): https://brand.fcopilot.co/fundamentalco/assets/logo/wordmark-black.svg
- `wordmark-white` (logo, on dark): https://brand.fcopilot.co/fundamentalco/assets/logo/wordmark-white.svg
- `grid-intro` (motion, on dark): https://brand.fcopilot.co/fundamentalco/assets/motion/grid-intro.lottie.json

## Not yet defined

The brand does not specify these yet. Do not invent them; keep to what is defined and say what you assumed.

- Written brand guidelines, if any exist. Nothing here is the brand owner's prose yet.
- Deck source files (.pptx / .key) to measure slide sizes, margins and colours exactly.
- Font licence. The website's Adobe Fonts kit belongs to the previous agency; font files are not in this package.
- Clear space and minimum size for the wordmark.
- Off-brand examples.
- Media other than web and slides (documents, social, print, video).
- Voice and writing rules.
- Static grid device artwork for slides (only the website intro Lottie exists here).