Senior Computational Designer
Aria Signs & Design
- What was done, one line each.
Reference
Hark Web Standards
The shared design of every page on felipeharker.org
/standards/hark.css Portfolio, Academic, Birding, Resume
Abstract
Every page on felipeharker.org is built on one stylesheet. This page renders each of its tokens and components exactly as the other pages receive them. The reasoning is written down in web/standards/docs in the repository; this page is for seeing it.
Colour
A white ground, three steps of warm near-black text, two hairline greys and one deep red. The red marks what can be clicked or what is selected, and nothing else. Change --color-accent and its hover and wash follow.
bg
The page.
surface
Placeholders, hovered controls.
surface-hover
Code, neutral tags.
text
Headings. 17.3:1
text-soft
Prose. 9.3:1
text-mute
Labels, data. 4.6:1
accent
Interactive, selected.
accent-hover
Derived from accent.
accent-wash
Derived from accent.
selection
Selected text.
rule
Between rows.
rule-strong
Between sections.
Type
Inter for anything a person wrote; IBM Plex Mono for anything read off a record. Three weights — 400, 500, 600 — and nothing bolder. Each sample below is set at the size it names; sizes step down below 640px.
| Sample | Token | Size |
|---|---|---|
| Felipe E. Harker | --size-title | 34 |
| Sheldon Lake State Park | --size-title-record | 27 |
| Experience | --size-section | 23 |
| Computational design and architecture | --size-subtitle | 17 |
| Living Outside the Box | --size-subsection | 17 |
| A paragraph of running prose. | --size-body | 16 |
| A list item, a table cell, a summary. | --size-table | 15 |
| 2024-07-01 · 29.7604, -95.3698 | --size-data | 13 |
| A caption under a figure. | --size-caption | 13 |
| Dendrocygna autumnalis | --size-fine | 12 |
| Eyebrow Label | --size-label | 11 |
--size-abstract matches --size-body. Sizes in pixels, desktop.
Space
Every margin, padding and gap is one of seven steps. Sections sit --space-7 apart; rows within a section, --space-5 to --space-6.
| Token | Width | Pixels |
|---|---|---|
--space-1 | 4 | |
--space-2 | 8 | |
--space-3 | 12 | |
--space-4 | 18 | |
--space-5 | 26 | |
--space-6 | 40 | |
--space-7 | 56 |
Rules
.rule — between sections and under a masthead.
.rule-soft — between rows within a block.
Masthead
A front page centres its masthead. A record aligns left; a record whose title names a thing rather than the person takes the smaller record title.
Front page
Portfolio
Felipe E. Harker
Computational design, architecture, and the tools built alongside them
Houston, TXfehark@gmail.com
Record — .masthead--left
Record of a thing — .masthead--left .masthead--record
Checklist Report
Sheldon Lake State Park
Harris, US-TX · May 10, 2026 · 08:54 AM
Body Copy
.body-text, .list, .data, .sep
A paragraph at the reading measure, set in the soft text colour. Recorded values inside prose — 2024, 42 observations — take the data face. Links in prose, like this one, keep a hairline underline.
- A list in prose is set a step smaller than a paragraph.
- Items are spaced, not ruled.
.label, .caption, .empty
An Eyebrow Label
A caption: sentence case, unnumbered, only when it says something the thing above it does not.
No field notes yet.
Contents — .toc and .toc--inline
Tables
| Species | Count |
|---|---|
| Black-bellied Whistling-Duck | 14 |
| Killdeer | 2 |
| Red-shouldered Hawk | X |
Hairlines only. Numeric columns are right-aligned, and their cells are mono.
Definition Grid
.facts — prose values
- Architectural Design
- Rhinoceros 8, Grasshopper, Adobe Creative Suite
- Languages
- English (Native), Portuguese (Native), Spanish (Proficient)
.facts .facts--data — recorded values
- Protocol
- eBird - Traveling Count
- Effort
- 65 min · 1.7 km
Disclosure Rows
A long list starts as an index; each row opens in place. Native <details>, so it works without a script.
Sheldon Lake State Park ShowHide
Checklists
The first block of an open row.
Species Observed
The next block, spaced rather than ruled.
Jesse H. Jones Park ShowHide
Controls
.toolbar, .btn, .tag
.field, .field-icon, .input
Work List
One project or site per row: cover, title, hairline, summary, stack, kind, address — always in that order. Below 860px the cover sits above its facts.
-
Living Outside the Box
A hillside housing community built up from one pre-fabricated concrete box.
Rio de Janeiro, Brazil Residential
Academic
Project Page -
Harker Ornithology Report
A row whose cover has not been made yet names itself in the placeholder.
Personal
Project Site
Entries
Bachelor of Architecture
University of Houston, Hines College of Architecture and Design
Plates
The Box
A drawing gets the whole column; its title and a paragraph follow it at the reading measure.
References
- GitHub A place: the heading is the link.
- fehark@gmail.com An address that is its own heading: .path.
- A Referee A person: .name, then .desc, then an .addr to reach them. name@example.edu