Internal

Design system

118 tokens parsed from tokens.css. Values shown are the declared light-mode source; the swatches render live, so the theme toggle in the site header reflects what actually resolves.

Semantic color

Every value here should be a var() reference. A literal hex means a layer was bound to a primitive in Figma — see DESIGN_SYSTEM.md §1.

Text

var(--neutral-900)
var(--neutral-600)
var(--neutral-500)
var(--neutral-50)
var(--accent-700)
var(--neutral-900)
var(--neutral-900)

Surface

var(--neutral-white)
var(--neutral-50)
var(--neutral-200)
rgb(0 0 0 / 0.6)

Border

var(--neutral-200)
var(--neutral-300)
var(--neutral-400)
var(--accent-600)
var(--accent-700)

Accent

var(--accent-400)
var(--accent-500)
var(--accent-600)
var(--accent-50)
var(--accent-50)
var(--accent-100)

Contrast

WCAG AA needs 4.5:1 for body text, 3:1 for large text (18pt+ or 14pt bold). Computed live, so this re-checks when you toggle the theme.

ForegroundBackgroundRatioAAAA Large
--color-text-primary--color-surface-page———
--color-text-primary--color-surface-raised———
--color-text-secondary--color-surface-page———
--color-text-secondary--color-surface-raised———
--color-text-muted--color-surface-page———
--color-text-muted--color-surface-raised———
--color-text-inverse--color-surface-page———
--color-text-inverse--color-surface-raised———
--color-text-accent--color-surface-page———
--color-text-accent--color-surface-raised———
--color-text-on-accent--color-surface-page———
--color-text-on-accent--color-surface-raised———
--color-text-on-accent-outlined--color-surface-page———
--color-text-on-accent-outlined--color-surface-raised———

Primitives

Raw values. Should never be referenced outside tokens.css.

Neutral

neutral-white#ffffff
neutral-50#f7f7f4
neutral-100#efefeb
neutral-200#e2e2dc
neutral-300#c9c9c2
neutral-400#a3a39a
neutral-500#7a7a72
neutral-600#57574f
neutral-700#3b3b35
neutral-800#24241f
neutral-900#14140f
neutral-950#0a0a0a
neutral-black#000000

Accent

accent-50#fcffe5
accent-100#f7ffb8
accent-200#f0ff7a
accent-300#e9ff38
accent-400#dff500
accent-500#c2d400
accent-600#97a600
accent-700#6b7600
accent-800#414800
accent-900#232600

Type scale

The raw font-size steps. Composed text styles below build on these — reference the scale directly only when defining a new style.

--text-2xs0.75rem

Portfolio — Etele Illes

--text-xs0.8125rem

Portfolio — Etele Illes

--text-sm0.875rem

Portfolio — Etele Illes

--text-base1rem

Portfolio — Etele Illes

--text-lg1.125rem

Portfolio — Etele Illes

--text-xl1.375rem

Portfolio — Etele Illes

--text-2xl1.75rem

Portfolio — Etele Illes

--text-3xl2.25rem

Portfolio — Etele Illes

--text-4xl3rem

Portfolio — Etele Illes

--text-5xl4rem

Portfolio — Etele Illes

Text styles

One class per Figma text style. Names map mechanically.

.type-heading-h1

The quick brown fox jumps over the lazy dog

.type-heading-h2

The quick brown fox jumps over the lazy dog

.type-heading-h3

The quick brown fox jumps over the lazy dog

.type-body

The quick brown fox jumps over the lazy dog

.type-sm

The quick brown fox jumps over the lazy dog

.type-caption-mono

The quick brown fox jumps over the lazy dog

Button

Three variants — Primary, Outlined, and Text — each taking text, an icon, or both, via a variant prop and an icon prop on one component (see src/components/Button.astro). Icons are Font Awesome, loaded via kit script. Hover, tab to, and press the live buttons to see the real states; the disabled instances can't be triggered by interaction, so they're rendered as-is.

primary

Default.button-primary
--color-accent-default--color-text-on-accent
Hover.button-primary:hover
--color-accent-hover--color-text-on-accent
Focused.button-primary:focus-visible
--color-accent-hover--color-border-focus--border-width-highlight--color-text-on-accent
Pressed.button-primary:active
--color-accent-pressed--color-text-on-accent
Disabled.button-primary[disabled]
--color-border-strong--color-text-muted

outlined

Default.button-outlined
--color-surface-page--color-border-button--color-text-on-accent-outlined
Hover.button-outlined:hover
--color-accent-hover-outlined--color-border-focus
Focused.button-outlined:focus-visible
--color-accent-hover-outlined--color-border-focus--border-width-highlight
Pressed.button-outlined:active
--color-accent-pressed-outlined--color-border-focus
Disabled.button-outlined[disabled]
--color-surface-page--color-border-strong--color-text-muted

text

Default.button-text
--color-surface-page--color-text-on-accent-outlined
Hover.button-text:hover
--color-accent-hover-outlined
Focused.button-text:focus-visible
--color-accent-hover-outlined--color-border-focus--border-width-highlight
Pressed.button-text:active
--color-accent-pressed-outlined
Disabled.button-text[disabled]
--color-surface-page--color-text-muted

Table

From Figma node 217:3207 — header row, body rows, a first-column/ rest-of-row text color split (text/primary vs text/secondary), and a divider under every row but the last. Not used anywhere on the site yet; built ahead of need (see src/components/Table.astro).

Project

Owner

Status

Last updated

Website refresh

Alex Morgan

In progress

Oct 08, 2026

Brand guidelines

Jamie Chen

Completed

Oct 07, 2026

Onboarding flow

Taylor Reed

In review

Oct 06, 2026

Customer research

Jordan Lee

In progress

Oct 05, 2026

Asset library

Casey Patel

Not started

Oct 04, 2026

Release notes

Sam Rivera

Completed

Oct 03, 2026

Font stacks

The three type families in use. Shown as the literal CSS font-family stacks — see TODO.md for which are still placeholders.

--font-body
'Figtree', system-ui, sans-serif
--font-mono
'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace

Leading / tracking / weight

Line-height, letter-spacing, and font-weight primitives — combined into the composed text styles above, not usually referenced directly.

--leading-none
1
--leading-tight
1.1
--leading-snug
1.25
--leading-normal
1.5
--leading-relaxed
1.7
--tracking-tight
-0.02em
--tracking-normal
0
--tracking-wide
0.06em
--weight-regular
400
--weight-medium
500
--weight-semibold
600

Spacing

The base scale behind every padding, margin, and gap on the site — see DESIGN_SYSTEM.md §8.

--space-0var(--scale-0)
--space-1var(--scale-1)
--space-2var(--scale-2)
--space-3var(--scale-3)
--space-4var(--scale-4)
--space-5var(--scale-5)
--space-6var(--scale-6)
--space-8var(--scale-8)
--space-10var(--scale-10)
--space-12var(--scale-12)
--space-16var(--scale-16)
--space-20var(--scale-20)
--space-24var(--scale-24)

Radius

Corner radii, applied via border-radius. --radius-none is the default for most components.

none
sm
md
lg
full

Shadow

Elevation values, hand-authored to match Figma effect styles — see DESIGN_SYSTEM.md §4.

sm
md
lg

Layout, motion, layering

Containers, breakpoints, motion timing, and z-index — everything Figma variables can't carry natively, authored directly in tokens.css.

--container-prose
65ch
--container-content
72rem
--container-wide
90rem
--border-width-default
1px
--border-width-highlight
2px
--bp-tablet
768px
--bp-desktop
1280px
--duration-fast
120ms
--duration-base
220ms
--duration-slow
400ms
--ease-out
cubic-bezier(0.16, 1, 0.3, 1)
--ease-in-out
cubic-bezier(0.65, 0, 0.35, 1)
--z-base
0
--z-sticky
100
--z-overlay
200
--z-modal
300
Back to portfolio