Brand and interface referenceReferência de marca e interfaceReferencia de OpeningsRiferimento OpeningsRéférence de marque et d’interfaceReferenz für Marke und Oberfläche
The production foundations, components, content rules, and responsive patterns used across Openings.As fundações, os componentes, as regras de conteúdo e os padrões responsivos usados no Openings.Las bases, los componentes, las reglas de contenido y los patrones responsivos usados en Openings.Le fondamenta, i componenti, le regole di contenuto e i pattern responsivi usati in Openings.Les fondations, composants, règles de contenu et modèles adaptatifs utilisés dans Openings.Die Grundlagen, Komponenten, Inhaltsregeln und responsiven Muster von Openings.
DESIGN.md
Start with DESIGN.md, then production tokens and primitives. Use this page to inspect the result.Comece pelo DESIGN.md e depois consulte tokens e primitivos de produção. Use esta página para inspecionar o resultado.Empieza por DESIGN.md y después consulta tokens y primitivos de producción. Usa esta página para inspeccionar el resultado.Parti da DESIGN.md, poi consulta token e primitive di produzione. Usa questa pagina per verificare il risultato.Commencez par DESIGN.md, puis consultez les variables et composants de base utilisés en production. Cette page permet d’en vérifier le rendu.Beginne mit DESIGN.md und prüfe danach die Variablen und Basiskomponenten aus der Produktion. Auf dieser Seite siehst du das Ergebnis.
01
Semantic roles keep typography, color, spacing, shape, and elevation consistent across both themes.Papéis semânticos mantêm tipografia, cor, espaçamento, forma e elevação consistentes nos dois temas.Los roles semánticos mantienen tipografía, color, espacio, forma y elevación coherentes en ambos temas.I ruoli semantici mantengono tipografia, colore, spaziatura, forma ed elevazione coerenti in entrambi i temi.Les rôles sémantiques assurent la cohérence de la typographie, des couleurs, des espacements, des formes et de l’élévation dans les deux thèmes.Semantische Rollen sorgen in beiden Farbschemata für einheitliche Typografie, Farben, Abstände, Formen und Tiefenwirkung.
Switch theme in the global header to compare the same roles.Troque o tema no cabeçalho global para comparar os mesmos papéis.Cambia el tema en la cabecera global para comparar los mismos roles.Cambia tema nell'header globale per confrontare gli stessi ruoli.Changez de thème dans l’en-tête pour comparer les mêmes rôles.Wechsle das Farbschema im Kopfbereich, um dieselben Rollen zu vergleichen.
canvas+ foregroundpaper+ foregroundsurface+ foregroundsurface-elevated+ foreground+ foreground-inverseforeground+ backgroundmuted-foreground+ backgroundline+ foregroundprimary+ primary-foregroundlavender+ lavender-foregroundmint+ mint-foregroundpeach+ peach-foregroundpositive+ positive-foregroundwarning+ warning-foregroundinfo+ info-foregrounddestructive-soft+ destructive-soft-foregroundUse each paired foreground. Brand Mint is limited to prioritized actions and selection; Primary Deep carries accessible accent text and focus on light surfaces.Use a cor de texto correspondente a cada superfície. Brand Mint fica restrito a ações prioritárias e seleção; Primary Deep sustenta texto de destaque e foco acessíveis no tema claro.Usa el color de texto correspondiente a cada superficie. Brand Mint se limita a acciones prioritarias y selección; Primary Deep aporta texto de énfasis y foco accesibles en el tema claro.Usa il colore del testo abbinato a ogni superficie. Brand Mint è riservato alle azioni prioritarie e alla selezione; Primary Deep assicura testo in evidenza e focus accessibili nel tema chiaro.Utilisez la couleur de texte associée à chaque surface. Brand Mint se limite aux actions prioritaires et à la sélection ; Primary Deep assure un texte d’accent et un focus accessibles sur le thème clair.Nutze zu jeder Fläche die passende Textfarbe. Brand Mint bleibt priorisierten Aktionen und Auswahl vorbehalten; Primary Deep trägt im hellen Farbschema zugängliche Akzenttexte und Fokuszustände.
text-hero · displayProduct discovery, set in FigtreeDescoberta de vagas em FigtreeDescubrimiento de vacantes en FigtreeRicerca delle offerte in FigtreeDécouverte d'offres en FigtreeStellensuche in Figtree
text-public-profileProduct discovery, set in FigtreeDescoberta de vagas em FigtreeDescubrimiento de vacantes en FigtreeRicerca delle offerte in FigtreeDécouverte d'offres en FigtreeStellensuche in Figtree
text-page-title · directoryProduct discovery, set in FigtreeDescoberta de vagas em FigtreeDescubrimiento de vacantes en FigtreeRicerca delle offerte in FigtreeDécouverte d'offres en FigtreeStellensuche in Figtree
text-product-titleProduct discovery, set in FigtreeDescoberta de vagas em FigtreeDescubrimiento de vacantes en FigtreeRicerca delle offerte in FigtreeDécouverte d'offres en FigtreeStellensuche in Figtree
text-section-titleProduct discovery, set in FigtreeDescoberta de vagas em FigtreeDescubrimiento de vacantes en FigtreeRicerca delle offerte in FigtreeDécouverte d'offres en FigtreeStellensuche in Figtree
text-marketing-bodyInterface and body copy use one humanist family so hierarchy stays calm at product density.Interface e corpo usam uma família humanista para manter a hierarquia calma em telas densas.Interfaz y cuerpo usan una familia humanista para mantener una jerarquía serena con densidad de producto.Interfaccia e corpo usano una famiglia umanista per mantenere calma la gerarchia ad alta densità.L’interface et les textes utilisent une famille humaniste qui préserve une hiérarchie claire dans les écrans denses.Oberfläche und Fließtext nutzen eine humanistische Schriftfamilie, damit die Hierarchie auch in dichten Ansichten klar bleibt.
text-metadatafont-editorialA short editorial phrase can change the pace.Uma frase editorial curta pode mudar o ritmo.Una frase editorial breve puede cambiar el ritmo.Una breve frase editoriale può cambiare il ritmo.Une courte phrase éditoriale peut changer le rythme.Eine kurze redaktionelle Phrase kann den Rhythmus ändern.
font-mono · technicalInterface and body copy use one humanist family so hierarchy stays calm at product density.Interface e corpo usam uma família humanista para manter a hierarquia calma em telas densas.Interfaz y cuerpo usan una familia humanista para mantener una jerarquía serena con densidad de producto.Interfaccia e corpo usano una famiglia umanista per mantenere calma la gerarchia ad alta densità.L’interface et les textes utilisent une famille humaniste qui préserve une hiérarchie claire dans les écrans denses.Oberfläche und Fließtext nutzen eine humanistische Schriftfamilie, damit die Hierarchie auch in dichten Ansichten klar bleibt.
8121624324864controlcardfloating02
The supplied openings.dev lockup leads. Its stacked-page symbol becomes the compact mark where the full logo cannot stay legible.A logo openings.dev fornecida vem primeiro. O símbolo de páginas empilhadas vira a marca compacta quando a logo completa não fica legível.El logotipo openings.dev proporcionado es prioritario. Su símbolo de páginas apiladas se convierte en la marca compacta cuando el logotipo completo no conserva su legibilidad.Il logo openings.dev fornito viene prima. Il simbolo con le pagine sovrapposte diventa il marchio compatto quando il logo completo non rimane leggibile.Le logo openings.dev fourni est prioritaire. Son symbole de pages superposées devient la marque compacte lorsque le logo complet n’est plus lisible.Das bereitgestellte openings.dev-Logo führt. Sein gestapeltes Seitensymbol wird zur kompakten Marke, wenn das vollständige Logo nicht lesbar bleibt.
canvaspapersurface-elevatedinverse16243248Full logo firstLogo completa primeiroPrimero el logotipo completoPrima il logo completoLe logo complet d’abordVollständiges Logo zuerstUse the exact supplied openings.dev lockup wherever it remains legible.Use a logo openings.dev fornecida, sem redesenhar, sempre que ela permanecer legível.Usa el logotipo openings.dev proporcionado, sin redibujarlo, siempre que siga siendo legible.Usa il logo openings.dev fornito, senza ridisegnarlo, quando resta leggibile.Utilisez le logo openings.dev fourni, sans le redessiner, tant qu’il reste lisible.Nutze das bereitgestellte openings.dev-Logo unverändert, solange es lesbar bleibt.
Stacked-page markMarca de páginas empilhadasMarca de páginas apiladasMarchio con pagine sovrapposteMarque aux pages superposéesGestapeltes SeitensymbolReserved for favicons and constrained identity slots.Reservado para favicons e espaços de identidade restritos.Reservada para favicons y espacios de identidad limitados.Riservata a favicon e spazi identità limitati.Réservé aux favicons et aux espaces où la marque doit tenir dans un format réduit.Für Favicons und kleine Flächen reserviert, auf denen die Marke erscheinen muss.
One identityUma identidadeUna identidadUn'identitàUne identitéEine IdentitätNo companion motif, container, effect, or second symbol.Sem motivo auxiliar, contêiner, efeito ou segundo símbolo.Sin motivo auxiliar, contenedor, efecto ni segundo símbolo.Nessun motivo ausiliario, contenitore, effetto o secondo simbolo.Aucun motif auxiliaire, conteneur, effet ou second symbole.Kein Begleitmotiv, Container, Effekt oder zweites Symbol.
03
Production controls share hairlines, clear states, visible focus, and a minimum 44-pixel target.Os controles de produção compartilham bordas finas, estados claros, foco visível e alvo mínimo de 44 pixels.Los controles de producción comparten bordes finos, estados claros, foco visible y un objetivo mínimo de 44 píxeles.I controlli di produzione condividono bordi sottili, stati chiari, focus visibile e un target minimo di 44 pixel.Les contrôles de production utilisent des filets fins, des états clairs, un focus visible et une cible d’au moins 44 pixels.Produktionskomponenten verwenden feine Linien, klare Zustände, sichtbaren Fokus und mindestens 44 Pixel große Ziele.
04
Representative product data tests real density without presenting a live listing or endorsement.Dados representativos testam a densidade real sem apresentar uma vaga ativa ou um endosso.Los datos representativos prueban la densidad real sin parecer una vacante activa ni un aval.I dati rappresentativi verificano la densità reale senza sembrare un'offerta attiva o un'approvazione.Les données d’exemple permettent de vérifier une densité réaliste sans passer pour une offre active ou une recommandation.Beispieldaten helfen, realistische Inhaltsdichte zu prüfen, ohne wie eine aktive Stelle oder Empfehlung zu wirken.
Representative data — not a live listingDados representativos — não é uma vaga realDatos representativos — no es una vacante realDati rappresentativi — non è un'offerta realeDonnées représentatives — pas une offre réelleRepräsentative Daten — kein echtes Stellenangebot
Profile patterns use representative identities and disabled actions.Os perfis usam identidades representativas e ações desabilitadas.Los perfiles usan identidades representativas y acciones deshabilitadas.I profili usano identità rappresentative e azioni disabilitate.Les profils utilisent des identités d’exemple et des actions désactivées.Profile verwenden klar erkennbare Beispielidentitäten und deaktivierte Aktionen.
openings-dev/community-opportunities-and-maintainers
Open tech jobs shared through openings.dev/specimen, each linked to its original source.
@specimen-author
Open tech jobs authored by @specimen-author across public GitHub community repositories.
05
Copy names the job-search action, explains the public GitHub source, and avoids claims the data cannot prove.O texto nomeia a ação, explica a fonte pública no GitHub e evita afirmações que os dados não comprovam.El texto nombra la acción, explica la fuente pública en GitHub y evita afirmaciones que los datos no prueban.Il testo nomina l'azione, spiega la fonte pubblica su GitHub ed evita affermazioni non dimostrabili.Le texte nomme l'action, explique la source publique GitHub et évite les affirmations non prouvées.Texte benennen die Aktion, erklären die öffentliche GitHub-Quelle und vermeiden unbelegte Aussagen.
Message thesisTese da mensagemTesis del mensajeTesi del messaggioPromesse centraleKernbotschaft
Find tech jobs shared by GitHub communities.Encontre as vagas de tecnologia que as comunidades já estão publicando.Encuentra las vacantes tech que las comunidades públicas de GitHub ya comparten.Trova le offerte tech che le comunità pubbliche su GitHub stanno già condividendo.Trouvez les offres tech que les communautés GitHub partagent déjà.Finde die Tech-Jobs, die GitHub-Communities bereits teilen.
Openings indexes public listings; it does not verify employers, guarantee accuracy, or operate applications.O Openings indexa anúncios públicos; não verifica empregadores, não garante a precisão dos dados nem conduz candidaturas.Openings indexa anuncios públicos; no verifica a los empleadores, no garantiza la exactitud ni gestiona candidaturas.Openings indicizza annunci pubblici; non verifica i datori di lavoro, non garantisce l'accuratezza e non gestisce candidature.Openings indexe des annonces publiques ; il ne vérifie pas les employeurs, ne garantit pas l'exactitude et ne gère pas les candidatures.Openings indexiert öffentliche Anzeigen; es prüft keine Arbeitgeber, garantiert keine Genauigkeit und führt keine Bewerbungen durch.
Copy names the job-search action, explains the public GitHub source, and avoids claims the data cannot prove.
Openings indexes public listings; it does not verify employers, guarantee accuracy, or operate applications.
| Foundations | Usage |
|---|---|
| paper | Long-form reading surface |
| line | Low-contrast structural boundaries |
font-mono · github.com/openings-dev/web
O texto nomeia a ação, explica a fonte pública no GitHub e evita afirmações que os dados não comprovam.
O Openings indexa anúncios públicos; não verifica empregadores, não garante a precisão dos dados nem conduz candidaturas.
| Fundações | Uso |
|---|---|
| paper | Superfície de leitura longa |
| line | Divisórias estruturais de baixo contraste |
font-mono · github.com/openings-dev/web
El texto nombra la acción, explica la fuente pública en GitHub y evita afirmaciones que los datos no prueban.
Openings indexa anuncios públicos; no verifica a los empleadores, no garantiza la exactitud ni gestiona candidaturas.
| Bases | Uso |
|---|---|
| paper | Superficie de lectura extensa |
| line | Límites estructurales de bajo contraste |
font-mono · github.com/openings-dev/web
Il testo nomina l'azione, spiega la fonte pubblica su GitHub ed evita affermazioni non dimostrabili.
Openings indicizza annunci pubblici; non verifica i datori di lavoro, non garantisce l'accuratezza e non gestisce candidature.
| Fondamenta | Utilizzo |
|---|---|
| paper | Superficie per lettura estesa |
| line | Confini strutturali a basso contrasto |
font-mono · github.com/openings-dev/web
Le texte nomme l'action, explique la source publique GitHub et évite les affirmations non prouvées.
Openings indexe des annonces publiques ; il ne vérifie pas les employeurs, ne garantit pas l'exactitude et ne gère pas les candidatures.
| Fondations | Utilisation |
|---|---|
| paper | Surface pour les contenus longs |
| line | Limites structurelles à faible contraste |
font-mono · github.com/openings-dev/web
Texte benennen die Aktion, erklären die öffentliche GitHub-Quelle und vermeiden unbelegte Aussagen.
Openings indexiert öffentliche Anzeigen; es prüft keine Arbeitgeber, garantiert keine Genauigkeit und führt keine Bewerbungen durch.
| Grundlagen | Anwendung |
|---|---|
| paper | Fläche für längere Texte |
| line | Kontrastarme strukturelle Grenzen |
font-mono · github.com/openings-dev/web
06
Feedback stays factual across selected, disabled, invalid, loading, empty, and destructive states.O feedback permanece factual nos estados selecionado, desabilitado, inválido, carregando, vazio e destrutivo.La respuesta sigue siendo factual en estados seleccionado, deshabilitado, no válido, cargando, vacío y destructivo.Il feedback resta fattuale negli stati selezionato, disabilitato, non valido, caricamento, vuoto e distruttivo.Les messages restent factuels dans les états sélectionné, désactivé, invalide, chargement, vide et destructif.Rückmeldungen bleiben bei Auswahl, Deaktivierung, ungültiger Eingabe, Laden, leeren Ergebnissen und destruktiven Aktionen sachlich.
Representative data — not a live listing
We couldn’t load jobs. Refresh the page to try again.
This empty state belongs only to the example and does not load live jobs.
07
Mobile layouts recompose by priority; they do not shrink a wide workspace into a narrow column.No celular, o layout se reorganiza por prioridade; ele não apenas comprime uma área de trabalho larga.En móvil, el diseño se recompone por prioridad; no se limita a comprimir el espacio de trabajo.Su mobile, il layout si ricompone per priorità; non comprime semplicemente il workspace.Sur mobile, la mise en page se réorganise par priorité au lieu de simplement réduire un espace de travail large.Auf kleinen Bildschirmen ordnet sich das Layout nach Priorität neu, statt einen breiten Arbeitsbereich nur zu verkleinern.
max-w-[90rem]max-w-[80rem]max-w-[74ch]grid-cols-12Copy names the job-search action, explains the public GitHub source, and avoids claims the data cannot prove.O texto nomeia a ação, explica a fonte pública no GitHub e evita afirmações que os dados não comprovam.El texto nombra la acción, explica la fuente pública en GitHub y evita afirmaciones que los datos no prueban.Il testo nomina l'azione, spiega la fonte pubblica su GitHub ed evita affermazioni non dimostrabili.Le texte nomme l'action, explique la source publique GitHub et évite les affirmations non prouvées.Texte benennen die Aktion, erklären die öffentliche GitHub-Quelle und vermeiden unbelegte Aussagen.
Mobile layouts recompose by priority; they do not shrink a wide workspace into a narrow column.No celular, o layout se reorganiza por prioridade; ele não apenas comprime uma área de trabalho larga.En móvil, el diseño se recompone por prioridad; no se limita a comprimir el espacio de trabajo.Su mobile, il layout si ricompone per priorità; non comprime semplicemente il workspace.Sur mobile, la mise en page se réorganise par priorité au lieu de simplement réduire un espace de travail large.Auf kleinen Bildschirmen ordnet sich das Layout nach Priorität neu, statt einen breiten Arbeitsbereich nur zu verkleinern.
Search stays visible; secondary controls disclose without horizontal overflow.A busca permanece visível; controles secundários abrem sem criar rolagem horizontal.La búsqueda sigue visible; los controles secundarios se abren sin desbordamiento horizontal.La ricerca resta visibile; i controlli secondari si aprono senza overflow orizzontale.La recherche reste visible ; les contrôles secondaires s'ouvrent sans débordement horizontal.Die Suche bleibt sichtbar; sekundäre Steuerelemente öffnen ohne horizontalen Überlauf.
Columns expand while job details keep the same fullscreen modal contract.As colunas se expandem, mas os detalhes mantêm o mesmo modal em tela cheia.Las columnas crecen y los detalles conservan el mismo modal a pantalla completa.Le colonne si espandono mentre i dettagli mantengono lo stesso modale a schermo intero.Les colonnes s’élargissent, tandis que les détails conservent le même dialogue en plein écran.Die Spalten werden breiter, während die Stellendetails im selben Vollbilddialog bleiben.
Job details stay fullscreen on wide viewports; reading pages retain a narrow article measure.Os detalhes ficam em tela cheia mesmo em telas largas; páginas de leitura mantêm uma coluna estreita.Los detalles ocupan toda la pantalla también en vistas amplias; las páginas de lectura mantienen una columna estrecha.I dettagli restano a schermo intero anche nelle viste ampie; le pagine di lettura mantengono una colonna stretta.Les détails restent en plein écran sur les vues larges ; les pages de lecture conservent une colonne étroite.Stellendetails bleiben auch auf breiten Ansichten im Vollbild; Leseseiten behalten eine schmale Textspalte.
08
Start with DESIGN.md, then production tokens and primitives. Use this page to inspect the result.Comece pelo DESIGN.md e depois consulte tokens e primitivos de produção. Use esta página para inspecionar o resultado.Empieza por DESIGN.md y después consulta tokens y primitivos de producción. Usa esta página para inspeccionar el resultado.Parti da DESIGN.md, poi consulta token e primitive di produzione. Usa questa pagina per verificare il risultato.Commencez par DESIGN.md, puis consultez les variables et composants de base utilisés en production. Cette page permet d’en vérifier le rendu.Beginne mit DESIGN.md und prüfe danach die Variablen und Basiskomponenten aus der Produktion. Auf dieser Seite siehst du das Ergebnis.
1 · DESIGN.mdStart with DESIGN.md, then production tokens and primitives. Use this page to inspect the result.Comece pelo DESIGN.md e depois consulte tokens e primitivos de produção. Use esta página para inspecionar o resultado.Empieza por DESIGN.md y después consulta tokens y primitivos de producción. Usa esta página para inspeccionar el resultado.Parti da DESIGN.md, poi consulta token e primitive di produzione. Usa questa pagina per verificare il risultato.Commencez par DESIGN.md, puis consultez les variables et composants de base utilisés en production. Cette page permet d’en vérifier le rendu.Beginne mit DESIGN.md und prüfe danach die Variablen und Basiskomponenten aus der Produktion. Auf dieser Seite siehst du das Ergebnis.2 · tokens · primitivesProduction controls share hairlines, clear states, visible focus, and a minimum 44-pixel target.Os controles de produção compartilham bordas finas, estados claros, foco visível e alvo mínimo de 44 pixels.Los controles de producción comparten bordes finos, estados claros, foco visible y un objetivo mínimo de 44 píxeles.I controlli di produzione condividono bordi sottili, stati chiari, focus visibile e un target minimo di 44 pixel.Les contrôles de production utilisent des filets fins, des états clairs, un focus visible et une cible d’au moins 44 pixels.Produktionskomponenten verwenden feine Linien, klare Zustände, sichtbaren Fokus und mindestens 44 Pixel große Ziele.3 · /designThe production foundations, components, content rules, and responsive patterns used across Openings.As fundações, os componentes, as regras de conteúdo e os padrões responsivos usados no Openings.Las bases, los componentes, las reglas de contenido y los patrones responsivos usados en Openings.Le fondamenta, i componenti, le regole di contenuto e i pattern responsivi usati in Openings.Les fondations, composants, règles de contenu et modèles adaptatifs utilisés dans Openings.Die Grundlagen, Komponenten, Inhaltsregeln und responsiven Muster von Openings.Start with DESIGN.md, then production tokens and primitives. Use this page to inspect the result.Comece pelo DESIGN.md e depois consulte tokens e primitivos de produção. Use esta página para inspecionar o resultado.Empieza por DESIGN.md y después consulta tokens y primitivos de producción. Usa esta página para inspeccionar el resultado.Parti da DESIGN.md, poi consulta token e primitive di produzione. Usa questa pagina per verificare il risultato.Commencez par DESIGN.md, puis consultez les variables et composants de base utilisés en production. Cette page permet d’en vérifier le rendu.Beginne mit DESIGN.md und prüfe danach die Variablen und Basiskomponenten aus der Produktion. Auf dieser Seite siehst du das Ergebnis.
OverviewVisão geralResumenPanoramicaVue d'ensembleÜberblick