Remixes of cartica.co
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Cartica
description: |
Cartica's design system embodies a bold, contemporary aesthetic rooted in
high-contrast minimalism and architectural precision. The palette is
deliberately monochromatic—pure black and white—creating a stark, professional
presence that mirrors the built environment shown in the brand's hero imagery.
The visual language prioritizes typography as a primary design element, with
massive display sizes and aggressive negative letter-spacing that conveys
confidence and forward momentum. Depth is achieved not through colour shifts
but through layered gradients, opacity variations, and meticulously scaled
whitespace. The overall mood is premium yet approachable: a creative studio
that speaks with authority without sacrificing clarity.
source:
url: "https://cartica.co"
pagesAnalyzed: 6
extractedAt: 2026-10-15
tokensMeasured: true
colors:
primary: "#FFFFFF"
canvas: "#000000"
on-primary: "#000000"
ink: "#FFFFFF"
typography:
display-xxl:
fontFamily: Inter
fontSize: 345.6px
fontWeight: 900
lineHeight: 1
letterSpacing: -17.28px
display-xl:
fontFamily: Inter
fontSize: 260px
fontWeight: 900
lineHeight: 0.92
letterSpacing: -9.1px
textTransform: uppercase
display-lg:
fontFamily: archivoSemiExpanded
fontSize: 256px
fontWeight: 800
lineHeight: 1
letterSpacing: -11.2px
display-md:
fontFamily: Inter
fontSize: 60px
fontWeight: 600
lineHeight: 1
letterSpacing: -1.5px
display-md-strong:
fontFamily: Inter
fontSize: 60px
fontWeight: 900
lineHeight: 1
letterSpacing: -1.5px
textTransform: uppercase
display-sm:
fontFamily: Inter
fontSize: 51.84px
fontWeight: 900
lineHeight: 0.95
letterSpacing: -3.11px
heading-lg:
fontFamily: Inter
fontSize: 36px
fontWeight: 800
lineHeight: 1.11
letterSpacing: 0px
heading-md:
fontFamily: Inter
fontSize: 28px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
heading-sm:
fontFamily: Inter
fontSize: 24px
fontWeight: 300
lineHeight: 1.33
letterSpacing: 0.6px
heading-sm-strong:
fontFamily: Inter
fontSize: 24px
fontWeight: 800
lineHeight: 1.33
letterSpacing: 0px
heading-sm-uppercase:
fontFamily: Inter
fontSize: 24px
fontWeight: 900
lineHeight: 1.33
letterSpacing: -1.2px
textTransform: uppercase
heading-xs:
fontFamily: Inter
fontSize: 20px
fontWeight: 900
lineHeight: 1.4
letterSpacing: -1px
textTransform: uppercase
body-lg:
fontFamily: Inter
fontSize: 16.56px
fontWeight: 400
lineHeight: 1.7
letterSpacing: 0px
body-md:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
body-sm-loose:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
body-sm-uppercase:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 3.08px
textTransform: uppercase
body-xs:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0.3px
textTransform: uppercase
button-md:
fontFamily: Inter
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
button-md-strong:
fontFamily: Inter
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
button-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0.35px
button-sm-ui-sans-serif:
fontFamily: ui-sans-serif
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0.35px
button-sm-strong:
fontFamily: ui-sans-serif
fontSize: 14px
fontWeight: 600
lineHeight: 1.43
letterSpacing: 0px
button-xs:
fontFamily: ui-sans-serif
fontSize: 13px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
label:
fontFamily: ui-sans-serif
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption-sm:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0px
caption-sm-uppercase:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 2.64px
textTransform: uppercase
caption-sm-2:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 2.88px
textTransform: uppercase
caption-sm-strong:
fontFamily: Inter
fontSize: 12px
fontWeight: 500
lineHeight: 1.33
letterSpacing: 0px
caption-sm-3:
fontFamily: Inter
fontSize: 12px
fontWeight: 700
lineHeight: 1.33
letterSpacing: 0px
caption-xs:
fontFamily: Inter
fontSize: 11px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
code-md:
fontFamily: ui-monospace
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
code-sm:
fontFamily: ui-monospace
fontSize: 10px
fontWeight: 900
lineHeight: 1.5
letterSpacing: -0.5px
textTransform: uppercase
code-xs:
fontFamily: ui-monospace
fontSize: 9px
fontWeight: 400
lineHeight: 1.5
letterSpacing: -0.22px
textTransform: uppercase
rounded:
none: 0px
xs: 4px
sm: 6px
md: 12px
lg: 16px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section: 48px
band: 64px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.25) 0px 25px 50px -12px"
md: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px"
lg: "rgba(0, 0, 0, 0.8) 0px 4px 24px -8px"
elevationStrategy: layered-micro
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FBFBFB"
surface: "#F1F1F1"
surfaceRaised: "#E9E9E9"
text: "#1D1D1D"
textMuted: "#707070"
border: "#D8D8D8"
accent: "#707070"
accentFg: "#FFFFFF"
focusRing: "#8F8F8F"
elevation: shadow
dark:
bg: "#000000"
surface: "#000000"
surfaceRaised: "#141414"
text: "#FFFFFF"
textMuted: "#A6A6A6"
border: "#1F1F1F"
accent: "#FFFFFF"
accentFg: "#000000"
focusRing: "#FFFFFF"
elevation: "border+surface"
gradients:
- context: hero
kind: linear
value: "linear-gradient(rgba(0, 0, 0, 0) 60%, oklab(0 0 0 / 0.5) 85%, rgb(0, 0, 0) 100%)"
- context: section
kind: linear
value: "linear-gradient(to right bottom, lab(7.78201 -0.0000149012 0) 0%, lab(15.204 0 -0.00000596046) 50%, lab(7.78201 -0.0000149012 0) 100%)"
- context: section
kind: mixed
value: "repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 14px), radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0) 45%), radial-gradient(circle at 85% 70%, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0) 55%)"
- context: section
kind: radial
value: "radial-gradient(960px 320px at 10% -10%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0) 60%), radial-gradient(640px 320px at 90% 0%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0) 60%)"
- context: hero
kind: linear
value: "linear-gradient(360deg, rgb(0, 0, 0) 54.2%, rgb(44, 44, 44))"
- context: section
kind: linear
value: "linear-gradient(to right bottom, lab(15.204 0 -0.00000596046) 0%, lab(7.78201 -0.0000149012 0) 100%)"
components:
button-primary:
typography: "{typography.button-md}"
textColor: "{colors.on-primary}"
height: 40px
padding: "8px 20px 8px 20px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.primary}"
button-text:
typography: "{typography.button-md}"
textColor: "oklab(0.999994 0.0000455677 0.0000200868 / 0.8)"
height: 40px
padding: "8px 16px 8px 16px"
button-text-sm:
typography: "{typography.body-sm}"
textColor: "lab(84.92 0 -0.0000119209)"
height: 36px
card:
typography: "{typography.body-md}"
textColor: "lab(84.92 0 -0.0000119209)"
border: "1px solid oklab(0.999994 0.0000455678 0.0000200868 / 0.1)"
padding: "48px 0px 48px 0px"
rounded: "{rounded.lg}"
backgroundColor: "oklab(0 0 0 / 0.4)"
navigation:
typography: "{typography.body-md}"
textColor: "{colors.on-primary}"
height: 40px
footer:
typography: "{typography.body-md}"
textColor: "lab(84.92 0 -0.0000119209)"
backgroundColor: "{colors.canvas}"
footer-sm:
textColor: "oklab(0.999994 0.0000455678 0.0000200868 / 0.4)"
border: "1px solid oklab(0.999994 0.0000455678 0.0000200868 / 0.1)"
padding: "32px 0px 0px 0px"
fontSize: 14px
fontFamily: ui-sans-serif
fontWeight: 400
lineHeight: 1.43
link:
textColor: "{colors.ink}"
fontSize: 16px
fontFamily: archivoSemiExpanded
fontWeight: 400
lineHeight: 1.5
link-sm:
typography: "{typography.body-md}"
textColor: "lab(84.92 0 -0.0000119209)"
border: "1px solid oklab(0.999994 0.0000455678 0.0000200868 / 0.1)"
rounded: "{rounded.md}"
backgroundColor: "oklab(0.999994 0.0000455678 0.0000200868 / 0.05)"
states:
other-hover:
target: other
state: hover
borderColor: "rgba(255, 255, 255, 0.2)"
other-disabled:
target: other
state: disabled
opacity: 0.7
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: true
headingPx: 75
bodyPx: 16
sectionPaddingX: 24
- width: 768
containerWidth: 734
gridColumns: 4
navLinksVisible: 0
menuToggleVisible: true
headingPx: 154
bodyPx: 16
sectionPaddingX: 24
- width: 1024
containerWidth: 1004
gridColumns: 4
navLinksVisible: 2
menuToggleVisible: false
headingPx: 205
bodyPx: 16
sectionPaddingX: 24
- width: 1280
containerWidth: 1216
gridColumns: 4
navLinksVisible: 2
menuToggleVisible: false
headingPx: 256
bodyPx: 16
sectionPaddingX: 24
- width: 1440
containerWidth: 1339
gridColumns: 4
navLinksVisible: 2
menuToggleVisible: false
headingPx: 260
bodyPx: 16
sectionPaddingX: 24
coverage:
statesFound: 62
gradientsFound: 17
rolesUnassigned: 0
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Cartica's design system embodies a bold, contemporary aesthetic rooted in high-contrast minimalism and architectural precision. The palette is deliberately monochromatic—pure black and white—creating a stark, professional presence that mirrors the built environment shown in the brand's hero imagery. The visual language prioritizes typography as a primary design element, with massive display sizes and aggressive negative letter-spacing that conveys confidence and forward momentum. Depth is achieved not through colour shifts but through layered gradients, opacity variations, and meticulously scaled whitespace. The overall mood is premium yet approachable: a creative studio that speaks with authority without sacrificing clarity.
Key Characteristics
{colors.primary} — #FFFFFF): Primary CTA fills, brand accent, active state, and all primary text including headings. Used as text color on dark backgrounds and as fill on interactive elements.{colors.canvas} — #000000): Default page background, section fills, and label colour when applied over brand surfaces. Provides the foundational contrast for the entire system.Primary: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Secondary: archivoSemiExpanded, ui-monospace, ui-sans-serif (fallback families for specific display and component roles)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | archivoSemiExpanded | 345px | 900 | 1.0 | −17.28px | Ultra-large hero display; extreme negative tracking |
| Display XL | Inter | 260px | 900 | 0.92 | −9.1px | Largest hero heading; aggressive compression |
| Display LG | archivoSemiExpanded | 256px | 800 | 1.0 | −11.2px | Secondary display size; semi-expanded serif |
| Display MD Strong | Inter | 60px | 900 | 1.0 | −1.5px | Bold display variant; uppercase |
| Display MD | Inter | 60px | 600 | 1.0 | −1.5px | Medium display size; regular weight option |
| Display SM | Inter | 51.84px | 900 | 0.95 | −3.11px | Mid-range display with negative tracking |
| Heading LG | Inter | 36px | 800 | 1.11 | 0px | Large section headings |
| Heading MD | Inter | 28px | 400 | 1.63 | 0px | Medium heading; lighter weight |
| Heading SM Strong | Inter | 24px | 800 | 1.33 | 0px or −0.6px | Strong small heading; tighter variants exist |
| Heading SM Uppercase | Inter | 24px | 900 | 1.33 | −1.2px | Small heading uppercase variant |
| Heading SM | Inter | 24px | 300 | 1.33 | 0.6px | Light heading option; loose tracking |
| Heading XS | Inter | 20px | 900 | 1.4 | −1px | Extra-small heading; uppercase |
| Body LG | Inter | 16.56px | 400 | 1.7 | 0px | Large body text; generous line height |
| Body MD | Inter | 16px | 400 | 1.5 | 0px | Standard body size |
| Body SM Loose | Inter | 14px | 400 | 1.63 | 0px | Small body with open line height |
| Body SM Uppercase | Inter | 14px | 400 | 1.43 | 3.08px | Small uppercase text with wide tracking |
| Body SM | Inter | 14px | 400 | 1.43 | 0px | Standard small body |
| Button MD Strong | Inter | 16px | 600 | 1.5 | 0px | Medium button; strong weight |
| Button MD | Inter | 16px | 500 | 1.5 | 0px | Standard medium button |
| Button SM Strong | ui-sans-serif | 14px | 600 | 1.43 | 0px | Small button; strong weight |
| Button SM UI Sans | ui-sans-serif | 14px | 500 | 1.43 | 0px or 0.35px | Small button; two tracking variants |
| Button SM | Inter | 14px | 500 | 1.5 | 0.35px | Standard small button |
| Button XS | ui-sans-serif | 13px | 500 | 1.5 | 0px | Extra-small button |
| Caption SM Strong | Inter | 12px | 500 | 1.33 | 0px | Small caption; strong weight |
| Caption SM 3 | Inter | 12px | 700 | 1.33 | 0px | Extra-bold small caption |
| Caption SM 2 | Inter | 12px | 400 | 1.33 | 2.88px | Small caption with wide tracking |
| Caption SM Uppercase | Inter | 12px | 400 | 1.33 | 2.64px | Small uppercase caption |
| Caption SM | Inter | 12px | 400 | 1.33 | 0px | Standard small caption |
| Body XS | Inter | 12px | 400 | 1.33 | 0.3px, 0.6px, or 1.56px | Extra-small text; three tracking variants |
| Caption XS | ui-monospace | 11px | 400 | 1.63 | 0px | Extra-small caption; monospace |
| Code MD | ui-monospace | 14px | 400 | 1.43 | 0px | Medium code block |
| Code SM | ui-monospace | 10px | 900 | 1.5 | −0.5px | Small code; bold weight |
| Code XS | ui-monospace | 9px | 400 | 1.5 | −0.22px | Extra-small code |
| Label | ui-sans-serif | 16px | 400 | 1.5 | 0px | Form label text |
ui-monospace with conservative sizes and occasional negative tracking for technical clarity.Primary Button
#FFFFFF#0000008px 20px{rounded.sm} — 6pxText Button
rgba(0, 0, 0, 0)8px 16px{rounded.none} — 0pxText Button Small
rgba(0, 0, 0, 0)lab(84.92 0 -0.0000119209))0px{rounded.none} — 0pxDefault Card
oklab(0 0 0 / 0.4)lab(84.92 0 -0.0000119209))48px 0px1px solid with 10% white opacity oklab(0.999994 0.0000455678 0.0000200868 / 0.1){rounded.lg} — 16pxForm Label
Default Navigation
rgba(0, 0, 0, 0)#000000 (on light backgrounds) or white (on dark)0px{rounded.none} — 0pxDefault Link (Hero)
#FFFFFFFooter Small Link
oklab(0.999994 0.0000455678 0.0000200868 / 0.05) (5% white)lab(84.92 0 -0.0000119209))0px1px solid with 10% white opacity{rounded.md} — 12pxFooter Default
#000000lab(84.92 0 -0.0000119209))0pxCartica uses an 8px base unit with a structured scale:
{spacing.xxs} — 4px — Minimal gap; internal component spacing{spacing.xs} — 8px — Tight spacing; form elements, small components{spacing.sm} — 12px — Small gap; nested lists, compact groups{spacing.md} — 16px — Standard padding; buttons, cards, inputs{spacing.lg} — 20px — Generous gap; section spacing, component margins{spacing.xl} — 24px — Large section padding{spacing.xxl} — 32px — Extra-large spacing; major section breaks{spacing.xxxl} — 40px — Extra-large component spacing{spacing.section} — 48px — Section-level padding; card internal spacing{spacing.band} — 64px — Full-width band padding; hero sections, major visual breaksWhitespace is a primary design tool. The system prioritizes negative space around display typography and card containers. Large headings (60px+) are given generous breathing room via line-height compression (0.92–1.0) and negative letter-spacing, creating visual weight without padding inflation. Sections are divided by {spacing.band} (64px) gaps, creating distinct visual rhythm. Cards and containers use {spacing.section} (48px) for internal breathing room.
{rounded.none} — 0px — Buttons (text variants), images, sharp UI{rounded.xs} — 4px — Minimal curve; decorative accents{rounded.sm} — 6px — Primary buttons; subtle rounding{rounded.md} — 12px — Footer links, moderate curves{rounded.lg} — 16px — Cards, containers, major components{rounded.full} — 9999px — Pill-shaped elements; less common in measured data1px — Used on buttons (text variants) and card borders| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; transparent or solid fill | Text buttons, background surfaces, most interactive elements |
| Micro | rgba(0, 0, 0, 0.25) 0px 25px 50px -12px | Subtle lift on custom elements; barely perceptible depth |
| Light | rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px | Light elevation on contained components |
| Strong | rgba(0, 0, 0, 0.8) 0px 4px 24px -8px | Strong lift on buttons and prominent elements |
Elevation Philosophy: Cartica employs a minimalist shadow approach. Most surfaces remain flat, relying on colour contrast and border treatments for definition. Depth arrives through multi-layer gradient overlays (hero and section backgrounds) rather than traditional drop shadows. When shadows do appear, they use near-transparent black with substantial blur radii and negative spread, creating a barely-there lift effect that respects the bold, clean aesthetic.
The system uses graduated opacity values for interactive and decorative effects:
0.57 — Subtle overlay or disabled element tint0.63 — Moderate transparency for layered effects0.70 — Disabled or de-emphasized state0.80 — Secondary or muted interactive element0.90 — Hover or active emphasis; near-opaque0.98 — Near-full opacity; minimal transparencyThe system maintains a clear stacking hierarchy:
1, 2, 3 — Document flow; default stacking10, 20, 30, 40 — Menu and overlay layers9999 — Top-most layer; modals and fixed overlays{spacing.band} (64px) to separate major sections and {spacing.section} (48px) for internal card padding.{rounded.full} only where specifically required; primary buttons default to {rounded.sm} (6px).| Viewport | Content Width | Grid Columns | Nav Links Visible | Menu Toggle | Display Heading Size | Body Size | Section Padding X |
|---|---|---|---|---|---|---|---|
| 375px | 343px | 1 | 0 | Yes | 75px | 16px | 24px |
| 768px | 734px | 4 | 0 | Yes | 154px | 16px | 24px |
| 1024px | 1004px | 4 | 2 | No | 205px | 16px | 24px |
| 1280px | 1216px | 4 | 2 | No | 256px | 16px | 24px |
| 1440px | 1339px | 4 | 2 | No | 260px | 16px | 24px |
Collapse Point: Navigation toggles to mobile menu at 768px; menu toggle appears when nav links drop to 0 visible.
Interactive elements maintain a minimum 40px height and 40px width for touch accessibility:
Text Scaling: Display headings scale responsively; {typography.display-xl} compresses from 75px to 260px across viewports, maintaining readability and visual hierarchy at every breakpoint.
{colors.primary} — #FFFFFF){colors.canvas} — #000000)#FFFFFF) on dark; Black (#000000) on light backgroundslab(84.92 0 -0.0000119209)) on dark; dark gray on light#FFFFFF) in headers/hero; light gray on footeroklab(0.999994 0.0000455678 0.0000200868 / 0.1) on dark cards; 1px solidAll display text (60px+) must compress via negative letter-spacing. Minimum −1.5px at 60px; maximum −17.28px at 345px. Never use positive tracking on display.
Primary buttons default to 6px radius ({rounded.sm}). Text buttons and links use 0px radius ({rounded.none}). Card containers use 16px radius ({rounded.lg}).
Spacing obeys the 8px base unit scale. Sections separate by {spacing.band} (64px). Cards use {spacing.section} (48px) internal padding. All horizontal padding is 24px at every breakpoint.
Monochromatic contrast only. White on black, black on white, or opacity/gradient shifts. No accent colors or semantic status ramps.
Line heights compress on large headings. Display sizes: 0.92–1.0. Body text: 1.43–1.7. Maintain this hierarchy consistently.
Depth via gradient and opacity, not shadows. Multi-layer gradient overlays on hero sections; rarely use drop shadows (only strong lift at 0px 4px 24px -8px on primary buttons).
Typography scale drives visual hierarchy, not padding. Use {typography.display-xxl} (345px) for hero, {typography.heading-lg} (36px) for sections, {typography.body-md} (16px) for standard text.
Navigation collapses to mobile menu at 768px. At 375px and 768px, menu toggle is visible; at 1024px+, up to 2 nav links show inline; full nav layout only on 1280px+.
All interactive elements must achieve 40px × 40px minimum for touch accessibility. Scale buttons and links accordingly; maintain padding consistency.
Opacity variants exist: 0.57, 0.63, 0.70, 0.80, 0.90, 0.98. Use for overlays, disabled states, and hover effects. Never drop text opacity below 0.80 without degrading readability.
borderColor, backgroundColor, color, opacity shifts). Specific component-level active, focus, and disabled states were not all individually measured.primary, text, and text-sm button variants were measured. Other button sizes (XS, LG) or states (loading, disabled) may exist but were not fully extracted.