Icon Style — tuempresa.digital (warm brand layer)

:::note Contenido en inglés Esta página del wiki se sincroniza desde la base de conocimiento en inglés y todavía no está traducida. :::

canonical · designer · updated 2026-06-28 · source

CANONICAL icon-system spec. This is the language for brand icons — the warm, outward-facing layer. It is not the cool product (tedos) icon set.

This is a LINES + POINTS system: abstract geometric marks built from straight line segments and solid filled dots. Confident, angular, spec-sheet glyphs — not soft pictograms. Less rounded: crisp terminals, mitered joins. No "AI sparkle" / twinkle. Ever.

Last updated: 2026-06-05

---

0. Two distinct layers — do not confuse them

There are two separate marks in this brand, and they obey different rules:

Layer	What it is	Construction	Governed by
The brand MARK	the n=13 seed-head logo	solid filled dots, phyllotaxis (golden angle)	brand.md §2, §9 — unchanged
The icon LAYER (this doc)	the UI/brand icon set	straight lines + solid points	this spec

brand.md §9 governs the MARK only. The mark is the seed-head and stays exactly as specified there. This icon layer is a separate expression of the same DNA: points = seeds, lines = connections/growth. The two never get mixed in one asset — you never re-draw the seed-head as a glyph, and you never render a UI icon as a phyllotaxis dot-field.

What ties this icon layer to the brand is the DNA, not a signature glyph: abstract marks made of lines (connections) and points (seeds) — the same two primitives the seed-head is built from. There is no spark, no twinkle, no recurring star.

---

1. The language — lines + points, abstract, less rounded

Copy the energy of a bold spec-sheet glyph grid (IMPACT RATED · POLARIZED · NO-SLIP FIT): confident, geometric, abstract marks — not detailed pictograms. Each icon is reduced to the fewest line segments + dots that still read.

Principle	Rule
Lines + points only	Strokes are straight (or hard-angled) segments. Points are solid filled dots. Nothing else.
Less rounded	stroke-linecap="butt" (or a tiny radius), stroke-linejoin="miter". Geometric, not friendly. Corners crisp.
Abstract over literal	Prefer a reduced geometric mark for each concept over a faithful pictogram. Suggest, don't illustrate.
One weight	A single consistent stroke weight for every line in the family.
Point set	Dot sizes come from a small fixed set (see §3) — not arbitrary.

The whole set must look like one engineer drew it on the same grid: same line weight, same crisp terminals, dots from the same size set. Think technical spec-sheet, not Things 3 warmth, not thin Lucide wireframe.

---

2. Grid & keyline

Property	Value
viewBox	0 0 256 256
Live area	208 × 208 (24px keyline margin on all sides)
Optical center	128, 128
Bounding box	Square. Never deform.
Background	None. Transparent. No squircle, no fill, no shadow, no gradient.

Line terminals and dots may sit near the keyline; the icon body never touches the edge.

---

3. The two primitives

3a. The line — one consistent stroke

Property	Value	Note
stroke-width	16	One weight for the whole family. Renders ~1.5px at 24px.
stroke-linecap	butt	Crisp, square terminals. (A 2-unit radius is allowed only if a true butt edge looks broken at size.)
stroke-linejoin	miter	Sharp corners. miterlimit small. No round joins.
fill	none	Line shapes are stroked, never filled.
Ink	currentColor	Inverts with the host surface (Tinta on Pergamino, Pergamino on Tinta).
Corner radius	crisp / none	Where a line turns, it turns at a hard angle. A tiny radius (≤4 on the 256 grid) is the max — never the soft 20–28 of the old rounded system.

3b. The point — solid filled dot

Property	Value	Note
Shape	Circle. A solid filled dot — the "seed". Never a ring/outline.
Fill	fill="currentColor" by default	Points are ink, same as the lines, so they invert with the surface.
Size set	r = 8 / 12 / 16 on the 256 grid	A small fixed set. Pick from these; don't free-size dots.
Role	A point marks a node, terminal, seed, or junction — where a connection begins, ends, or branches.

Points = seeds, lines = connections. That mapping is the whole grammar.

---

4. The Azafrán accent — optional, at most one

There is no spark and no twinkle. Azafrán enters, if at all, as one point or one line segment — the same "one Azafrán per composition" discipline from brand.md §6, expressed inside the geometry instead of as a star.

Property	Value
What it can be	One Azafrán dot, or one Azafrán line segment. Never both.
Color	#c97a2c (Azafrán) — literal hex, never currentColor. It does not invert.
Count	At most 1. Zero is fine (and often best). Two is a violation.
Never	Never a 4-point star, never a sparkle, never a twinkle. Never a whole icon in Azafrán (the spec-sheet's mono-orange is its brand, not ours).
Placement	At the icon's meaningful point — the active node, the new connection, the seed that matters.

The brand never signals "AI" with a sparkle. (brand.md §6 / §9 DON'T, 2026-06-05.) The destello is a point, not a brillito.

---

5. Palette roles

Warm brand palette only. Never the product cool palette / indigo.

Token	Hex	Role in an icon
Tinta	#0f0e0c	The ink = all lines and (by default) all points. Encoded as currentColor.
Pergamino	#f8f4ec	The surface; never drawn inside the icon (transparency does the work).
Azafrán	#c97a2c	Optional accent — at most one point or one segment. Never inverts.

No gradient, no second neutral, no container.

Inversion

Lines and ink-points are currentColor, so on a Tinta surface the host sets the color to Pergamino and they invert automatically. An Azafrán accent (if present) stays Azafrán on both surfaces.

---

6. Construction rules

1. Reduce the concept to lines + points. Ask: what is the fewest straight segments and solid dots that still read as this idea? Draw that.
2. Keep it abstract. A geometric mark that suggests the concept beats a literal pictogram. Lean spec-sheet, not illustration.
3. Everything crisp. Butt caps, miter joins, hard angles. No soft corners.
4. One line weight only (16). Points from the {8, 12, 16} radius set.
5. Detail by removing, not by adding. Fewer segments is better. Gaps are made by ending a stroke, not by drawing a hairline.
6. Accent is optional. Add at most one Azafrán point/segment, only if it marks something meaningful. Zero accent is a valid, clean icon.
7. Optical balance over mathematical. Center by eye.

---

7. Minimum sizes & legibility

Size	Behavior
24px	Floor for full detail. Lines render ~1.5px; points stay legible.
20px	Allowed; small points may merge visually but the structure holds.
<16px	Drop the smallest points and any Azafrán accent; render the core line skeleton alone. (Mirrors brand.md §9 "drop to the single center element.")

---

8. Do / Don't

DO

• Build from straight lines + solid points only. Two primitives.
• One uniform stroke weight, butt caps, miter joins across the whole set.
• Keep it abstract and geometric — reduced marks, not detailed pictograms.
• Map meaning to the grammar: points = seeds/nodes, lines = connections.
• Use currentColor for lines and ink-points so icons work on both surfaces.
• Treat Azafrán as optional — at most one point or segment; zero is fine.

DON'T

• No "AI sparkle" / twinkle / 4-point star. Banned brand-wide (brand.md §6 / §9). The destello is a point, never a glyph.
• No soft / friendly rounding. No round caps, no round joins, no big corner radii. This is a crisp geometric system.
• No filled glyphs and no curves-as-decoration. Lines are stroked; the only fills are the solid dots.
• No second stroke weight, no hairlines.
• No whole-icon Azafrán, no two accents, no Azafrán and an ink accent.
• No indigo / product cool palette. Tinta (currentColor) + optional Azafrán.
• No container. Transparent, naked, square. No squircle, fill, gradient, shadow.
• Don't confuse this with the brand mark. The seed-head stays as brand.md §2/§9 specifies. This layer is lines + points. Never mix them in one asset.

---

9. Encoding checklist (for the generator / Frontend)

1. viewBox 0 0 256 256, no hardcoded width/height (size via CSS).
2. Lines → stroke="currentColor", fill="none", stroke-width="16", stroke-linecap="butt", stroke-linejoin="miter".
3. Points → <circle> with fill="currentColor", radius from {8, 12, 16}.
4. Azafrán accent (optional, ≤1) → fill="#c97a2c" (a dot) or stroke="#c97a2c" (one segment). Never a star path.
5. No <rect> background, no filter, no <linearGradient>, no second neutral.
6. Zero sparkles. Zero twinkles. Zero 4-point stars.
7. Verify at 24px; confirm the smallest points + any accent are droppable below 16px.