Brand

Logo assets

Archivo ExtraBold, mixed case, joined as “EmergentLabs” with a colour split: “Emergent” green, “Labs” off-white on dark and charcoal on light. Each mark is shown on the surface it is built for. The site is dark-only, so the dark marks are the live assets; the light marks exist for email, social, and print. All wordmarks are outlined paths, so they do not depend on the font being installed.

Full lockup / on dark

Live header treatment. Transparent, so no box appears over the header.

Full lockup / on light

Off-white badge, green 600 and charcoal. For email, social and print; the site itself is dark-only.

Wordmark / on dark

Footer, and the logo in transactional email.

Wordmark / on light

Green shifts to #0B9451 on light — the neon is illegible there. “Labs” is charcoal #3D4A42.

App icon

One icon for both modes: the off-white badge reads as a bright chip on dark.

Avatar (circle)

Circle crop for Slack, LinkedIn, and GitHub.

Preferred usage by surface

header: fullLockup

footer: wordmark

app icon: icon

Use the lockup in the header, the wordmark where the icon would be too small to read, and the icon alone only when space is constrained. Reach for the boxed variants (assets.logo.boxed) only on a surface that cannot do transparency.

Color

Core semantic colors

These are the primary colors the interface should rely on most often.

Brand primary

color.semantic.brand.primary#16DB7DMain CTA and primary actions

Brand accent

color.semantic.brand.accent#6AF8A3Highlights and accents

Page background

color.semantic.bg.page#050A07Default page surface

Primary text

color.semantic.text.primary#F4F1E8Headings and core body copy

Secondary text

color.semantic.text.secondary#A9BFAFSupporting copy

Default border

color.semantic.border.defaultrgba(106,248,163,0.16)Cards, separators, fields

Surface

color.semantic.bg.surface#0B1B13Cards and elevated sections

Footer background

color.semantic.bg.footer / chrome.footer.bg#020403Footer and lower chrome

Green ramp

50

100

200

300

400

500

600

700

800

900

400 is the mark on dark, 600 the mark on light, 700 the only green that passes AA as text on cream.

State / success

color.semantic.state.success#11B767

State / warning

color.semantic.state.warning#F59E0B

State / error

color.semantic.state.error#EF4444

State / info

color.semantic.state.info#5CC8FF

Tier A

color.semantic.tier.a#16DB7DOn rgba(22,219,125,0.12)

Tier B

color.semantic.tier.b#FFD166On rgba(255,209,102,0.12)

Tier C

color.semantic.tier.c#FF9F6BOn rgba(255,159,107,0.12)

Shape

Radius and spacing

Corners are a hint, not a shape. Controls take sm, cards md, panels lg; pill is for dots and progress tracks only. Spacing sits on an 8px grid.

radius.none

0px

radius.xs

2px

radius.sm

4px

radius.md

6px

radius.lg

8px

radius.xl

12px

radius.pill

999px

spacing.xs

4px

spacing.sm

8px

spacing.md

16px

spacing.lg

24px

spacing.xl

32px

spacing.2xl

48px

spacing.3xl

64px

Dimension

Surfaces and effects

One quiet layer per surface. Glass belongs over a backdrop, sheen carries the hairline, glow marks focus and the primary action. The shimmer runs once per hover and not at all under reduced motion.

plain

Flat surface, default border. The workhorse.

sheen

Green top-light and a hairline fading from the corner.

glass

Blur 12px over rgba(11,27,19,0.62). Only over a backdrop.

glow.soft

Interaction reference

Core controls

The theme carries every state shown here, so a plain MUI Button, TextField, Checkbox or Alert already looks right. Reach for sx only for layout.

Primitives

Chips and ledger rows

Status labels and the mono ledger row used for figures.

Status chips

Active

In development

Demo

Retired

Default chip

Ledger rows

Shell max width

1200px

Content max width

840px

Button min height

48px

Header height

64px

Motion

Timing

Short and settled. Nothing loops; anything that moves on its own respects prefers-reduced-motion.

motion.duration.fast

120ms

motion.duration.normal

180ms

motion.duration.slow

260ms

motion.easing.standard

cubic-bezier(0.2, 0, 0, 1)

motion.easing.emphasized

cubic-bezier(0.2, 0, 0, 1.2)

effect.shimmer.durationMs

900ms

Typography

Type system

Rendered examples of the main type styles used across the site.

Font families

sans: var(--font-general-sans), ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Inter, Arial, sans-serif

mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

Available font weights

regular: 400

medium: 500

semibold: 600

bold: 700

extrabold: 800

H1

theme.typography.h1

Technical leadership for founders building what comes next.

H2

theme.typography.h2

A practical bridge between strategy, prototype, and execution.

H3

theme.typography.h3

Built for clarity, confidence, and better decisions.

H4

theme.typography.h4

Useful emphasis for section-level content.

Body 1

theme.typography.body1

Use body1 for primary readable content and short explanatory text.

Body 2

theme.typography.body2

Use body2 for supporting text, notes, and lighter explanatory copy.

Button

theme.typography.button

Primary action

Overline

theme.typography.overline

Semantic label

Caption

theme.typography.caption

Small support text and metadata

Notes

Quick usage guidance

A lightweight reference for designers and developers adjusting the system.

Use brand primary for main actions and avoid introducing new greens unless they map to a semantic state.

Use accent sparingly for highlights, glow, and supportive Matrix-inspired visual energy.

Keep logo selection tied to surface and contrast, not personal preference.

Adjustments to heading scale, spacing, and flow should ideally happen at the token/theme level before applying one-off page overrides.

Emergent Labs design reference