Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/constanza101/borrissol/llms.txt

Use this file to discover all available pages before exploring further.

Every visual value in Borrissol — color, font size, spacing, border radius, shadow — lives in src/styles/theme.css as a CSS custom property. Components never hardcode a color hex, a pixel value, or a font size directly. Instead they reference a token: var(--color-black), var(--space-md), var(--radius-pill). This single-source-of-truth approach means restyling a value like the primary border radius updates every component at once, with zero drift between copies.
Rule #1 — The DS is the single source of truth. Never hardcode any color, spacing, font size, or border value. Always reference a token from theme.css. If a value isn’t tokenized yet, add it to theme.css first, then use it.

​
Color tokens

The palette is monochromatic — five steps from white to black with one muted gray for secondary text:
TokenValueRole
--color-white#FFFFFFPrimary background
--color-light#F5F5F5Section fills, button preview backgrounds
--color-mid#D9D9D9Borders, dividers, separators
--color-muted#797979Secondary text, labels, metadata
--color-black#000000Primary text, CTAs, active borders
Four semantic aliases map the raw tokens to their intended roles:
TokenMaps toUsage
--bgvar(--color-white)Page background
--bg-sectionvar(--color-light)Section backgrounds
--fgvar(--color-black)Primary text
--fg-mutedvar(--color-muted)Secondary / supporting text

​
Typography scale

Roboto is self-hosted as a single WOFF2 file (Roboto-latin.woff2) that covers both weight 400 and weight 500 — only these two weights are used across the entire site. font-display: swap is set to avoid invisible text during load. The display font Coiny is specified for the .logo-wordmark element exclusively and must never appear on headings, hero text, or body copy.

​
Headings (H1–H4)

TokenValue
--font-size-h14rem
--font-size-h22.5rem
--font-size-h32.1rem
--font-size-h41.4rem
--font-weight-heading400
--line-height-heading1.1
--letter-spacing-heading-0.02em

​
Body paragraphs (P1–P3)

TokenValueUse case
--font-size-p11.4remLead / intro copy
--font-size-p21.1remService descriptions, main body
--font-size-p30.9remFootnotes, captions, supporting text
--font-weight-body400
--line-height-body1.3
--letter-spacing-body-0.02em

​
UI / Utility

TokenValueUse case
--font-size-ui0.8remLabels, prices, metadata, dates
--line-height-ui1.1

​
Button typography (shared)

TokenValue
--font-weight-btn500
--text-transform-btnuppercase
--letter-spacing-btn0.05em

​
Spacing scale

TokenValueTypical usage
--space-xs8pxInternal component gap
--space-sm16pxCard padding, grid gap
--space-md24pxNav padding, column gap
--space-lg40pxSection separation
--space-xl80pxHero padding, large sections

​
Border radius

TokenValueUsage
--radius-pill9999pxInputs, primary and secondary buttons
--radius-md8pxMedia frames (.media), nav, containers
--radius-sm4pxSmall UI elements
--radius-xs2pxCards (.card)

​
Border tokens

TokenValueUsage
--border-default0.5px solid var(--color-mid)Dividers, containers
--border-strong1px solid var(--color-black)Inputs, secondary button, active states
--border-hairline0.5px solid var(--color-mid)Hairline divider

​
Button styles

All buttons share uppercase text, font-weight: 500, and letter-spacing: 0.05em — these are never overridden.
PropertyPrimarySecondaryTertiary
font-size0.8rem0.9rem0.8rem
background--color-blacktransparenttransparent
color--color-white--color-black--color-black
bordernone1px solid blacknone
border-radius--radius-pill--radius-pill0
padding1.2em 2em1.2em 2.004em1.2em 0
hoveropacity: 0.85bg: --color-light—
An optional .btn-sm modifier reduces the size for compact contexts.

​
Utility classes

Utility classes are defined in theme.css and carry the type system site-wide. Scoped component CSS carries layout only.

​
Typography utilities

ClassDescription
.text-h1 – .text-h4Applies the corresponding heading token set (size, weight, line-height, letter-spacing)
.text-p1 – .text-p3Applies the corresponding body token set
.text-ui--font-size-ui, --line-height-ui, weight 500
.text-mutedSets color to var(--color-muted)
.eyebrowSmall uppercase label above section headings

​
Container utilities

ClassDescription
.cardWhite surface + --border-default hairline border + --radius-xs corners
.mediaMedia frame: --radius-md + overflow: clip; child img/iframe/video fills and crops. Set aspect-ratio in scoped CSS.

​
Button utilities

ClassDescription
.btnBase styles (shared typography)
.btn-primaryBlack background, white text, pill radius
.btn-secondaryTransparent background, black border, pill radius
.btn-tertiaryNo border, no radius, zero horizontal padding
.btn-smSize modifier for compact contexts

​
Miscellaneous utilities

ClassDescription
.badgeDark badge / tag
.badge-lightLight badge variant
.inputPill-bordered form input (uses --input-* tokens)
.checkboxStyled checkbox (checked state)
.checkbox-uncheckedStyled checkbox (unchecked state)
.link-arrowInline link with trailing arrow indicator

​
The hybrid model: utility classes + scoped CSS

Utility classes carry the type system; scoped CSS carries layout. Both apply to the same element when needed: 
<h2 class="text-h2 tb-h2">Team Building</h2>

/* scoped <style> in the component */
.tb-h2 { margin: 0 0 var(--space-md); }
The text-h2 class sets size, weight, line-height, and letter-spacing. The tb-h2 class adds only the margin that is specific to this layout. This prevents the type scale from drifting when tokens are updated, because every heading across the site references the same .text-h* definition.
.text-* utilities set type only — color comes from .text-muted or the inherited body default. Margins are never baked into utility classes; always add them in scoped CSS.

​
Icons

Borrissol uses Lucide Icons exclusively. All icons are outline-style with a stroke width of 1.5px and use var(--icon-color) (aliased to var(--color-black)) for their color.
TokenValueContext
--icon-stroke-width1.5pxAll icons
--icon-colorvar(--color-black)Default icon color
--icon-size-inline16pxInline UI
--icon-size-btn20pxInside buttons
--icon-size-nav24pxNavigation
--icon-size-feature32pxFeature highlights
--icon-size-hero48pxHero / CTA
Icons are loaded via CDN and initialized with lucide.createIcons(): 
<script src="https://unpkg.com/lucide@latest"></script>
<!-- Usage: -->
<i data-lucide="arrow-right"></i>
Do not use any icon library other than Lucide. Do not change the stroke width from 1.5px. Do not use filled icon variants.

​
Fonts: self-hosted Roboto

Roboto is self-hosted as a single WOFF2 file (Roboto-latin.woff2) — no Google Fonts CDN request at runtime. A single @font-face block covers both weights using a range declaration. Requesting any other weight (300, 700, etc.) would introduce unused bytes and a render-blocking request. 
/* Correct — only these two weights exist in the project */
font-weight: 400; /* body, headings */
font-weight: 500; /* buttons, labels, eyebrows, .text-ui */
The Coiny display font is specified for the .logo-wordmark class on the brand name element in the Navbar and must never appear anywhere else in the UI.

Build docs developers (and LLMs) love

Get started for freeTalk to us